html,
body{
margin:0;
padding:0;
overflow-x:hidden;
width:100%;
font-family:Arial,sans-serif;
}
.navbar{background:#0b2d5c !important;}
.hero{
background:url('/assets/images/school.jpg') center center/cover no-repeat;
min-height:550px;
position:relative;
border-radius:20px;
overflow:hidden;
}
.hero{
width:100%;
max-width:100%;
box-sizing:border-box;
}
.overlay{background:rgba(0,0,0,.55);padding:30px;border-radius:10px}
footer{background:#0b2d5c;color:#fff;padding:15px;text-align:center}
.hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,.55);
}
.hero-content{
position:relative;
z-index:2;
color:#fff;
text-align:center;
height:550px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.logo{
max-height:120px;
margin-bottom:20px;
}
.feature-card{
border:none;
box-shadow:0 3px 12px rgba(0,0,0,.08);
transition:.3s;
}
.feature-card:hover{
transform:translateY(-5px);
}
.stats-box{
background:#0b2d5c;
color:white;
border-radius:12px;
padding:20px;
height:100%;
min-height:220px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.stats-box p{
margin-bottom:0;
min-height:48px;
display:flex;
align-items:center;
justify-content:center;
white-space:nowrap;
}
footer{
background:#0b2d5c;
color:white;
padding:20px;
text-align:center;
}
.section-title{
display:inline-block;
background:linear-gradient(
135deg,
#0b2d5c,
#1e5db8
);
color:#fff;
padding:8px 18px;
border-radius:30px;
font-size:1.1rem;
font-weight:600;
margin-bottom:20px;
box-shadow:
0 0 10px rgba(30,93,184,.25);
}
.form-section{
background:#ffffff;
border:1px solid #dbe6f8;
border-radius:20px;
padding:25px;
margin-bottom:25px;
box-shadow:
0 3px 10px rgba(0,0,0,.04),
0 0 10px rgba(13,110,253,.05);
transition:all .3s ease;
}
.form-section:hover{
box-shadow:
0 5px 15px rgba(0,0,0,.08),
0 0 18px rgba(13,110,253,.08);
}
.registration-card{
background:#fff;
border-radius:25px;
padding:35px;
box-shadow:
0 10px 35px rgba(0,0,0,.08);
}
.regform{
text-align: center;
}
/* Mobile Optimization */
@media (max-width: 768px) {
.container{
padding-left:10px;
padding-right:10px;
}
.registration-card{
padding:15px !important;
border-radius:15px;
}
.form-section{
padding:15px !important;
margin-bottom:15px;
border-radius:12px;
}
.section-title{
font-size:1rem;
padding:10px 15px;
margin-bottom:15px;
}
.btn-lg{
width:100%;
margin-bottom:10px;
}
h1{
font-size:1.4rem;
}
h5{
font-size:0.95rem;
}
.alert{
padding:12px;
}
}
@media (max-width:768px){
.mobile-full-btn{
width:100%;
margin-bottom:10px;
}
}
.hero-btn{
width:auto;
min-width:240px;
padding:12px 30px;
border-radius:12px;
font-weight:600;
}
@media (max-width:768px){
.hero-btn{
width:auto !important;
min-width:220px;
display:inline-block;
}
}
@media (max-width: 576px) {
.container{
max-width:100%;
padding-left:5px;
padding-right:5px;
}
.registration-card{
padding:10px !important;
}
.form-section{
padding:12px !important;
}
}
.site-notice{
background:linear-gradient(
90deg,
#fff3cd,
#ffe8a1
);
color:#664d03;
text-align:center;
padding:12px;
font-size:.95rem;
border-bottom:1px solid #f5d77a;
box-shadow:0 2px 6px rgba(0,0,0,.05);
}
@media (max-width:768px){
.hero{
min-height:350px;
}
.hero-content{
height:350px;
}
.logo{
max-height:80px;
}
.hero h1{
font-size:1.8rem;
}
}
.registration-info-box{
background:linear-gradient(
135deg,
#e8f4ff,
#f8fbff
);
border:1px solid #b8d8ff;
border-radius:18px;
padding:18px 25px;
margin-bottom:25px;
text-align:center;
color:#0b2d5c;
box-shadow:
0 3px 12px rgba(13,110,253,.08);
}
.registration-info-box strong{
display:block;
font-size:1.1rem;
margin-bottom:8px;
}
.registration-info-box p{
margin:0;
line-height:1.6;
}
@media (max-width:768px){
.registration-info-box{
padding:12px 15px;
border-radius:12px;
font-size:.95rem;
}
}
.events-header{
background:
linear-gradient(
rgba(11,45,92,.85),
rgba(11,45,92,.85)
),
url('/assets/images/school.jpg');
background-size:cover;
background-position:center;
color:#fff;
padding:80px 20px;
border-radius:20px;
margin-bottom:40px;
}
.timeline-item{
border-left:4px solid #0b2d5c;
padding-left:20px;
margin-bottom:25px;
}
.event-gallery{
margin-bottom:40px;
}
.main-photo{
width:100%;
height:550px;
object-fit:cover;
border-radius:15px;
box-shadow:
0 5px 20px rgba(0,0,0,.15);
}
.thumbnail-strip{
margin-top:15px;
display:flex;
gap:10px;
overflow-x:auto;
padding-bottom:10px;
scrollbar-width:thin;
}
.gallery-thumb{
width:120px;
height:80px;
object-fit:cover;
border-radius:10px;
cursor:pointer;
border:3px solid transparent;
transition:.3s;
}
.gallery-thumb:hover{
transform:scale(1.05);
}
.active-thumb{
border:3px solid #0b2d5c;
}
@media(max-width:768px){
.main-photo{
height:250px;
}
.gallery-thumb{
width:90px;
height:60px;
}
}
.thumbnail-strip{
overflow-x:auto;
overflow-y:hidden;
scroll-behavior:smooth;
overscroll-behavior-x:contain;
}
.footer-connect{
background:linear-gradient(
135deg,
#0b2d5c,
#1d4f91
);
box-shadow:
0 3px 10px rgba(0,0,0,.15);
}
.footer-connect a{
font-weight:600;
transition:.3s;
}
.footer-connect a:hover, .quick1 a:hover{
color:#ffd24d !important;
text-decoration:none;
}
.footer-connect i, .quick1 i{
font-size:1.2rem;
margin-right:5px;
}
.tagline i{
color:#ffd24d;
margin-right:4px;
}
.pp1 i, .tos1 i{
color:#28a745;
}
.fb1{
color:#1877F2;
margin-right:6px;
transition:.3s;
}
.fb1:hover{
color:#5aa3ff;
transform:scale(1.15);
}
.stats-icon{
width:80px;
height:80px;
margin:0 auto 15px auto;
background-image:
url('/assets/images/alumni5.png');
background-repeat:no-repeat;
background-size:320px 80px;
}
.alumni-icon{
background-position:0 0;
}
.batches-icon{
background-position:-80px 0;
}
.events-icon{
background-position:-160px 0;
}
.pride-icon{
background-position:-240px 0;
}
.event-banner{
position:relative;
height:420px;
border-radius:20px;
overflow:hidden;
margin-bottom:30px;
box-shadow:
0 5px 20px rgba(0,0,0,.12);
}
.event-banner img{
width:100%;
height:100%;
display:block;
object-fit:cover;
border-radius:20px;
}
@media(max-width:768px){
.event-banner-mobile{
height:auto !important;
overflow:visible;
}
.event-banner-mobile img{
width:100%;
height:auto;
object-fit:unset;
border-radius:20px;
}
.event-banner-mobile .event-overlay{
display:none;
}
}
.event-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
rgba(0,0,0,.25),
rgba(0,0,0,.20)
);
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:30px;
color:#fff;
}
.event-overlay h1{
margin-top:15px;
font-weight:700;
}
.event-card,
.event-info-card{
background:#fff;
border-radius:16px;
padding:25px;
box-shadow:
0 4px 15px rgba(0,0,0,.08);
}
.event-card{
text-align: justify;
}
.gallery-thumb{
transition:.3s;
}
.gallery-thumb:hover{
transform:scale(1.04);
}
@media(max-width:768px){
.event-banner{
height:250px;
}
.event-overlay{
padding:15px;
}
.event-overlay h1{
font-size:1.5rem;
}
}
.event-gallery-grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(280px,1fr));
gap:15px;
margin-top:15px;
}
.event-gallery-item{
overflow:hidden;
border-radius:12px;
}
.event-gallery-photo{
width:100%;
height:220px;
object-fit:cover;
transition:.3s;
}
.event-gallery-photo:hover{
transform:scale(1.04);
}
@media(max-width:768px){
.event-gallery-grid{
grid-template-columns:1fr;
}
.event-gallery-photo{
height:250px;
}
}
.gallery-modal{
background:#111;
border:none;
}
#galleryModal .modal-body{
position:relative;
height:80vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
#galleryModalImage{
width:100%;
height:100%;
object-fit:contain;
object-position:center;
}
.gallery-nav{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(255,255,255,.2);
border:none;
color:#fff;
font-size:2rem;
width:50px;
height:50px;
border-radius:50%;
z-index:1000;
}
.gallery-prev{
left:15px;
}
.gallery-next{
right:15px;
}
.gallery-thumb-strip{
display:flex;
overflow-x:auto;
gap:8px;
padding:15px;
}
.gallery-thumb-strip img{
width:80px;
height:60px;
object-fit:cover;
border-radius:6px;
cursor:pointer;
border:2px solid transparent;
}
.gallery-thumb-strip img.active{
border-color:#ffc107;
}
.event-gallery-photo{
cursor:pointer;
}
@media(max-width:768px){
.gallery-thumb-strip img{
width:65px;
height:50px;
}
.gallery-nav{
width:40px;
height:40px;
font-size:1.5rem;
}
}
#galleryModal .modal-dialog{
max-width:90vw;
}
#galleryModal .modal-body{
position:relative;
padding:10px;
}
.gallery-nav{
position:absolute;
}
@media(max-width:768px){
#galleryModal .modal-body{
height:auto;
min-height:unset;
padding:10px;
}
#galleryModalImage{
width:100%;
height:auto;
max-height:60vh;
object-fit:contain;
}
.gallery-thumb-strip{
padding:10px 5px;
}
}
.gallery-title{
color:#fff;
font-weight:600;
line-height:1.4;
max-width:90%;
}
.gallery-title .event-name{
font-size:1rem;
}
.gallery-title .counter{
font-size:.85rem;
color:#bbb;
}
.visitor-widget{
background:linear-gradient(
135deg,
#173f73,
#0b2d5c
);
color:#fff;
padding:8px 15px;
border-radius:10px;
margin:10px 0;
font-size:.9rem;
line-height:1.4;
}
.visitor-title{
display:inline;
font-weight:600;
margin-right:10px;
}
.visitor-count{
display:inline;
color:#ffd24d;
font-weight:700;
margin-right:15px;
}
.visitor-countries{
display:inline;
}
.country-pill{
display:inline;
background:none;
padding:0;
margin-right:10px;
border-radius:0;
font-size:.85rem;
white-space:nowrap;
}
.committee-card{
border:none;
border-radius:15px;
transition:.3s;
}
.committee-card:hover{
transform:translateY(-5px);
}
.section-title{
text-align:center;
margin-bottom:25px;
/*color:#0b2d5c;*/
font-weight:700;
}
.committee-section-box{
background:#fff;
border:2px solid #dbe5f1;
border-radius:20px;
padding:25px;
margin-bottom:40px;
box-shadow:0 3px 15px rgba(0,0,0,.05);
}
.committee-group-title{
text-align:center;
color:#173f73;
font-size:1.5rem;
font-weight:700;
margin-bottom:25px;
border-bottom:1px solid #e5e5e5;
padding-bottom:10px;
}
.committee-sub-title{
text-align:center;
color:#0b2d5c;
font-size:1.15rem;
font-weight:600;
margin:20px 0;
}
.committee-sub-title{
background:#f8f9fa;
border-left:4px solid #173f73;
padding:10px 15px;
border-radius:8px;
margin:25px 0 20px 0;
font-size:1.15rem;
font-weight:600;
color:#173f73;
}
/* Expand icon */
td.dt-control {
cursor: pointer;
text-align: center;
width: 40px;
}
/* Collapsed */
td.dt-control::before {
content: "\f285"; /* bi-chevron-right */
font-family: bootstrap-icons;
font-size: 16px;
color: #0d6efd;
font-weight: bold;
}
/* Expanded */
tr.dt-hasChild td.dt-control::before {
content: "\f282"; /* bi-chevron-down */
}
/* Expanded card */
/* Prevent horizontal overflow inside expanded card */
/* -----------------------------
Desktop
------------------------------*/
@media (min-width:992px){
.member-card{
overflow:visible;
}
.member-card td{
white-space:nowrap;
}
.member-card .badge{
white-space:nowrap;
}
}
/* -----------------------------
Mobile
------------------------------*/
@media (max-width:991.98px){
.member-card{
width:100%;
overflow-wrap:anywhere;
}
.member-card td{
white-space:normal !important;
overflow-wrap:anywhere;
word-break:break-word;
}
.member-card .badge{
max-width:100%;
white-space:normal;
}
.member-card a{
word-break:break-all;
}
}
.member-card a{
word-break:break-all;
}
.member-card img{
width:120px;
height:120px;
object-fit:cover;
border-radius:50%;
border:3px solid #dee2e6;
}
.member-card th{
width:170px;
color:#6c757d;
font-weight:600;
}
.member-card td{
font-weight:500;
}
.member-subtitle{
color:#6c757d;
margin-bottom:15px;
}
@media(min-width:992px){
.member-subtitle div{
display:inline;
}
.member-subtitle div:first-child::after{
content:" | ";
}
}
@media(max-width:991px){
.member-card img{
width:90px;
height:90px;
margin-bottom:15px;
}
}
.member-card table{
width:100%;
}
@media(min-width:992px){
.member-card table{
table-layout:auto;
}
}
.member-card table th{
width:180px;
white-space:nowrap;
vertical-align:middle;
}
.member-card table td{
vertical-align:middle;
}
@media (max-width: 767.98px) {
.member-card table,
.member-card tbody,
.member-card tr,
.member-card th,
.member-card td {
display: block;
width: 100%;
}
.member-card tr {
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 1px solid #e9ecef;
}
.member-card th {
width: 100%;
font-weight: 600;
color: #6c757d;
margin-bottom: 3px;
border: none;
padding: 0;
}
.member-card td {
width: 100%;
border: none;
padding: 0;
}
}
/* Desktop */
@media (min-width:992px){
#membersTable{
table-layout: fixed;
}
}
/* Mobile */
@media (max-width:991.98px){
#membersTable{
table-layout: auto;
}
}
#membersTable th,
#membersTable td{
vertical-align:middle;
}
@media (min-width:992px){
#membersTable td:nth-child(2),
#membersTable th:nth-child(2){
white-space:nowrap;
}
#membersTable td:nth-child(3),
#membersTable th:nth-child(3){
white-space:nowrap;
}
}
.expand-col{
width:40px;
}
@media (max-width:991.98px){
.expand-col{
width:18px;
}
}
@media (min-width:992px){
#membersTable{
table-layout:auto !important;
}
#membersTable td,
#membersTable th{
white-space:nowrap;
}
}
@media (min-width:992px){
#membersTable td,
#membersTable th{
white-space:normal;
word-break:break-word;
}
/* Keep only these columns on one line */
#membersTable td:nth-child(2),
#membersTable th:nth-child(2),
#membersTable td:nth-child(3),
#membersTable th:nth-child(3),
#membersTable td:nth-child(6),
#membersTable th:nth-child(6){
white-space:nowrap;
}
}
/* Desktop */
.directory-footer{
display:flex;
justify-content:flex-end;
align-items:center;
gap:20px;
margin-top:15px;
}
.directory-footer .dt-info,
.directory-footer .dt-paging{
margin:0;
}
/* Mobile */
@media (max-width:767.98px){
.directory-footer{
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
text-align:center;
}
.directory-footer .dt-paging{
display:flex;
justify-content:center;
width:100%;
}
.directory-footer .pagination{
justify-content:center;
flex-wrap:wrap;
}
}
.gallery-photo{
width:100%;
height:220px;
object-fit:cover;
transition:.3s;
}
.gallery-photo:hover{
transform:scale(1.04);
}
@media (max-width:767px){
.gallery-photo{
height:120px;
}
}
/* ---------- Header Branding ---------- */
.site-brand{
display:flex;
align-items:center;
gap:15px;
text-decoration:none;
flex:1 1 auto;
width:auto;
min-width:0;
}
.brand-logo{
width:62px;
height:62px;
flex-shrink:0;
}
.brand-text{
flex:1;
min-width:0;
}
.brand-name{
color:#fff;
font-size:1.25rem;
font-weight:700;
line-height:1.15;
white-space:nowrap;
}
.brand-subtitle{
display:block;
color:#d8e7ff;
font-size:.78rem;
line-height:1.15;
margin-top:2px;
white-space:nowrap;
}
.brand-meta{
color:#ffd24d;
font-size:.78rem;
margin-top:2px;
font-weight:600;
}
@media (max-width:991.98px){
.navbar-brand{
max-width:calc(100% - 55px);
}
.brand-logo{
width:44px;
height:44px;
}
.brand-name{
font-size:.92rem;
line-height:1.15;
white-space:normal;
}
.brand-subtitle{
display:none;
}
.brand-meta{
display:none;
}
}
@media (max-width:575px){
.brand-meta{
display:none;
}
.brand-subtitle{
display:none;
}
.brand-name{
font-size:.90rem;
line-height:1.15;
white-space:normal;
max-width:170px;
}
.brand-logo{
width:42px;
height:42px;
}
.navbar-brand{
flex:1;
min-width:0;
}
}
.text-justify {
text-align: justify;
text-justify: inter-word;
/*line-height: 1.8;*/
}
/* Desktop - open dropdown on hover */
@media (min-width: 992px) {
.navbar .dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}
.navbar .dropdown:hover > .nav-link {
color: #fff;
}
.navbar .dropdown-menu {
margin-top: 0;
border-radius: .5rem;
border: 0;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
}
/* ---------- Scholarship Accordion ---------- */
#scholarshipAccordion .accordion-item{
border:0;
border-bottom:1px solid #dee2e6;
}
#scholarshipAccordion .accordion-button{
background:#fff;
color:#0d6efd;
font-weight:600;
font-size:1.05rem;
box-shadow:none;
padding:1rem 1.25rem;
}
#scholarshipAccordion .accordion-button:not(.collapsed){
background:#f8f9fa;
color:#0d6efd;
}
#scholarshipAccordion .accordion-button::after{
display:none;
}
#scholarshipAccordion .accordion-button::before{
content:"▶";
font-size:.85rem;
margin-right:12px;
transition:.25s;
color:#0d6efd;
}
#scholarshipAccordion .accordion-button:not(.collapsed)::before{
content:"▼";
}
#scholarshipAccordion .accordion-body{
background:#fafafa;
border-left:4px solid #0d6efd;
padding:1.25rem 1.5rem;
}
#scholarshipAccordion .accordion-button:hover{
background:#f5f8ff;
}
/* Hero Banner */
.scholarship-hero{
height:420px;
object-fit:cover;
}
blockquote{
font-style:italic;
}
@media(max-width:768px){
.position-absolute h2{
font-size:1.3rem;
}
}
@media (max-width:768px){
.hero-title{
font-size:2rem;
}
.hero-subtitle{
font-size:1.15rem;
}
}
/* Scholarship Hero */
.scholarship-hero{
width:100%;
height:420px;
object-fit:cover;
}
/* Tablet */
@media (max-width:992px){
.scholarship-hero{
height:320px;
}
}
/* Mobile */
@media (max-width:768px){
.scholarship-hero{
height:auto;
object-fit:contain;
}
}
@media(max-width:768px){
.hero-banner h1{
font-size:2rem;
}
.hero-banner h3{
font-size:1.1rem;
}
.hero-banner .position-absolute{
padding-bottom:10px;
}
}