/* Decorative Borders */ .top-background { background-image: url(assets/1.jpg); background-size: auto 15px; height: 15px; background-repeat: repeat-x; } .top-2-background { background-image: url(assets/2.png); background-size: auto 20px; height: 20px; background-repeat: repeat-x; } .top-2-2-background { background-image: url(assets/2-2.png); background-size: auto 20px; height: 20px; background-repeat: repeat-x; } .top-3-background { background-image: url(assets/lower_border.jpg); background-size: auto 25px; height: 25px; background-repeat: repeat-x; } .top-22-background { background-image: url(assets/22.png); background-size: auto 20px; height: 20px; background-repeat: repeat-x; } /* Announcement Bar*/ .announcement-bar { /*background-color: #0B3D91;*/ /* Navy Blue */ background-color: #065061; /* Navy Green */ color: white; display: flex; align-items: center; padding: 10px; font-size: 18px; font-weight: bold; } .announcement-label { background-color: red; padding: 8px 12px; margin-right: 10px; color: white; font-weight: bold; white-space: nowrap; } .announcement-item { margin-right: 20px; font-weight: normal; white-space: nowrap; } .new-badge { background: red; color: white; font-size: 12px; padding: 3px 6px; margin-left: 5px; border-radius: 3px; } /* Page Setting for page.php*/ .page-heading { text-align: center; margin-bottom: 1rem; /* optional spacing */ } .page-heading h1 { display: inline-block; /* shrink to content width */ position: relative; /* needed for pseudo-element positioning */ color: #045C8E; padding-bottom: 10px; /* space for underline */ font-size: 2rem; /* adjust as needed */ margin: 0; } .page-heading h1:after { content: ''; display: block; width: 100%; padding-top: 5px; padding-bottom: 1px; border-bottom: 7px solid #045C8E; border-bottom-left-radius: 105px; border-bottom-right-radius: 105px; } .page-content { margin-left: 5%; margin-right: 5%; font-family: 'Segoe UI', sans-serif; font-size: 16px; } :root { --main-color: #801313; } .main-link-box { background: url(assets/btn.png); background-size: 100%; background-position: center; width: 250px; font-weight: bold; color: var(--main-color); height: 95px; display: flex; margin-top: 10px; justify-content: center; align-items: center; transition: .3s ease-in-out; align-content: center; position: relative; text-align: center; text-decoration: none; margin-left: auto; margin-right: auto; } .main-link-box p { background: #ffc840; width: 195px; position: absolute; top: calc(50% - 24px); height: 48px; display: flex; border-radius: 100px; justify-content: center; align-items: center; color: var(--main-color); transition: .3s ease-in-out; font-size: 1.1rem; font-weight: bold; } .main-link-box:hover { text-decoration: none; transform: scale(1.05); box-shadow: 0 4px 24px rgba(128, 19, 19, 0.08); } .main-link-box:hover p { background: #f6b004; color: black; transition: .3s ease-in-out; } /* Scoped CSS for photo.php */ .photo-page { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(90deg, #185f6d 0%, #3c3553 100%); min-height: 100vh; padding: 32px 0; } .photo-page .main-title { text-align: center; font-size: 2.8rem; color: #fff; letter-spacing: 0.08em; } .photo-page .main-title span { color: #7bafd4; } .photo-page .divider { display: flex; align-items: center; margin: 0 auto 24px; width: 480px; max-width: 90vw; } .photo-page .divider:before, .photo-page .divider:after { content: ''; flex: 1; border-top: 3px solid #fff; margin: 0 10px; border-radius: 2px; } .photo-page .divider-dot { width: 8px; height: 8px; background: #fff; border-radius: 100%; } .photo-page .gallery-layout { display: flex; gap: 32px; max-width: 1400px; margin: 32px auto 0; align-items: flex-start; } .photo-page .left-video { flex: 6; background: #222; border-radius: 15px; box-shadow: 0 6px 28px rgba(0,0,0,0.24); padding: 16px 16px 0 16px; display: flex; align-items: center; justify-content: center; min-width: 460px; min-height: 433px; max-width: 760px; } .photo-page .left-video iframe { width: 100%; height: 380px; border-radius: 12px; background: #181818; } .photo-page .right-gallery { flex: 4; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; } .photo-page .photo-grid { display: grid; grid-template-columns: repeat(3, 142px); grid-template-rows: repeat(2, 108px); gap: 18px; } .photo-page .photo-grid img { width: 100%; height: 100%; object-fit: cover; background: #fff; border-radius: 12px; box-shadow: 0 2px 18px rgba(0,0,0,0.13); cursor: pointer; transition: transform 0.18s; } .photo-page .photo-grid img:hover { transform: scale(1.07); z-index: 2; } .photo-page .gallery-link { padding: 10px 26px; border-radius: 6px; background: #7bafd4; color: #fff; text-decoration: none; font-size: 1.12rem; font-weight: 500; margin-top: 6px; letter-spacing: 0.02em; box-shadow: 0 2px 10px rgba(123,175,212,.17); border: none; outline: none; transition: background 0.2s; } .photo-page .gallery-link:hover { background: #64a1c7; } /* Popup Styles */ .photo-page #popupOverlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(14,18,25,0.87); justify-content: center; align-items: center; z-index: 9999; } .photo-page #popupContent { position: relative; background: transparent; padding: 0; } .photo-page #popupContent img { max-width: 90vw; max-height: 90vh; border-radius: 14px; box-shadow: 0 4px 32px rgba(0,0,0,0.37); } .photo-page #closeBtn { position: absolute; top: -38px; right: -5px; background: #e64242; color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 2rem; cursor: pointer; transition: background 0.18s; } .photo-page #closeBtn:hover { background: #c12b2b; } @media (max-width: 1100px) { .photo-page .gallery-layout { flex-direction: column; align-items: center; gap: 24px; } .photo-page .right-gallery { width: 100%; align-items: center; } .photo-page .photo-grid { grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 72px); } .photo-page .left-video { min-width: 260px; max-width: 98vw; } .photo-page .left-video iframe { height: 210px; } } @media (max-width: 650px) { .photo-page .photo-grid { grid-template-columns: repeat(2, 44vw); grid-template-rows: repeat(5, 20vw); } .photo-page .gallery-link { width: 100%; text-align: center; } }