/*==========================
  RESET
==========================*/

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

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f4f4f4;
    color:#222;
}

a{
    text-decoration:none;
}

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

/*==========================
HEADER
==========================*/
      /* 🔥 Professional Dark Header */
    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: linear-gradient(135deg, #ffffff, #e0e0e0); /* Light gradient for red logo visibility */
      padding: 0px 0px 0px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* QA logo left */
    .qa-logo {
      position: absolute;
      left: 5px;
      top: 50%;
      transform: translateY(-50%);
    }

    .qa-logo img {
      height: 60px;  /* Bigger QA logo */
      transition: transform 0.3s, filter 0.3s;
    }

    .qa-logo img:hover {
      transform: scale(1.1);
      filter: drop-shadow(0 0 10px rgba(255,0,0,0.7));
    }

    /* Main logo center */
    .main-logo img {
      height: 90px;
      transition: transform 0.3s, filter 0.3s;
      filter: drop-shadow(0 0 8px #fff);  /* white glow for visibility */
    }

    .main-logo img:hover {
      transform: scale(1.08);
      filter: drop-shadow(0 0 12px #fff);
    }

    /* Divider lines */
    .divider-dark {
      height: 1px;
      background: #333;
      width: 100%;
    }

    .divider-light {
      height: 1px;
      background: #ccc;
      width: 100%;
      margin-top: 8px;
    }

    /* URL + Social */
    .bottom-bar {
      margin: 12px 0;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .website-url a {
      text-decoration: none;
      color: #fff;
      background: #c70000;
      padding: 6px 14px;
      border-radius: 5px;
      font-weight: bold;
      transition: all 0.3s, transform 0.3s;
    }

    .website-url a:hover {
      background: #a00000;
      transform: scale(1.05);
      box-shadow: 0 0 10px rgba(199,0,0,0.8);
    }

    .social-icons {
      display: flex;
      gap: 18px;
      font-size: 22px;
    }

    .social-icons a {
      transition: transform 0.3s, filter 0.3s;
    }

    .social-icons a:hover {
      transform: scale(1.3);
      filter: drop-shadow(0 0 8px rgba(255,255,255,0.6));
    }

    /* Social colors */
    .fa-facebook-f { color: #1877f2; }
    .fa-x-twitter { color: #000000; }
    .fa-linkedin-in { color: #0077b5; }
    .fa-youtube { color: #ff0000; }
    .fa-instagram {
      background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

.header{

width:100%;
background:#fff;
box-shadow:0 2px 8px rgba(0,0,0,.15);

}

.header-container{

max-width:1300px;
margin:auto;
padding:10px 20px;

display:flex;
justify-content:center;
align-items:center;

}

.top-logo{
    text-align:center;
    padding:20px 10px;
}

.main-logo{
    max-width:280px;
    margin:auto;
}

.logo{

display:block;
margin:auto;
max-width:100%;

}

.website-bar{
    background:#d40000;
    padding:12px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

.website-btn{
    color:#fff;
    font-size:18px;
    font-weight:bold;

    
}

.social a{
    color:#fff;
    margin-left:15px;
    font-size:20px;
    transition:.3s;
}

.social a:hover{
    color:#ffd400;
}

/*==========================
HOME PAGE
==========================*/

.edition-area{
    padding:40px 20px;
}

.container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
    gap:40px;
}


.edition-card{
    width:320px;
    margin:20px auto;
    transition:.3s;
}

.edition-card img{
    width:100%;
    height:auto;
    object-fit:cover;
    border-radius:8px;
    box-shadow:0 5px 15px rgba(0,0,0,.20);
}

.edition-card:hover{
    transform:translateY(-5px);
}

.edition-title{
    background:#d40000;
    color:#fff;
    padding:15px;
    text-align:center;
    font-size:24px;
    font-weight:bold;
    border-radius: 999px;
}

.edition-img{
    width:100%;
    transition:.3s;
}

.edition-img:hover{
    transform:scale(1.03);
}

/*==========================
EDITION PAGE
==========================*/

.edition-menu{
    max-width:1200px;
    margin:30px auto;
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}

.edition-menu a{
    background:#fff;
    color:#222;
    padding:12px 25px;
    border-radius:5px;
    font-weight:bold;
    border:2px solid #d40000;
    transition:.3s;
}

.edition-menu a:hover{
    background:#d40000;
    color:#fff;
}

.edition-menu a.active{
    background:#d40000;
    color:#fff;
}

.viewer{
    max-width:1100px;
    margin:20px auto 50px;
    padding:0 15px;
}

.paper{
    background:#fff;
    padding:15px;
    border-radius:10px;
    box-shadow:0 4px 15px rgba(0,0,0,.15);
}

.paper img{
    width:100%;
    height:auto;
}

/*==========================
FOOTER
==========================*/

footer{
    background:#111;
    color:#fff;
    text-align:center;
    padding:30px 15px;
}

.footer-social{
    margin-bottom:15px;
}

.footer-social a{
    color:#fff;
    margin:0 10px;
    font-size:22px;
    transition:.3s;
}

.footer-social a:hover{
    color:#ffd400;
}

.copyright{
    margin-top:10px;
    font-size:15px;
}

.last-updated{
    margin-top:8px;
    font-size:14px;
    color:#bfbfbf;
    font-weight:500;
}

/*==========================
RESPONSIVE
==========================*/

@media(max-width:992px){

.container{
    grid-template-columns:1fr;
}

.main-logo{
    max-width:220px;
}

.website-btn{
    font-size:16px;
}

.edition-title{
    font-size:20px;
}

}

@media(max-width:768px){

.website-bar{
    flex-direction:column;
    gap:10px;
    text-align:center;
}

.social a{
    margin:0 8px;
}

.edition-menu{
    padding:0 10px;
}

.edition-menu a{
    width:100%;
    text-align:center;
}

.paper{
    padding:8px;
}

}

@media(max-width:480px){

.main-logo{
    max-width:170px;
}

.edition-title{
    font-size:18px;
    padding:12px;
}

.website-btn{
    font-size:15px;
}

.social a{
    font-size:18px;
}

.container{
    gap:20px;
}

}