@media (min-width: 992px) {}@media (min-width: 768px) and (max-width: 991px) {}@media (max-width: 767px) {}
/* ========================================================= BUDDYS INFOTECH — EVENTS PAGE Current Event: INTEGRATED SYMPOSIUM ON DISASTER MANAGEMENT WITH ITBP
========================================================= */
.events-page{ --event-primary:#173f70; --event-secondary:#e21f2f; --event-dark:#101820; --event-text:#17202a; --event-muted:#6f7b87; --event-border:#e5e9ee; --event-soft:#f6f8fb; --event-white:#ffffff; width:100%; font-family:Arial, Helvetica, sans-serif; color:var(--event-text); box-sizing:border-box;
}
.events-page *,
.events-page *::before,
.events-page *::after{ box-sizing:border-box;
}
.events-heading{ position:relative; text-align:center; margin:0 auto 38px; max-width:850px;
}
.events-eyebrow{ display:inline-flex; align-items:center; gap:9px; color:var(--event-secondary); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.8px; margin-bottom:12px;
}
.events-eyebrow::before,
.events-eyebrow::after{ content:""; width:28px; height:2px; background:var(--event-secondary);
}
.events-heading h2{ margin:0; color:var(--event-primary); font-size:40px; line-height:1.18; font-weight:700; letter-spacing:-.5px;
}
.events-heading p{ max-width:700px; margin:15px auto 0; color:var(--event-muted); font-size:15px; line-height:1.8;
}
.events-summary{ display:flex; justify-content:center; margin-bottom:30px;
}
.events-count{ display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border:1px solid var(--event-border); border-radius:30px; background:#fff; color:#687481; font-size:12px; font-weight:600; box-shadow:0 4px 14px rgba(23,63,112,.05);
}
.events-count-dot{ width:7px; height:7px; border-radius:50%; background:#27ae60; box-shadow:0 0 0 4px rgba(39,174,96,.10);
}
.events-grid{ display:grid; grid-template-columns:minmax(0,1fr); max-width:1050px; margin:0 auto;
}
.event-card{ position:relative; display:grid; grid-template-columns:48% 52%; background:#fff; border:1px solid var(--event-border); border-radius:18px; overflow:hidden; box-shadow:0 12px 35px rgba(23,63,112,.08); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.event-card:hover{ transform:translateY(-5px); border-color:#d5dce4; box-shadow:0 20px 50px rgba(23,63,112,.14);
}
.event-image-wrap{ position:relative; min-height:430px; overflow:hidden; background:#e9edf2;
}
.event-image{ width:100%; height:100%; min-height:430px; display:block; object-fit:cover; transition:transform .6s ease;
}
.event-card:hover .event-image{ transform:scale(1.045);
}
.event-image-overlay{ position:absolute; inset:0; background: linear-gradient( 180deg, rgba(10,20,32,.08) 0%, rgba(10,20,32,.02) 45%, rgba(10,20,32,.62) 100% ); pointer-events:none;
}
.event-category{ position:absolute; top:18px; right:18px; padding:7px 12px; border-radius:7px; background:rgba(23,63,112,.94); color:#fff; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.event-status{ position:absolute; left:18px; top:18px; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:7px; background:rgba(255,255,255,.95); color:#263442; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; box-shadow:0 6px 18px rgba(0,0,0,.14);
}
.event-status-dot{ width:6px; height:6px; border-radius:50%; background:#27ae60;
}
.event-image-caption{ position:absolute; left:22px; right:22px; bottom:20px; color:#fff; z-index:2;
}
.event-image-caption span{ display:block; margin-bottom:5px; font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; opacity:.85;
}
.event-image-caption strong{ display:block; font-size:17px; line-height:1.35;
}
.event-content{ display:flex; flex-direction:column; justify-content:center; padding:42px 42px 38px;
}
.event-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:14px; color:#87929d; font-size:11px; font-weight:600;
}
.event-meta-divider{ color:#c4cbd2;
}
.event-content h3{ margin:0 0 15px; color:var(--event-primary); font-size:27px; line-height:1.3; font-weight:700; letter-spacing:-.3px;
}
.event-content p{ margin:0 0 25px; color:#6d7883; font-size:14px; line-height:1.8;
}
.event-details{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:27px;
}
.event-detail{ display:flex; align-items:flex-start; gap:11px; padding:12px; border:1px solid #edf0f3; border-radius:9px; background:#fafbfc;
}
.event-detail-icon{ width:30px; height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:center; border-radius:7px; background:#eef3f8; color:var(--event-primary); font-size:14px;
}
.event-detail-text{ min-width:0;
}
.event-detail-label{ display:block; margin-bottom:3px; color:#9aa4ad; font-size:9px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
}
.event-detail-value{ display:block; color:#394652; font-size:11px; font-weight:600; line-height:1.4;
}
.event-footer{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:20px; border-top:1px solid #edf0f3;
}
.event-photo-info{ display:flex; align-items:center; gap:7px; color:#89939e; font-size:11px;
}
.event-photo-info strong{ color:#596570;
}
.view-event-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:0 17px; border:0; border-radius:7px; background:var(--event-primary); color:#fff; font-size:11px; font-weight:700; cursor:pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.view-event-btn:hover{ background:#102f55; transform:translateY(-1px); box-shadow:0 7px 18px rgba(23,63,112,.20);
}
.events-future-note{ max-width:1050px; margin:24px auto 0; padding:15px 18px; border:1px dashed #dce2e8; border-radius:10px; background:#fafbfc; text-align:center; color:#89939e; font-size:11px; line-height:1.6;
}
.events-future-note strong{ color:var(--event-primary);
}
.event-modal{ position:fixed; inset:0; z-index:999999; display:none; align-items:center; justify-content:center; padding:22px; background:rgba(8,17,28,.90); backdrop-filter:blur(7px);
}
.event-modal.show{ display:flex;
}
.event-modal-box{ position:relative; width:min(560px,92vw); max-height:94vh; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 30px 100px rgba(0,0,0,.40);
}
.modal-top{ display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px 20px; border-bottom:1px solid #e8ebee; background:#fff;
}
.modal-heading-wrap{ min-width:0;
}
.modal-title{ margin:0; color:var(--event-primary); font-size:15px; line-height:1.35; font-weight:700;
}
.modal-subtitle{ margin:3px 0 0; color:#929ca5; font-size:10px;
}
.modal-close{ width:35px; height:35px; flex:0 0 35px; border:1px solid #e1e5e9; background:#fff; border-radius:50%; color:#45515c; cursor:pointer; font-size:18px; line-height:1; transition:all .2s ease;
}
.modal-close:hover{ background:var(--event-secondary); border-color:var(--event-secondary); color:#fff;
}
.modal-photo-area{ position:relative; width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#101820; overflow:hidden;
}
.modal-main-image{ width:100%; height:100%; display:block; object-fit:cover;
}
.modal-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:43px; height:43px; border:0; border-radius:50%; background:rgba(255,255,255,.95); color:var(--event-primary); cursor:pointer; font-size:23px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 20px rgba(0,0,0,.25); transition:all .2s ease;
}
.modal-arrow:hover{ background:var(--event-secondary); color:#fff;
}
.modal-prev{ left:18px;
}
.modal-next{ right:18px;
}
.modal-bottom{ padding:14px 18px; background:#fff;
}
.modal-description{ margin:0 0 11px; color:#6d7883; font-size:11px; line-height:1.6;
}
.modal-thumbs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
}
.modal-thumb{ width:72px; height:50px; flex:0 0 72px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; opacity:.60; transition:all .2s ease;
}
.modal-thumb:hover{ opacity:1;
}
.modal-thumb.active{ border-color:var(--event-secondary); opacity:1;
}
@media(max-width:768px){ .events-heading{ text-align:left; margin-bottom:25px; } .events-eyebrow{ font-size:10px; letter-spacing:1.3px; margin-bottom:10px; } .events-eyebrow::before{ width:22px; } .events-eyebrow::after{ display:none; } .events-heading h2{ font-size:29px; line-height:1.25; } .events-heading p{ margin:11px 0 0; font-size:13px; line-height:1.7; } .events-summary{ justify-content:flex-start; margin-bottom:18px; } .events-count{ font-size:10px; padding:7px 12px; } .event-card{ display:flex; flex-direction:column; border-radius:14px; } .event-image-wrap{ min-height:235px; height:235px; } .event-image{ min-height:235px; } .event-status{ left:12px; top:12px; } .event-category{ right:12px; top:12px; } .event-image-caption{ left:15px; right:15px; bottom:15px; } .event-image-caption strong{ font-size:15px; } .event-content{ padding:23px 18px 20px; justify-content:flex-start; } .event-meta{ margin-bottom:10px; font-size:10px; } .event-content h3{ font-size:21px; line-height:1.35; margin-bottom:11px; } .event-content p{ font-size:12.5px; line-height:1.7; margin-bottom:19px; } .event-details{ grid-template-columns:1fr; gap:8px; margin-bottom:20px; } .event-detail{ padding:10px; } .event-footer{ align-items:flex-start; flex-direction:column; gap:12px; padding-top:16px; } .view-event-btn{ width:100%; } .events-future-note{ margin-top:16px; text-align:left; font-size:10px; } .event-modal{ padding:8px; } .event-modal-box{ border-radius:10px; } .modal-top{ padding:12px 13px; } .modal-title{ font-size:14px; } .modal-subtitle{ font-size:9px; } .modal-close{ width:32px; height:32px; flex-basis:32px; } .modal-arrow{ width:36px; height:36px; font-size:19px; } .modal-prev{ left:9px; } .modal-next{ right:9px; } .modal-bottom{ padding:11px; }
}
@media(max-width:480px){ .events-heading h2{ font-size:26px; } .events-heading p{ font-size:12px; } .event-image-wrap, .event-image{ min-height:205px; height:205px; } .event-content{ padding:20px 15px 18px; } .event-content h3{ font-size:19px; } .event-detail-value{ font-size:10.5px; }
}
.modal-thumbs::-webkit-scrollbar{ height:4px;
}
.modal-thumbs::-webkit-scrollbar-thumb{ background:#ccd3da; border-radius:10px;
}
.events-page button{ font-family:inherit;
}
.events-page img{ user-select:none;
}