/* BACKGROUND */
body{
  background-image:url('Images/image-global-city.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  min-height:100vh;
  font-family:'Segoe UI',sans-serif;
  margin:0;
  padding:0;
}

body::before{
  content:"";
  position:fixed;
  inset:0;background:rgba(0,0,0,.40);
  z-index:-1;
}

/* HEADER */
.header{
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 40px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
}

.header .logo{
  display:flex;
  align-items:center;
  gap:10px
}

.header .logo img{
  height:40px;
  width:auto
}

.header .logo span{
  font-size:24px;
  font-weight:700
}

.header .time{font-size:16px
}


/* CARD */
.announcement{
  width:100vw; 
  max-width:1200px;
  margin: 40px auto 30px;
  border-radius:20px; 
  overflow:hidden;
  background:#fff; 
  box-shadow:0 12px 40px rgba(0,0,0,.15);
  transition: opacity .6s ease, transform .6s ease;
}

.announcement.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.announcement-header{
  background:#004080; 
  color:#fff;  
  padding: 8px 25px;  
  white-space:nowrap; 
  position:relative;
}

.announcement-header h2{
  margin:0;
  font-size:3rem;
  overflow:hidden
}

.scrolling-text{
  display:inline-block;
  padding-left:100%;
  animation:scroll-left 12s linear infinite
}

@keyframes scroll-left{0%{
  transform:translateX(0)}100%{
    transform:translateX(-100%)
  }
}

/* TWO COLUMN BODY */
.announcement-body{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items:center;                  
  gap:28px 40px;
  padding:32px 44px;
}

/* LEFT SIDE */
.left{display:grid;grid-template-rows:auto 1fr;row-gap:18px;min-width:0}
.paging-label{
  margin:0; color:#0b1426; font-weight:800; text-align:center;
  font-size:70px;
  letter-spacing:.02em; 
}

/* ROWS */
.content{
  margin-top: 10px; 
  display:grid;
  gap:20px;
  min-width:0
}

.content-row{
  display:grid; 
  grid-template-columns: 240px 1fr; 
  align-items:center; 
  padding:12px 0; 
  border-bottom:1px solid #e7ecf3;
}

.content-label{
  font-weight:800; 
  color:#0b3670; 
  font-size:21px;
}

.content-value{
  font-weight:700; color:#111; 
  font-size:21px;
  line-height:1.25;
  overflow-wrap:anywhere;
}

/* RIGHT SIDE (BIG IMAGE) */
.image{
  display:flex;
  align-items:center;
  justify-content:center;
}

.image img{
  width:100%;
  height:min(62vh, 540px);
  aspect-ratio: 16 / 10; 
  object-fit:cover; 
  border-radius:20px; 
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

/* RESPONSIVE */
@media (max-width: 900px){
  .announcement{
    margin-top:80px}

  .announcement-body{
    grid-template-columns:1fr;
    gap:20px;
    padding:28px
  }

  .paging-label{
    text-align:center
  }

  .content-row{
    grid-template-columns:1fr;
    row-gap:6px
  }

  .content-value{justify-self:start
  }
}