/* =========================================================
   KANAKPUR TARUN SANGHA
   CLEAN STYLE.CSS
   PART 1 / 10
========================================================= */

/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f5f6fa;
    color:#222;
    line-height:1.6;
    overflow-x:hidden;
    padding-top:78px;
}

/* COMMON */

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

button{
    cursor:pointer;
    font-family:inherit;
}

.content{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:25px;
}

/* SECTION */

section{
    margin:60px 0;
}

.section-title{

    text-align:center;

    font-size:38px;

    font-weight:800;

    color:#8B0000;

    margin-bottom:35px;

}

/* BUTTON */

.btn,
.read-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

padding:14px 28px;

background:#8B0000;

color:#fff;

border:none;

border-radius:50px;

font-weight:700;

transition:.3s;

}

.btn:hover,
.read-btn:hover{

background:#a60000;

transform:translateY(-3px);

}
/* =========================================================
   PART 2 / 10
   HEADER
========================================================= */

.topbar{

position:fixed;

top:0;
left:0;

width:100%;
height:78px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 22px;

background:#8B0000;

color:#fff;

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

z-index:9999;

}

.menu-btn{

width:46px;

height:46px;

border:none;

border-radius:12px;

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

color:#fff;

font-size:28px;

transition:.3s;

}

.menu-btn:hover{

background:#fff;

color:#8B0000;

}

.logo-area{

display:flex;

align-items:center;

gap:15px;

}

.logo{

width:56px;

height:56px;

border-radius:50%;

border:3px solid #fff;

object-fit:cover;

}

.club-title h1{

font-size:27px;

font-weight:800;

color:#fff;

line-height:1.2;

}

.club-title p{

margin-top:4px;

font-size:13px;

letter-spacing:2px;

color:#ffe7a4;

}

.switch{

position:relative;

width:52px;

height:28px;

}

.switch input{

display:none;

}

.slider{

position:absolute;

inset:0;

background:#d2d2d2;

border-radius:30px;

transition:.3s;

cursor:pointer;

}

.slider::before{

content:"";

position:absolute;

width:20px;

height:20px;

left:4px;

top:4px;

border-radius:50%;

background:#fff;

transition:.3s;

}

.switch input:checked + .slider{

background:#4CAF50;

}

.switch input:checked + .slider::before{

transform:translateX(24px);

}

@media(max-width:768px){

.topbar{

height:70px;

padding:0 12px;

}

.logo{

width:46px;

height:46px;

}

.club-title h1{

font-size:18px;

}

.club-title p{

font-size:11px;

letter-spacing:1px;

}

.menu-btn{

width:40px;

height:40px;

font-size:24px;

}

}
/* =========================================================
   PART 3 / 10
   SIDEBAR
========================================================= */

.sidebar{

position:fixed;

top:0;

left:-300px;

width:300px;

height:100vh;

background:linear-gradient(180deg,#8B0000,#700000,#550000);

overflow-y:auto;

transition:.35s;

z-index:99999;

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

}

.sidebar.active{

left:0;

}

.sidebar-header{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

padding:30px 20px;

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

}

.sidebar-logo{

width:100px;

height:100px;

border-radius:50%;

border:4px solid #fff;

margin-bottom:18px;

object-fit:cover;

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

}

.sidebar-header h2{

font-size:26px;

font-weight:800;

color:#fff;

margin-bottom:6px;

}

.sidebar-header p{

font-size:15px;

color:#ffe8a6;

}

.sidebar a{

display:flex;

align-items:center;

gap:12px;

padding:16px 22px;

color:#fff;

font-size:17px;

font-weight:600;

transition:.3s;

}

.sidebar a:hover{

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

padding-left:30px;

}

.sidebar-footer{

padding:22px;

text-align:center;

font-size:13px;

color:#ddd;

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

}

@media(max-width:768px){

.sidebar{

width:270px;

left:-270px;

}

.sidebar.active{

left:0;

}

.sidebar-logo{

width:85px;

height:85px;

}

.sidebar-header h2{

font-size:20px;

}

.sidebar-header p{

font-size:13px;

}

.sidebar a{

font-size:16px;

padding:15px 18px;

}

}
/* =========================================================
   PART 4 / 10
   NOTICE BAR + EVENT BAR
========================================================= */

.notice-bar{

display:flex;

align-items:center;

height:52px;

background:#fff8dc;

border-top:2px solid #8B0000;

border-bottom:2px solid #8B0000;

overflow:hidden;

margin:0;

}

.notice-label{

min-width:145px;

display:flex;

align-items:center;

justify-content:center;

background:#8B0000;

color:#fff;

font-size:18px;

font-weight:700;

}

.notice-wrapper{

flex:1;

overflow:hidden;

white-space:nowrap;

}

.notice-track{

display:inline-block;

padding-left:100%;

animation:noticeMove 20s linear infinite;

}

.notice-track span{

font-size:17px;

font-weight:600;

color:#8B0000;

}

.notice-wrapper:hover .notice-track{

animation-play-state:paused;

}

@keyframes noticeMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-100%);

}

}

/* EVENT BAR */

.home-event-countdown-bar{

background:linear-gradient(90deg,#8B0000,#b30000,#8B0000);

padding:12px 18px;

color:#fff;

}

.home-event-bar-inner{

display:flex;

align-items:center;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.home-event-bar-name{

font-size:19px;

font-weight:700;

}

.home-event-bar-item{

font-size:16px;

font-weight:600;

}

.home-event-live-countdown{

padding:10px 18px;

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

border-radius:10px;

font-family:monospace;

font-size:17px;

font-weight:700;

}

.home-event-bar-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 18px;

background:#fff;

color:#8B0000;

border-radius:30px;

font-weight:700;

}

.home-event-bar-btn:hover{

background:#ffe8a8;

}

@media(max-width:768px){

.notice-label{

min-width:95px;

font-size:14px;

}

.notice-track span{

font-size:14px;

}

.home-event-bar-inner{

gap:8px;

}

.home-event-bar-name{

width:100%;

text-align:center;

font-size:15px;

}

.home-event-bar-item{

font-size:13px;

}

.home-event-live-countdown{

font-size:13px;

padding:8px 12px;

}

.home-event-bar-btn{

font-size:12px;

padding:8px 12px;

}

}
/* =========================================================
   PART 5 / 10
   HERO SECTION
========================================================= */

.hero{

display:grid;

grid-template-columns:1.1fr .9fr;

align-items:center;

gap:60px;

padding:60px 0;

}

.hero-text h2{

font-size:30px;

font-weight:700;

color:#8B0000;

margin-bottom:12px;

}

.hero-text h1{

font-size:60px;

font-weight:800;

line-height:1.15;

color:#222;

margin-bottom:18px;

}

.hero-text p{

font-size:22px;

line-height:1.8;

color:#555;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.hero-buttons .btn{

padding:15px 34px;

border-radius:50px;

font-size:17px;

font-weight:700;

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

}

.hero-video{

overflow:hidden;

border-radius:22px;

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

}

.hero-video video{

display:block;

width:100%;

height:500px;

object-fit:cover;

}

.live-info{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin-top:20px;

}

.greeting-box,

.datetime-box{

background:#fff;

padding:20px;

border-radius:15px;

text-align:center;

font-size:20px;

font-weight:700;

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

border-left:5px solid #8B0000;

}

@media(max-width:768px){

.hero{

grid-template-columns:1fr;

gap:30px;

padding:35px 0;

}

.hero-text{

text-align:center;

}

.hero-text h1{

font-size:36px;

}

.hero-text h2{

font-size:22px;

}

.hero-text p{

font-size:18px;

}

.hero-buttons{

justify-content:center;

}

.hero-buttons .btn{

width:100%;

max-width:260px;

}

.hero-video video{

height:300px;

}

.live-info{

grid-template-columns:1fr;

}

}
/* =========================================================
   PART 6 / 10
   WELCOME + ABOUT
========================================================= */

.welcome,
.about-preview{

background:#fff;

padding:40px;

border-radius:20px;

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

}

.welcome h2,
.about-preview h2{

font-size:38px;

font-weight:800;

color:#8B0000;

margin-bottom:20px;

}

.welcome p,
.about-preview p{

font-size:19px;

line-height:2;

color:#444;

margin-bottom:18px;

text-align:justify;

}

.about-preview ul{

margin:20px 0;

padding-left:25px;

}

.about-preview li{

font-size:18px;

margin-bottom:12px;

line-height:1.8;

}

.read-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 30px;

background:#8B0000;

color:#fff;

border-radius:50px;

font-size:16px;

font-weight:700;

transition:.3s;

}

.read-btn:hover{

background:#a50000;

transform:translateY(-3px);

}

@media(max-width:768px){

.welcome,
.about-preview{

padding:25px 18px;

}

.welcome h2,
.about-preview h2{

font-size:28px;

text-align:center;

}

.welcome p,
.about-preview p{

font-size:17px;

line-height:1.8;

text-align:left;

}

.about-preview li{

font-size:16px;

}

.read-btn{

width:100%;

}

}
/* =========================================================
   PART 7 / 10
   NOTICE + EVENT + INFO CARD
========================================================= */

.notice-preview,
.events-preview{

margin:60px 0;

}

.info-card{

background:#fff;

padding:40px;

border-radius:20px;

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

text-align:center;

transition:.3s;

}

.info-card:hover{

transform:translateY(-6px);

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

}

.info-card h3{

font-size:30px;

font-weight:800;

color:#8B0000;

margin-bottom:18px;

line-height:1.5;

}

.info-card p{

font-size:18px;

line-height:1.9;

color:#555;

margin-bottom:28px;

}

.info-card .read-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 32px;

background:#8B0000;

color:#fff;

border-radius:50px;

font-size:16px;

font-weight:700;

transition:.3s;

}

.info-card .read-btn:hover{

background:#a50000;

transform:translateY(-3px);

}

@media(max-width:768px){

.info-card{

padding:25px 18px;

}

.info-card h3{

font-size:22px;

}

.info-card p{

font-size:16px;

}

.info-card .read-btn{

width:100%;

}

}
/* =========================================================
   PART 8 / 10
   STATISTICS + OFFICE BEARERS
========================================================= */

/* STATISTICS */

#statistics{

padding:60px 0;

}

.stats-grid{

display:grid;

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

gap:20px;

}

.stats-card{

background:#fff;

padding:25px 15px;

border-radius:18px;

text-align:center;

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

transition:.3s;

}

.stats-card:hover{

transform:translateY(-8px);

}

.stats-icon{

font-size:42px;

margin-bottom:15px;

}

.stats-card h3{

font-size:38px;

color:#8B0000;

margin-bottom:10px;

}

.stats-card p{

font-size:18px;

font-weight:700;

color:#444;

}

/* OFFICE */

.office-section{

padding:60px 0;

}

.office-grid{

display:grid;

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

gap:20px;

justify-content:center;

align-items:stretch;

}

.office-card{

background:#fff;

padding:25px 15px;

border-radius:20px;

text-align:center;

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

}

.office-card img{

width:140px;

height:140px;

margin:0 auto 18px;

object-fit:cover;

border-radius:50%;

border:5px solid #8B0000;

}

.office-card h3{

font-size:24px;

margin-bottom:12px;

color:#222;

}

.designation{

display:inline-block;

padding:8px 20px;

background:#8B0000;

color:#fff;

border-radius:30px;

font-size:14px;

font-weight:700;

}

.center-btn{

margin-top:30px;

text-align:center;

}

@media(max-width:768px){

.stats-grid{

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

gap:8px;

}

.stats-card{

padding:10px 5px;

}

.stats-icon{

font-size:22px;

}

.stats-card h3{

font-size:18px;

}

.stats-card p{

font-size:11px;

}

.office-grid{

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

gap:8px;

}

.office-card{

padding:10px 6px;

}

.office-card img{

width:70px;

height:70px;

}

.office-card h3{

font-size:12px;

line-height:1.3;

}

.designation{

font-size:10px;

padding:4px 8px;

}

}
/* =========================================================
   PART 9 / 10
   COMMENT + FOOTER
========================================================= */

/* COMMENT */

.comment-section{

padding:60px 0;

}

.comment-text{

text-align:center;

font-size:18px;

color:#666;

margin-bottom:25px;

}

#commentForm{

background:#fff;

padding:30px;

border-radius:20px;

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

}

#commentForm input,
#commentForm textarea{

width:100%;

padding:15px;

margin-bottom:18px;

border:2px solid #ddd;

border-radius:12px;

font-size:16px;

outline:none;

transition:.3s;

}

#commentForm input:focus,
#commentForm textarea:focus{

border-color:#8B0000;

}

#commentForm textarea{

height:160px;

resize:vertical;

}

#commentForm button{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:#8B0000;

color:#fff;

font-size:18px;

font-weight:700;

}

.comments-box{

margin-top:30px;

background:#fff;

padding:20px;

border-radius:20px;

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

}

#comments{

max-height:500px;

overflow-y:auto;

}

/* FOOTER */

.footer{

background:#181818;

color:#fff;

padding:50px 20px 30px;

margin-top:70px;

text-align:center;

}

.footer-logo img{

width:90px;

height:90px;

margin:0 auto 15px;

border-radius:50%;

}

.footer-logo h3{

font-size:28px;

margin-bottom:8px;

}

.footer-links{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin:25px 0;

}

.footer-links a{

color:#fff;

font-weight:600;

}

.footer-social{

display:flex;

justify-content:center;

gap:20px;

margin:20px 0;

}

.footer-social img{

width:42px;

height:42px;

}

.footer-copy{

margin-top:20px;

font-size:14px;

color:#ccc;

line-height:2;

}

@media(max-width:768px){

#commentForm{

padding:20px;

}

.footer-links{

flex-direction:column;

gap:12px;

}

.footer-logo h3{

font-size:22px;

}

}
/* =========================================================
   PART 10 / 10
   DARK MODE + MOBILE + BACK TO TOP
========================================================= */

/* DARK MODE */

body.dark-mode{

background:#121212;

color:#eee;

}

body.dark-mode .topbar{

background:#181818;

}

body.dark-mode .sidebar{

background:linear-gradient(180deg,#111,#1a1a1a,#000);

}

body.dark-mode .welcome,
body.dark-mode .about-preview,
body.dark-mode .stats-card,
body.dark-mode .office-card,
body.dark-mode .info-card,
body.dark-mode #commentForm,
body.dark-mode .comments-box,
body.dark-mode .greeting-box,
body.dark-mode .datetime-box{

background:#1f1f1f;

color:#fff;

}

body.dark-mode .footer{

background:#0d0d0d;

}

body.dark-mode p,
body.dark-mode li{

color:#ddd;

}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3{

color:#fff;

}

/* BACK TO TOP */

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#8B0000;

color:#fff;

font-size:22px;

cursor:pointer;

display:none;

z-index:9999;

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

transition:.3s;

}

#topBtn:hover{

background:#a50000;

transform:scale(1.08);

}

/* LOADER */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

}

.loader-box{

text-align:center;

}

.loader-logo{

width:100px;

height:100px;

border-radius:50%;

}

.loader-bar{

width:250px;

height:8px;

margin:20px auto;

background:#ddd;

border-radius:20px;

overflow:hidden;

}

#loaderFill{

height:100%;

width:100%;

background:#8B0000;

}

/* MOBILE */

@media(max-width:768px){

.content{

padding:15px;

}

.section-title{

font-size:28px;

}

.btn,
.read-btn{

width:100%;

}

#topBtn{

width:48px;

height:48px;

font-size:18px;

right:15px;

bottom:15px;

}

}
/* =========================================================
PART 1 / ABOUT PAGE
========================================================= */

.page-banner{

background:linear-gradient(135deg,#8B0000,#b00000);

padding:70px 20px;

text-align:center;

color:#fff;

border-radius:0 0 25px 25px;

}

.page-banner h1{

font-size:52px;

font-weight:800;

margin-bottom:15px;

}

.page-banner p{

font-size:24px;

opacity:.95;

}

.about-section{

max-width:1200px;

margin:40px auto;

background:#fff;

padding:40px;

border-radius:20px;

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

}

.about-section h2{

font-size:36px;

color:#8B0000;

margin-bottom:25px;

padding-bottom:10px;

border-bottom:3px solid #8B0000;

}

.about-section p{

font-size:20px;

line-height:2;

text-align:justify;

margin-bottom:20px;

}

.about-section ul{

padding-left:25px;

}

.about-section li{

font-size:19px;

margin-bottom:14px;

line-height:1.8;

}

@media(max-width:768px){

.page-banner{

padding:50px 15px;

}

.page-banner h1{

font-size:34px;

}

.page-banner p{

font-size:18px;

}

.about-section{

margin:20px 10px;

padding:22px;

}

.about-section h2{

font-size:26px;

}

.about-section p{

font-size:17px;

}

.about-section li{

font-size:16px;

}

}
/* =========================================================
PART 2 / MEMBERS PAGE
========================================================= */

.member-search-card{

max-width:900px;

margin:35px auto;

background:#fff;

padding:30px;

border-radius:20px;

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

text-align:center;

}

.member-search-card h2{

font-size:34px;

color:#8B0000;

margin-bottom:12px;

}

.member-search-card p{

font-size:18px;

color:#666;

margin-bottom:20px;

}

#memberSearch{

width:100%;

max-width:600px;

padding:15px 20px;

border:2px solid #8B0000;

border-radius:50px;

font-size:17px;

outline:none;

}

.executive-section,
.all-members-section{

max-width:1200px;

margin:40px auto;

background:#fff;

padding:30px;

border-radius:20px;

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

}

.executive-section h2,
.all-members-section h2{

text-align:center;

font-size:34px;

color:#8B0000;

margin-bottom:25px;

}

.member-scroll-box,
.executive-list{

max-height:520px;

overflow-y:auto;

}

.member-row{

display:flex;

align-items:center;

gap:15px;

padding:15px;

border-bottom:1px solid #eee;

}

.member-row:hover{

background:#fafafa;

}

.serial{

width:45px;

font-size:18px;

font-weight:700;

color:#8B0000;

text-align:center;

}

.member-photo-small{

width:65px;

height:65px;

border-radius:50%;

border:3px solid #8B0000;

object-fit:cover;

}

.member-details{

flex:1;

}

.member-details h3{

font-size:22px;

margin-bottom:6px;

}

.phone-row,
.blood-row{

font-size:16px;

}

@media(max-width:768px){

.member-search-card,
.executive-section,
.all-members-section{

margin:20px 10px;

padding:20px;

}

.member-row{

gap:10px;

padding:10px;

}

.serial{

width:30px;

font-size:14px;

}

.member-photo-small{

width:50px;

height:50px;

}

.member-details h3{

font-size:16px;

}

.phone-row,
.blood-row{

font-size:13px;

}

}
/* =========================================================
PART 3 / NOTICES PAGE
========================================================= */

.public-notice-section{

max-width:1100px;

margin:40px auto;

padding:20px;

}

#publicNoticeList{

display:flex;

flex-direction:column;

gap:20px;

}

.public-notice-card{

background:#fff;

padding:25px;

border-radius:18px;

border-left:6px solid #8B0000;

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

transition:.3s;

}

.public-notice-card:hover{

transform:translateY(-5px);

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

}

.notice-date{

display:inline-block;

padding:7px 14px;

background:#8B0000;

color:#fff;

border-radius:30px;

font-size:14px;

font-weight:700;

margin-bottom:15px;

}

.public-notice-card h3{

font-size:28px;

color:#8B0000;

margin-bottom:15px;

line-height:1.5;

}

.public-notice-card p{

font-size:18px;

line-height:1.9;

color:#444;

white-space:pre-line;

}

.public-notice-empty,
.notice-loading{

background:#fff;

padding:40px;

text-align:center;

border-radius:18px;

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

font-size:18px;

}

@media(max-width:768px){

.public-notice-section{

padding:10px;

}

.public-notice-card{

padding:18px;

}

.public-notice-card h3{

font-size:21px;

}

.public-notice-card p{

font-size:16px;

}

.notice-date{

font-size:12px;

padding:6px 12px;

}

}
/* =========================================================
PART 4 / EVENTS PAGE
========================================================= */

.public-events-section{

max-width:1200px;

margin:40px auto;

padding:20px;

}

.public-events-main-title{

text-align:center;

margin-bottom:35px;

}

.public-events-main-title h1{

font-size:40px;

color:#8B0000;

font-weight:800;

}

.public-event-card{

background:#fff;

padding:30px;

margin-bottom:35px;

border-radius:20px;

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

}

.public-event-name{

text-align:center;

font-size:32px;

font-weight:800;

color:#8B0000;

margin-bottom:25px;

}

.public-event-banner-box{

width:100%;

max-width:850px;

height:420px;

margin:0 auto 25px;

border-radius:18px;

overflow:hidden;

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

}

.public-event-banner-box img{

width:100%;

height:100%;

object-fit:cover;

}

.public-event-date-time{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

flex-wrap:wrap;

background:#fff5f5;

padding:15px;

border-radius:12px;

margin-bottom:18px;

font-size:17px;

font-weight:700;

}

.public-event-place{

background:#f7f7f7;

padding:15px;

border-radius:12px;

text-align:center;

margin-bottom:20px;

font-size:17px;

}

.public-event-description{

background:#fff;

border-left:6px solid #8B0000;

padding:25px;

border-radius:15px;

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

}

.public-event-description h3{

font-size:24px;

color:#8B0000;

margin-bottom:15px;

}

.public-event-description li{

font-size:18px;

line-height:1.9;

margin-bottom:10px;

}

.public-event-empty,
.event-loading{

background:#fff;

padding:40px;

border-radius:18px;

text-align:center;

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

}

@media(max-width:768px){

.public-events-section{

padding:10px;

}

.public-events-main-title h1{

font-size:28px;

}

.public-event-card{

padding:20px;

}

.public-event-name{

font-size:24px;

}

.public-event-banner-box{

height:220px;

}

.public-event-date-time{

font-size:14px;

gap:10px;

}

.public-event-place{

font-size:15px;

}

.public-event-description{

padding:18px;

}

.public-event-description h3{

font-size:20px;

}

.public-event-description li{

font-size:16px;

}

}
/* =========================================================
PART 5 / GALLERY PAGE
========================================================= */

.gallery-main-title{

text-align:center;

margin:40px 0 30px;

}

.gallery-main-title h1{

font-size:42px;

font-weight:800;

color:#8B0000;

}

.gallery-groups-page{

max-width:1200px;

margin:0 auto;

padding:20px;

}

.public-gallery-group{

background:#fff;

padding:30px;

margin-bottom:35px;

border-radius:20px;

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

}

.gallery-group-header{

text-align:center;

margin-bottom:25px;

}

.gallery-group-header h2{

font-size:30px;

color:#8B0000;

margin-bottom:10px;

}

.gallery-group-header p{

font-size:18px;

color:#555;

line-height:1.8;

max-width:900px;

margin:auto;

}

.public-gallery-photo-grid{

display:grid;

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

gap:15px;

}

.public-gallery-photo-btn{

display:block;

overflow:hidden;

border-radius:15px;

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

transition:.3s;

}

.public-gallery-photo-btn:hover{

transform:translateY(-5px);

}

.public-gallery-photo-btn img{

width:100%;

height:220px;

object-fit:cover;

transition:.4s;

}

.public-gallery-photo-btn:hover img{

transform:scale(1.08);

}

.gallery-lightbox{

position:fixed;

inset:0;

display:none;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.9);

z-index:99999;

}

.gallery-lightbox.show{

display:flex;

}

.gallery-lightbox img{

max-width:95%;

max-height:90vh;

border-radius:12px;

}

.gallery-lightbox-close{

position:absolute;

top:20px;

right:20px;

width:45px;

height:45px;

border:none;

border-radius:50%;

background:#8B0000;

color:#fff;

font-size:28px;

cursor:pointer;

}

@media(max-width:768px){

.gallery-main-title h1{

font-size:30px;

}

.gallery-groups-page{

padding:10px;

}

.public-gallery-group{

padding:20px;

}

.gallery-group-header h2{

font-size:22px;

}

.gallery-group-header p{

font-size:15px;

}

.public-gallery-photo-grid{

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

gap:10px;

}

.public-gallery-photo-btn img{

height:140px;

}

}
/* =========================================================
PART 6 / CONTACT PAGE
========================================================= */

.contact-page-section{

max-width:1200px;

margin:40px auto;

padding:20px;

}

.contact-page-heading{

text-align:center;

margin-bottom:35px;

}

.contact-page-heading h1{

font-size:40px;

font-weight:800;

color:#8B0000;

margin-bottom:10px;

}

.contact-page-heading p{

font-size:18px;

color:#555;

max-width:800px;

margin:auto;

line-height:1.8;

}

.contact-info-grid{

display:grid;

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

gap:25px;

}

.contact-info-card{

background:#fff;

padding:30px 25px;

border-radius:20px;

text-align:center;

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

transition:.3s;

border-top:5px solid #8B0000;

}

.contact-info-card:hover{

transform:translateY(-6px);

}

.contact-info-icon{

font-size:45px;

margin-bottom:15px;

}

.contact-info-card h3{

font-size:24px;

color:#8B0000;

margin-bottom:15px;

}

.contact-info-card p{

font-size:18px;

line-height:1.8;

color:#444;

}

.contact-info-card a{

color:#8B0000;

font-weight:700;

}

.contact-map-btn,
.contact-facebook-btn{

display:inline-flex;

align-items:center;

justify-content:center;

margin-top:15px;

padding:12px 24px;

background:#8B0000;

color:#fff !important;

border-radius:40px;

font-weight:700;

}

.contact-map-btn:hover,
.contact-facebook-btn:hover{

background:#a50000;

}

@media(max-width:768px){

.contact-page-section{

padding:10px;

}

.contact-page-heading h1{

font-size:30px;

}

.contact-page-heading p{

font-size:16px;

}

.contact-info-grid{

grid-template-columns:1fr;

gap:15px;

}

.contact-info-card{

padding:22px 18px;

}

.contact-info-card h3{

font-size:20px;

}

.contact-info-card p{

font-size:16px;

}

}
/* =========================================================
PART 7 / COMMON PAGE FIX
========================================================= */

.page-container,
.about-section,
.member-section,
.public-events-section,
.public-notice-section,
.gallery-groups-page,
.contact-page-section{

max-width:1200px;

margin:40px auto;

padding:20px;

}

.page-card{

background:#fff;

border-radius:20px;

padding:30px;

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

margin-bottom:30px;

}

.page-title{

text-align:center;

font-size:40px;

font-weight:800;

color:#8B0000;

margin-bottom:30px;

}

.page-subtitle{

text-align:center;

font-size:18px;

color:#666;

margin-bottom:30px;

line-height:1.8;

}

.page-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 30px;

background:#8B0000;

color:#fff;

border-radius:40px;

font-weight:700;

transition:.3s;

}

.page-btn:hover{

background:#a50000;

transform:translateY(-3px);

}

.page-center{

text-align:center;

}

.page-shadow{

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

}

.page-radius{

border-radius:20px;

}

@media(max-width:768px){

.page-container,
.about-section,
.member-section,
.public-events-section,
.public-notice-section,
.gallery-groups-page,
.contact-page-section{

margin:20px auto;

padding:10px;

}

.page-card{

padding:20px;

border-radius:15px;

}

.page-title{

font-size:28px;

}

.page-subtitle{

font-size:16px;

}

.page-btn{

width:100%;

}

}
/* =========================================================
PART 8 / DARK MODE (ALL PAGES)
========================================================= */

body.dark-mode{

background:#121212;

color:#eee;

}

body.dark-mode .topbar{

background:#181818;

}

body.dark-mode .sidebar{

background:linear-gradient(180deg,#111,#1b1b1b,#000);

}

body.dark-mode .page-banner{

background:linear-gradient(135deg,#600000,#8B0000);

}

body.dark-mode .welcome,
body.dark-mode .about-preview,
body.dark-mode .about-section,
body.dark-mode .member-search-card,
body.dark-mode .executive-section,
body.dark-mode .all-members-section,
body.dark-mode .public-notice-card,
body.dark-mode .public-event-card,
body.dark-mode .public-gallery-group,
body.dark-mode .contact-info-card,
body.dark-mode .stats-card,
body.dark-mode .office-card,
body.dark-mode .info-card,
body.dark-mode #commentForm,
body.dark-mode .comments-box,
body.dark-mode .page-card{

background:#1f1f1f;

color:#fff;

}

body.dark-mode p,
body.dark-mode li,
body.dark-mode span{

color:#ddd;

}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3{

color:#fff;

}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{

background:#2a2a2a;

color:#fff;

border-color:#555;

}

body.dark-mode .footer{

background:#0d0d0d;

}

body.dark-mode a{

color:#ffd76d;

}
/* =========================================================
PART 9 / FINAL RESPONSIVE FIX (ALL PAGES)
========================================================= */

@media (max-width:768px){

.content{

padding:15px;

}

section{

margin:35px 0;

}

.section-title{

font-size:28px;

margin-bottom:20px;

}

.hero{

grid-template-columns:1fr;

gap:25px;

}

.hero-text{

text-align:center;

}

.hero-text h1{

font-size:36px;

}

.hero-text h2{

font-size:22px;

}

.hero-text p{

font-size:17px;

}

.hero-buttons{

justify-content:center;

}

.hero-buttons .btn,
.read-btn{

width:100%;

max-width:260px;

}

.hero-video video{

height:280px;

}

.live-info{

grid-template-columns:1fr;

}

.stats-grid{

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

gap:12px;

}

.office-grid{

grid-template-columns:1fr;

gap:20px;

}

.footer-links{

flex-direction:column;

gap:10px;

}

.footer-social{

justify-content:center;

}

.contact-info-grid{

grid-template-columns:1fr;

}

.public-gallery-photo-grid{

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

}

.public-event-date-time{

flex-direction:column;

gap:10px;

}

}
/* =========================================================
PART 10 / FINAL FIX
========================================================= */

/* LOADER */

#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.5s;

}

.loader-box{

text-align:center;

}

.loader-logo{

width:100px;

height:100px;

border-radius:50%;

}

.loader-bar{

width:250px;

height:8px;

background:#ddd;

border-radius:20px;

overflow:hidden;

margin:20px auto;

}

#loaderFill{

height:100%;

background:#8B0000;

animation:loaderFill 2.5s linear forwards;

}

@keyframes loaderFill{

from{width:0;}

to{width:100%;}

}

/* BACK TO TOP */

#topBtn{

position:fixed;

right:20px;

bottom:20px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:#8B0000;

color:#fff;

font-size:20px;

cursor:pointer;

display:none;

z-index:9999;

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

transition:.3s;

}

#topBtn:hover{

background:#a50000;

transform:scale(1.08);

}

/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:#8B0000;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#a50000;

}

/* SELECTION */

::selection{

background:#8B0000;

color:#fff;

}

/* IMAGE */

img{

user-select:none;

-webkit-user-drag:none;

}

/* VIDEO */

video{

display:block;

max-width:100%;

}

/* END */
/* =========================================================
PART 11 / ANIMATION + UTILITIES + FINAL POLISH
========================================================= */

/* CARD */

.card{

background:#fff;

border-radius:20px;

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

transition:.35s;

}

.card:hover{

transform:translateY(-6px);

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

}

/* IMAGE HOVER */

.zoom-img{

overflow:hidden;

border-radius:18px;

}

.zoom-img img{

transition:.4s;

}

.zoom-img:hover img{

transform:scale(1.08);

}

/* FADE */

.fade{

animation:fade .6s ease;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* FLEX */

.flex{

display:flex;

}

.flex-center{

display:flex;

align-items:center;

justify-content:center;

}

.space-between{

display:flex;

justify-content:space-between;

align-items:center;

}

/* GRID */

.grid-2{

display:grid;

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

gap:20px;

}

.grid-3{

display:grid;

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

gap:20px;

}

.grid-4{

display:grid;

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

gap:20px;

}

/* GAP */

.gap10{

gap:10px;

}

.gap20{

gap:20px;

}

.gap30{

gap:30px;

}

/* MARGIN */

.mt20{

margin-top:20px;

}

.mt30{

margin-top:30px;

}

.mt40{

margin-top:40px;

}

.mb20{

margin-bottom:20px;

}

.mb30{

margin-bottom:30px;

}

.mb40{

margin-bottom:40px;

}

/* TEXT */

.text-center{

text-align:center;

}

.text-right{

text-align:right;

}

.text-left{

text-align:left;

}

/* END */
/* =========================================================
PART 12 / FINAL UTILITIES
========================================================= */

/* CONTAINER */

.container{

width:100%;

max-width:1200px;

margin:auto;

padding:0 20px;

}

/* BORDER */

.round{

border-radius:20px;

}

.round-sm{

border-radius:10px;

}

.shadow{

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

}

/* BACKGROUND */

.bg-white{

background:#fff;

}

.bg-light{

background:#f8f8f8;

}

.bg-primary{

background:#8B0000;

color:#fff;

}

/* WIDTH */

.w100{

width:100%;

}

.w50{

width:50%;

}

/* DISPLAY */

.hide{

display:none!important;

}

.show{

display:block!important;

}

/* PADDING */

.p10{

padding:10px;

}

.p20{

padding:20px;

}

.p30{

padding:30px;

}

/* BORDER */

.border{

border:1px solid #ddd;

}

.border-top{

border-top:1px solid #ddd;

}

.border-bottom{

border-bottom:1px solid #ddd;

}

/* FONT */

.bold{

font-weight:700;

}

.semibold{

font-weight:600;

}

.primary{

color:#8B0000;

}

.secondary{

color:#666;

}

/* ALIGN */

.center{

text-align:center;

}

.left{

text-align:left;

}

.right{

text-align:right;

}

/* CURSOR */

.pointer{

cursor:pointer;

}

/* TRANSITION */

.transition{

transition:.3s;

}
/* =========================================================
PART 13 / TABLE + FORM + MODAL
========================================================= */

/* TABLE */

.table-wrap{

overflow-x:auto;

border-radius:18px;

background:#fff;

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

}

table{

width:100%;

border-collapse:collapse;

}

table th{

background:#8B0000;

color:#fff;

padding:16px;

font-size:17px;

text-align:center;

}

table td{

padding:14px;

border-bottom:1px solid #eee;

text-align:center;

font-size:16px;

}

table tr:hover{

background:#fafafa;

}

/* FORM */

.form-group{

margin-bottom:20px;

}

.form-group label{

display:block;

font-weight:700;

margin-bottom:8px;

color:#333;

}

.form-group input,
.form-group textarea,
.form-group select{

width:100%;

padding:14px 16px;

border:2px solid #ddd;

border-radius:12px;

font-size:16px;

outline:none;

transition:.3s;

}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{

border-color:#8B0000;

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

}

/* MODAL */

.modal{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

display:none;

justify-content:center;

align-items:center;

background:rgba(0,0,0,.65);

z-index:99999;

}

.modal.show{

display:flex;

}

.modal-content{

width:95%;

max-width:650px;

background:#fff;

border-radius:20px;

padding:30px;

position:relative;

box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.modal-close{

position:absolute;

top:15px;

right:18px;

font-size:30px;

cursor:pointer;

color:#8B0000;

}

@media(max-width:768px){

table th,
table td{

padding:10px;

font-size:13px;

}

.modal-content{

padding:20px;

}

}
/* =========================================================
PART 14 / MEMBER CARD + GALLERY CARD + NOTICE BADGE
========================================================= */

/* MEMBER CARD */

.member-card{

background:#fff;

border-radius:20px;

padding:25px;

text-align:center;

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

transition:.35s;

}

.member-card:hover{

transform:translateY(-8px);

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

}

.member-card img{

width:140px;

height:140px;

margin:0 auto 18px;

border-radius:50%;

object-fit:cover;

border:5px solid #8B0000;

}

.member-card h3{

font-size:24px;

margin-bottom:8px;

color:#222;

}

.member-card p{

font-size:16px;

color:#666;

}

/* GALLERY CARD */

.gallery-card{

overflow:hidden;

border-radius:18px;

background:#fff;

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

}

.gallery-card img{

width:100%;

height:250px;

object-fit:cover;

transition:.4s;

}

.gallery-card:hover img{

transform:scale(1.08);

}

/* NOTICE BADGE */

.notice-badge{

display:inline-block;

padding:8px 16px;

background:#8B0000;

color:#fff;

font-size:13px;

font-weight:700;

border-radius:30px;

margin-bottom:15px;

text-transform:uppercase;

letter-spacing:1px;

}

@media(max-width:768px){

.member-card{

padding:18px;

}

.member-card img{

width:90px;

height:90px;

}

.member-card h3{

font-size:18px;

}

.gallery-card img{

height:160px;

}

}
/* =========================================================
PART 15 / FINAL PREMIUM FIX
========================================================= */

/* SECTION SPACING */

section{

padding:20px 0;

}

/* TITLE */

.section-title{

position:relative;

display:inline-block;

padding-bottom:12px;

}

.section-title::after{

content:"";

position:absolute;

left:50%;

bottom:0;

transform:translateX(-50%);

width:90px;

height:4px;

background:#8B0000;

border-radius:10px;

}

/* CARD */

.white-box{

background:#fff;

border-radius:20px;

padding:30px;

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

}

/* IMAGE */

.image-radius{

border-radius:18px;

overflow:hidden;

}

.image-radius img{

width:100%;

display:block;

object-fit:cover;

}

/* BUTTON */

.btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 32px;

background:#8B0000;

color:#fff;

font-weight:700;

border-radius:40px;

transition:.3s;

}

.btn-primary:hover{

background:#a60000;

}

/* FOOTER */

.footer{

margin-top:70px;

}

/* MOBILE */

@media(max-width:768px){

.white-box{

padding:20px;

}

.section-title{

font-size:28px;

}

.btn-primary{

width:100%;

}

}

/* =========================================================
PART 16 / FINAL GLOBAL FIX
========================================================= */

/* BODY */

body{

overflow-x:hidden;

background:#f5f5f5;

}

/* PAGE */

main{

width:100%;

min-height:100vh;

}

/* ALL PAGE CONTAINER */

.container,
.page-container,
.content{

width:min(1200px,95%);

margin:auto;

}

/* BOX */

.box{

background:#fff;

border-radius:20px;

padding:30px;

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

margin-bottom:25px;

}

/* TITLE */

.title{

font-size:40px;

font-weight:800;

color:#8B0000;

text-align:center;

margin-bottom:15px;

}

.subtitle{

font-size:18px;

text-align:center;

color:#666;

margin-bottom:35px;

line-height:1.8;

}

/* LINK */

a{

transition:.3s;

}

a:hover{

color:#8B0000;

}

/* INPUT */

input,
textarea,
select{

font-family:inherit;

}

/* BUTTON */

button{

font-family:inherit;

border:none;

outline:none;

}

/* HR */

hr{

border:none;

height:1px;

background:#e5e5e5;

margin:30px 0;

}

/* MOBILE */

@media(max-width:768px){

.box{

padding:20px;

}

.title{

font-size:28px;

}

.subtitle{

font-size:16px;

}

}
/* =========================================================
PART 17 / FINAL CSS RESET & COMMON FIX
========================================================= */

/* IMAGE */

img{

max-width:100%;

height:auto;

display:block;

}

/* VIDEO */

video{

max-width:100%;

display:block;

}

/* IFRAME */

iframe{

width:100%;

border:none;

}

/* TABLE */

table{

width:100%;

border-collapse:collapse;

}

/* LIST */

ul,
ol{

padding-left:22px;

}

li{

line-height:1.8;

}

/* HEADING */

h1,h2,h3,h4,h5,h6{

font-weight:700;

line-height:1.4;

margin-bottom:12px;

}

/* PARAGRAPH */

p{

line-height:1.8;

margin-bottom:15px;

}

/* FORM */

input,
textarea,
select{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:10px;

background:#fff;

}

/* BUTTON */

button{

padding:12px 24px;

border-radius:10px;

transition:.3s;

}

button:hover{

opacity:.92;

}

/* CARD */

.card{

border-radius:20px;

overflow:hidden;

}

/* RESPONSIVE */

@media(max-width:768px){

h1{

font-size:30px;

}

h2{

font-size:26px;

}

h3{

font-size:22px;

}

p{

font-size:16px;

}

}
/* =========================================================
PART 18 / FINAL BUG FIX
========================================================= */

/* FIX IMAGE */

.logo,
.sidebar-logo,
.footer-logo img,
.office-card img,
.member-card img{

display:block;

margin:auto;

object-fit:cover;

}

/* FIX GRID */

.grid{

display:grid;

gap:20px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

/* FIX FLEX */

.flex{

display:flex;

align-items:center;

}

.flex-center{

display:flex;

justify-content:center;

align-items:center;

}

.flex-between{

display:flex;

justify-content:space-between;

align-items:center;

}

/* FIX OVERFLOW */

.box,
.card,
.white-box{

overflow:hidden;

}

/* FIX BUTTON */

.btn{

cursor:pointer;

user-select:none;

}

/* FIX LINK */

a{

text-decoration:none;

}

/* FIX SCROLL */

html{

scroll-behavior:smooth;

}

/* MOBILE */

@media(max-width:768px){

.grid-2,
.grid-3,
.grid-4{

grid-template-columns:1fr;

}

.flex-between{

flex-direction:column;

gap:15px;

}

}
/* =========================================================
PART 19 / PERFORMANCE + FINAL RESPONSIVE FIX
========================================================= */

/* PERFORMANCE */

*,
*::before,
*::after{

box-sizing:border-box;

}

/* IMAGE */

img{

image-rendering:auto;

vertical-align:middle;

}

/* VIDEO */

video{

object-fit:cover;

}

/* SVG */

svg{

display:block;

}

/* ICON */

.icon{

display:inline-flex;

align-items:center;

justify-content:center;

}

/* WRAP */

.text-wrap{

word-wrap:break-word;

overflow-wrap:break-word;

}

/* HIDE */

.hidden{

display:none!important;

}

.visible{

display:block!important;

}

/* WIDTH */

.full-width{

width:100%;

}

.max-width{

max-width:1200px;

margin:auto;

}

/* MOBILE FIX */

@media(max-width:992px){

.grid-4{

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

}

.office-grid{

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

}

}

@media(max-width:768px){

.grid-4,
.grid-3,
.grid-2{

grid-template-columns:1fr;

}

.office-grid{

grid-template-columns:1fr;

}

.stats-grid{

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

}

.hero{

grid-template-columns:1fr;

}

}
/* =========================================================
PART 20 / FINAL MASTER FIX
========================================================= */

/* ROOT */

:root{

--primary:#8B0000;
--primary-hover:#a50000;
--white:#ffffff;
--black:#222222;
--text:#555555;
--bg:#f5f5f5;
--shadow:0 10px 30px rgba(0,0,0,.08);
--radius:20px;

}

/* BODY */

body{

background:var(--bg);

color:var(--black);

font-family:Arial,Helvetica,sans-serif;

}

/* COMMON */

.container,
.content,
.page-container{

max-width:1200px;

width:95%;

margin:auto;

}

/* CARD */

.card,
.box,
.white-box{

background:var(--white);

border-radius:var(--radius);

box-shadow:var(--shadow);

}

/* BUTTON */

.btn,
.read-btn,
.page-btn,
.btn-primary{

background:var(--primary);

color:#fff;

transition:.3s;

}

.btn:hover,
.read-btn:hover,
.page-btn:hover,
.btn-primary:hover{

background:var(--primary-hover);

}

/* TITLE */

.section-title,
.page-title,
.title{

color:var(--primary);

font-weight:800;

}

/* FOOTER */

.footer{

margin-top:80px;

}

/* RESPONSIVE */

@media(max-width:1200px){

.container,
.content,
.page-container{

width:96%;

}

}

@media(max-width:992px){

.grid-4{

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

}

.stats-grid{

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

}

}

@media(max-width:768px){

.container,
.content,
.page-container{

width:94%;

}

.hero,
.contact-info-grid,
.live-info{

grid-template-columns:1fr;

}

.office-grid{

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

}

.public-gallery-photo-grid{

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

}

}

@media(max-width:480px){

.office-grid{

grid-template-columns:1fr;

}

.stats-grid{

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

}

.section-title,
.page-title,
.title{

font-size:26px;

}

}
/* ==========================================
OFFICE + STATISTICS
PC & MOBILE SAME LINE
========================================== */

.stats-grid{
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:15px !important;
}

.office-grid{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:15px !important;
justify-content:center !important;
align-items:start !important;
}

.stats-card,
.office-card{
width:100% !important;
margin:0 !important;
}

.office-card img{
width:120px !important;
height:120px !important;
margin:0 auto 15px !important;
}

.office-card h3{
font-size:22px !important;
line-height:1.3 !important;
}

.designation{
font-size:14px !important;
padding:8px 18px !important;
}

@media(max-width:768px){

.stats-grid{
grid-template-columns:repeat(4,1fr) !important;
gap:8px !important;
}

.office-grid{
grid-template-columns:repeat(3,1fr) !important;
gap:8px !important;
}

.stats-card{
padding:10px 5px !important;
}

.stats-card .stats-icon{
font-size:22px !important;
}

.stats-card h3{
font-size:20px !important;
}

.stats-card p{
font-size:11px !important;
}

.office-card{
padding:10px 5px !important;
}

.office-card img{
width:65px !important;
height:65px !important;
border-width:3px !important;
}

.office-card h3{
font-size:12px !important;
margin-bottom:6px !important;
}

.designation{
font-size:9px !important;
padding:4px 8px !important;
}

}
/* ==============================
MENU BUTTON FIX
============================== */

.menu-toggle,
.menu-btn,
.hamburger{

width:50px !important;

height:50px !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

padding:0 !important;

margin:0 !important;

border-radius:12px !important;

background:rgba(255,255,255,.12) !important;

}

.menu-toggle i,
.menu-btn i,
.hamburger i{

font-size:28px !important;

line-height:1 !important;

margin:0 !important;

padding:0 !important;

}

@media(max-width:768px){

.menu-toggle,
.menu-btn,
.hamburger{

width:48px !important;

height:48px !important;

}

}
/* ==============================
BACK TO TOP BUTTON FIX
============================== */

#topBtn{

position:fixed !important;

right:18px !important;

bottom:18px !important;

width:55px !important;

height:55px !important;

display:flex !important;

align-items:center !important;

justify-content:center !important;

padding:0 !important;

margin:0 !important;

border-radius:50% !important;

font-size:22px !important;

line-height:1 !important;

background:#8B0000 !important;

color:#fff !important;

z-index:999999 !important;

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

}

#topBtn i{

margin:0 !important;

padding:0 !important;

line-height:1 !important;

}

@media(max-width:768px){

#topBtn{

width:50px !important;

height:50px !important;

right:15px !important;

bottom:15px !important;

font-size:20px !important;

}

}
.loader-logo{

width:120px;

height:120px;

display:block;

margin:0 auto 20px;

border-radius:50%;

animation:logoRotate 2s linear infinite;

}

@keyframes logoRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}
#loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

display:flex;

justify-content:center;

align-items:center;

background:#fff;

z-index:999999;

}

.loader-box{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

width:100%;

}
.loader-bar{

width:300px;

height:10px;

background:#e0e0e0;

border-radius:50px;

overflow:hidden;

margin:20px auto;

position:relative;

}

#loaderFill{

display:block;

width:0%;

height:100%;

background:linear-gradient(90deg,#8B0000,#ff2d2d,#8B0000);

border-radius:50px;

animation:loaderProgress 2.2s linear forwards;

}

@keyframes loaderProgress{

0%{

width:0%;

}

100%{

width:100%;

}

}
/* ===== NOTICE → EVENT GAP = 0 ===== */

.notice-bar{
    margin:0 !important;
    padding:0 !important;
}

.home-event-countdown-bar{
    margin:0 !important;
    padding:12px 0 !important;
}

.notice-bar + .home-event-countdown-bar{
    margin-top:0 !important;
}

/* যদি মাঝখানে wrapper থাকে */
.notice-bar + div{
    margin:0 !important;
    padding:0 !important;
}

/* Hero এর আগে gap */
.home-event-countdown-bar + *{
    margin-top:0 !important;
}
/* ===================================
REMOVE GAP BETWEEN NOTICE & EVENT
=================================== */

.notice-bar{
    margin:0 !important;
    padding:0 !important;
}

.home-event-countdown-bar{
    margin:0 !important;
    padding:12px 0 !important;
}

.notice-bar + .home-event-countdown-bar{
    margin-top:0 !important;
}

/* শুধু এই দুই section-এর জন্য */
section.notice-bar,
section.home-event-countdown-bar{
    margin-top:0 !important;
    margin-bottom:0 !important;
}