/* assets/css/override.css
   Main visual override file for the campaign site
   Cleaned and consolidated version
*/

/* ===== Hard resets ===== */
html, body {
  background: #fff !important;
  color: #111 !important;
}

body {
  margin: 0 !important;
  overflow-x: hidden !important;
}

a {
  color: inherit;
}

html{
    scroll-behavior:smooth;
}

* {
  box-sizing: border-box;
}

:root{
  --red: #de3b3b;
  --blue: #044681;
  --text: #111;
  --muted: #444;
  --border: #e6e6e6;
  --shadow: 0 10px 22px rgba(0,0,0,0.12);
  --shadow-soft: 0 14px 30px rgba(0,0,0,0.14);
  --panel-shadow: 0 16px 34px rgba(0,0,0,0.18);
}

/* ===== Base ===== */
body{
  font-family: Arial, Helvetica, sans-serif;
  background:#fff;
  color: var(--text);
}

/* Desktop reference:
   153 left + 506 + 48 + 506 + 48 + 506 + 153 = 1920 */
.container{
  max-width: 1920px;
  margin: 0 auto;
  padding-left: 153px;
  padding-right: 153px;
}

/* ===== Header ===== */
.topbar{
  background:#fff;
  border-bottom:1px solid var(--border);
  height:183px;
  display:flex;
  align-items:center;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
}

.brand img{
    height:240px;
    width:auto;
    display:block;
    transform:translateX(-80px);
}

.navlinks{
  display:flex;
  align-items:center;
  gap:48px;
  margin-left:auto;
  position:relative;
  left:213px;
}

.navlinks a{
  text-decoration:none;
  color:#6b6b6b;
  font-size:22px;
  font-family:'Merriweather', Georgia, serif;
}

.btn-contribute{
  background: var(--red);
  color:#fff !important;
  padding:12px 22px;
  font-weight:900;
  border-radius:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.mobile-toggle{
  display:none;
  background:transparent;
  border:1px solid var(--border);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
}

/* ===== Hero ===== */
.hero{
  width:100%;
  display:grid;
  grid-template-columns:60% 40%;
  height:635px;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
}

.hero-left{
  background:var(--red);
  color:#fff;
  position:relative;
  height:635px;
  min-height:0;
  padding:60px;
}

.hero-right{
  height:635px;
  min-height:0;
  background:#111;
}

.hero-right img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hero-slogan{
  position:absolute;
  left:60px;
  top:105px;
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index:5;
  max-width:52%;
}

.hero-slogan > span{
  display:flex;
  align-items:center;
  gap:16px;
  font-size:46px;
  font-weight:900;
  letter-spacing:0.2px;
  text-transform:uppercase;
  line-height:1.05;
  color:#ffffff !important;
  white-space:nowrap;
}

.hero-slogan .star{
  color:#044681 !important;
  font-size:44px;
  line-height:1;
  flex:0 0 auto;
}

.hero-left h1{
  position:relative;
  z-index:3;
  margin:250px 0 0 0;
  font-size:62px;
  line-height:1.05;
  font-weight:900;
  max-width:60%;
}

/* ===== Blue button row ===== */
.hero-buttons-wrap{
  background:transparent;
  position:relative;
  margin-top:-35px;
  z-index:10;
}

.hero-buttons{
  display:flex;
  justify-content:center;
  gap:62px;
  padding-bottom:110px;
  flex-wrap:nowrap;
}

.hero-buttons a{
  width:300px;
  height:100px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:0.3px;
  border:4px solid var(--red);
  border-radius:12px;
  box-shadow:0 8px 18px rgba(0,0,0,0.18);
  flex-shrink:0;
}

/* ===== Three vertical cards section ===== */
.section{
  padding:0 0 80px;
  background:#fff;
}

.section-title{
  display:none !important;
}

.three-col{
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:48px;
  flex-wrap:nowrap;
}

.panel{
  width:506px;
  min-width:506px;
  height:1265px;
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius:20px;
  box-shadow:var(--panel-shadow);
  padding:26px;
  overflow:hidden;
  flex-shrink:0;
}

.panel img{
    display:block;

    width:94%;
    height:auto;

    margin:32px auto 34px auto;

    border-radius:0;
}

.panel h2,
.panel h3{
  margin:39px 0 0 0;
  font-size:32px;
  font-weight:900;
  color:var(--blue);
  line-height:1.15;
}

.panel p{
  line-height:1.5;
}

/* ===== Meet John Panel ===== */
.panel-title{
  margin:0 0 46px;
  text-align:center;
  color:var(--blue);
  font-family:Georgia,"Times New Roman",serif;
  font-size:48px;
  font-weight:700;
  line-height:1.08;
}

.panel-blurb{
  margin:0 0 42px;
  color:#444;
  font-size:20px;
  line-height:1.62;
}

.panel-blurb strong{
  color:#222;
  font-weight:700;
}

.btn-red{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:180px;
  height:58px;
  background:var(--red);
  color:#fff !important;
  text-decoration:none;
  font-weight:900;
  font-size:18px;
  border-radius:8px;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
}

/* ===== Join section ===== */
.join{
  background:var(--red);
  color:#fff;
  padding:80px 20px;
  text-align:center;
}

.join h2{
  margin:0;
  font-size:48px;
  font-weight:900;
}

.join p{
  margin:10px 0 0;
  font-size:18px;
}

.join-form{
  max-width:720px;
  margin:40px auto 0;
  background:rgba(0,0,0,0.18);
  padding:34px;
  box-shadow:var(--shadow);
  border-radius:18px;
}

.join-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:16px;
}

.join-form input{
  width:100%;
  padding:12px;
  border:none;
  border-radius:12px;
}

.join-form button{
  margin-top:18px;
  background:var(--blue);
  color:#fff;
  border:none;
  padding:16px 38px;
  font-weight:900;
  cursor:pointer;
  border-radius:14px;
}

/* ===== Footer ===== */
.footer{
  background:#fff;
  border-top:1px solid var(--border);
  padding:26px 12px 30px;
}

.footer-inner{
  width:684px;
  max-width:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.footer-phone{
  width:148px;
  height:23px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
}

.footer-phone a{
  text-decoration:none;
  color:#000;
}

.phone-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
}

.footer-logo img{
  height:140px;
  width:auto;
  display:block;
}

.footer-social{
    display:flex;
    align-items:center;
    gap:18px;
}

.footer-social a{
    width:46px;
    height:46px;

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

    border-radius:50%;
    background:#044681;
    color:#fff;

    font-size:22px;

    text-decoration:none;

    transition:.2s;
}

.footer-social a:hover{
    background:#de3b3b;
    transform:translateY(-2px);
}

.footer-legal{
  text-align:center;
  margin-top:18px;
  font-size:14px;
  line-height:1.55;
}

.footer-legal a{
  text-decoration:none;
  color:#000;
  font-weight:900;
}

/* ===== Issues grid (temporary, redesign later) ===== */
.issues-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:14px;
}

.issue-card{
  background:#fff;
  border:1px solid #e7e7e7;
  border-radius:14px;
  padding:22px;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

.issue-card h2{
  margin:0 0 10px 0;
  font-size:22px;
  font-weight:900;
}

.issue-card p{
  margin:0 0 14px 0;
  line-height:1.5;
}

.issue-card ul{
  margin:0;
  padding-left:18px;
}

.issue-card li{
  margin:8px 0;
  line-height:1.4;
}

/* ===== Join Popup ===== */
.popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.74);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
}

.join-popup{
  width:650px;
  max-width:92vw;
  background:var(--blue);
  color:#fff;
  position:relative;
  box-shadow:0 18px 50px rgba(0,0,0,0.45);
}

.popup-close{
  position:absolute;
  top:12px;
  right:12px;
  width:24px;
  height:24px;
  border:1px solid #111;
  background:#eee;
  color:#111;
  font-size:20px;
  line-height:18px;
  cursor:pointer;
}

.popup-title{
  background:#eee;
  color:var(--blue);
  text-align:center;
  font-family:'Merriweather', Georgia, serif;
  font-size:42px;
  font-weight:900;
  padding:36px 20px;
}

.popup-form{
  padding:38px 36px 36px;
}

.popup-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:28px;
}

.popup-form label{
  display:block;
  font-weight:900;
  margin-bottom:10px;
  font-size:17px;
}

.popup-form label span{
  color:var(--red);
  font-size:12px;
}

.popup-form input[type="text"],
.popup-form input[type="email"],
.popup-form input[type="tel"]{
  width:100%;
  height:40px;
  border:none;
  background:#fff;
  color:#111;
  padding:8px 10px;
  font-size:16px;
}

.popup-form small{
  display:block;
  margin-top:8px;
  font-size:15px;
  color:#fff;
}

.consent-block{
  margin-top:4px;
}

.consent-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.consent-row input{
  width:18px;
  height:18px;
  margin-top:4px;
  flex:0 0 auto;
}

.consent-row p{
  margin:0;
  font-size:16px;
  line-height:1.45;
  color:#fff;
}

.popup-submit{
  margin-top:28px;
  width:300px;
  height:58px;
  background:var(--red);
  color:#fff;
  border:none;
  font-weight:900;
  font-size:18px;
  cursor:pointer;
}

/* ===== Responsive ===== */
@media (max-width: 1920px){
  .container{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (max-width: 1660px){
  .three-col{
    flex-wrap:wrap;
  }

  .panel{
    width:min(506px, 100%);
    min-width:0;
    height:auto;
    min-height:900px;
  }

  .hero-buttons{
    gap:28px;
  }
}

@media (max-width: 1200px){
  .navlinks{
    left:0;
  }

  .hero{
    grid-template-columns:1fr;
    height:auto;
  }

  .hero-left{
    height:auto;
    min-height:520px;
    padding:40px 24px;
  }

  .hero-right{
    height:360px;
  }

  .hero-slogan{
    left:24px;
    top:70px;
    max-width:90%;
  }

  .hero-slogan > span{
    font-size:34px;
  }

  .hero-slogan .star{
    font-size:34px;
  }

  .hero-left h1{
    margin-top:210px;
    font-size:44px;
    max-width:100%;
  }

  .hero-buttons{
    flex-wrap:wrap;
    gap:18px;
    padding-bottom:60px;
  }

  .hero-buttons-wrap{
    margin-top:-18px;
  }

  .hero-buttons a{
    width:min(320px, 100%);
  }
}

@media (max-width: 980px){
  .mobile-toggle{
    display:inline-flex;
  }

  .topbar{
    height:auto;
    min-height:120px;
    padding:20px 0;
  }

  .nav{
    flex-wrap:wrap;
  }

  .navlinks{
    gap:16px;
    flex-wrap:wrap;
  }

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

  .footer-inner{
    width:100%;
    padding:0 18px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .footer-phone,
  .footer-social{
    width:auto;
    height:auto;
  }
}

@media (max-width:700px){
  .join-popup{
    max-height:92vh;
    overflow:auto;
  }

  .popup-title{
    font-size:32px;
    padding:26px 16px;
  }

  .popup-row{
    grid-template-columns:1fr;
    gap:14px;
    margin-bottom:20px;
  }

  .popup-form{
    padding:28px 22px;
  }

  .popup-submit{
    width:100%;
  }
}

@media (max-width: 640px){
  .join-grid{
    grid-template-columns:1fr;
  }

  .hero-slogan > span{
    font-size:28px;
  }

  .hero-slogan .star{
    font-size:28px;
  }

  .hero-left h1{
    font-size:36px;
  }

  .panel{
    min-height:auto;
  }

  .panel-title{
    font-size:38px;
  }
}
/* ===== Custom Facebook Panel ===== */

.facebook-panel{
  padding:26px;
  overflow:hidden;
}

.fb-custom-head{
  width:100%;
  max-width:460px;
  margin:0 auto 10px auto;
  border:1px solid #dddfe2;
  background:#fff;
}

.fb-name-row{
  padding:12px;
  border-bottom:1px solid #dddfe2;
}

.fb-name-row a{
  display:block;
  color:#044681;
  font-size:20px;
  font-weight:800;
  text-decoration:none;
  line-height:1.15;
}

.fb-name-row span{
  display:block;
  color:#555;
  font-size:13px;
  margin-top:3px;
}

.fb-custom-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#f5f6f7;
  padding:8px 12px;
}

.fb-mini-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:96px;
  height:28px;
  background:#fff;
  border:1px solid #ccd0d5;
  color:#365899 !important;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}

/* Facebook feed window */
.fb-feed-crop{
  width:100%;
  max-width:460px;
  height:1040px;
  margin:0 auto;
  overflow-y:scroll;
  overflow-x:hidden;
  border:1px solid #dddfe2;
  background:#fff;
  position:relative;
}

/* Chrome / Edge scrollbar */
/* Modern scrollbar */

.fb-feed-crop::-webkit-scrollbar{
    width:8px;
}

.fb-feed-crop::-webkit-scrollbar-track{
    background:transparent;
}

.fb-feed-crop::-webkit-scrollbar-thumb{
    background:#b7b7b7;
    border-radius:999px;
    border:2px solid transparent;
    background-clip:content-box;
}

.fb-feed-crop::-webkit-scrollbar-thumb:hover{
    background:#9d9d9d;
    background-clip:content-box;
}

.fb-feed-crop::-webkit-scrollbar-button{
    display:none;
}
/* Move Facebook's own header upward */
.fb-feed-crop iframe{
  position:relative !important;
  top:-75px !important;
}

/* Give the iframe extra height because we are moving it upward */
.fb-feed-crop .fb-page,
.fb-feed-crop span,
.fb-feed-crop iframe{
  width:100% !important;
  max-width:460px !important;
}

/* Smaller Facebook header name + profile image */
.fb-name-row{
    display:flex;
    align-items:flex-start;      /* <-- moves name upward */
    gap:10px;
    min-height:60px;
    padding:10px 12px 6px;
}

.fb-profile-pic{
    width:44px;
    height:44px;
    flex:0 0 44px;

    background-image:url("../img/john-hero.jpg");
    background-size:cover;
    background-position:center 12%;

    border:1px solid #ddd;
    text-decoration:none;
}

.fb-name-text{
    padding-top:2px;             /* fine tune vertically */
}

.fb-name-text a{
    color:#044681;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    line-height:1.15;
}

.fb-name-text a:hover{
    text-decoration:underline;
}


.footer-logo a{
    display:inline-block;
}

.footer-logo img{
    transition:transform .2s ease;
}

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

.volunteer-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 18px;
  text-align:left;
  color:#111;
}

.volunteer-options label{
  font-size:17px;
  line-height:1.4;
}

.volunteer-options input{
  margin-right:8px;
}

@media (max-width:700px){
  .volunteer-options{
    grid-template-columns:1fr;
  }
}

.about-page{
  max-width:1180px;
  margin:0 auto;
  padding:20px 0 40px;
}

.about-page h1{
  color:var(--blue);
  font-family:Georgia,"Times New Roman",serif;
  font-size:36px;
  margin:0 0 24px;
  text-align:left;
}

.about-page h2{
  color:#111;
  font-size:22px;
  margin:28px 0 14px;
}

.about-page p{
  font-size:18px;
  line-height:1.7;
  margin:0 0 20px;
  color:#222;
}

.about-page ul{
  margin:0 0 30px 24px;
  padding:0;
}

.about-page li{
  font-size:18px;
  line-height:1.7;
  margin:8px 0;
}

.issues-page{
  max-width:1300px;
  margin:0 auto;
}

.issues-page h1{
  text-align:center;
  color:var(--blue);
  font-family:Georgia,"Times New Roman",serif;
  font-size:52px;
  margin:0 0 18px;
}

.issues-intro{
  max-width:900px;
  margin:0 auto 44px;
  text-align:center;
  font-size:22px;
  line-height:1.55;
}

.issues-actions{
  display:flex;
  justify-content:center;
  gap:22px;
  margin-top:42px;
  flex-wrap:wrap;
}

.issues-actions .btn-red{
  width:220px;
}

.news-panel{
  display:flex;
  flex-direction:column;
}

.homepage-update-item{
  border-bottom:1px solid #e5e5e5;
  padding:0 0 22px;
  margin-bottom:24px;
}

.homepage-update-item h3{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.2;
  color:var(--blue);
}

.homepage-update-item h3 a{
  color:var(--blue);
  text-decoration:none;
}

.homepage-update-item h3 a:hover{
  text-decoration:underline;
}

.update-date{
  font-size:15px;
  font-weight:900;
  color:#666;
  margin-bottom:10px;
}

.homepage-update-item p{
  font-size:18px;
  line-height:1.45;
  margin:0 0 12px;
}

.update-read-more{
  color:var(--red);
  font-weight:900;
  text-decoration:none;
}

.news-view-more{
  margin-top:auto;
}

.updates-page{
  max-width:1180px;
  margin:0 auto;
}

.updates-page h1{
  color:var(--blue);
  font-family:Georgia,"Times New Roman",serif;
  font-size:38px;
  margin:0 0 28px;
}

.updates-grid{
  max-width:1180px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}

.update-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:150px;
  background:#fff;
  border:1px solid #e5e5e5;
  box-shadow:0 3px 12px rgba(0,0,0,.12);
  text-decoration:none;
  color:#222;
  padding:22px 28px 0;
}

.update-card h2{
  color:var(--blue);
  font-size:21px;
  line-height:1.25;
  margin:0;
}

.update-card .update-date{
  border-top:1px solid #eee;
  margin:22px -28px 0;
  padding:14px 28px;
  color:var(--red);
  font-size:16px;
  font-weight:700;
}



/* ===== Individual Press Release Pages ===== */
.news-article{
  max-width:1080px;
  margin:0 auto;
  padding:32px 0 70px;
}

.news-article h1{
  font-size:30px;
  line-height:1.15;
  margin:0 0 18px;
  color:#111;
  font-family:Arial, Helvetica, sans-serif;
  font-weight:900;
}

.news-date{
  background:#eeeeee;
  padding:14px 18px;
  margin:0 0 28px;
  font-size:16px;
  line-height:1.35;
  font-weight:700;
  color:#444;
}

.news-article p{
  font-size:17px;
  line-height:1.65;
  color:#222;
  margin:0 0 18px;
}

.news-article h2{
  color:var(--blue);
  font-size:26px;
  margin:34px 0 14px;
}

.news-article hr{
  border:none;
  border-top:1px solid #ddd;
  margin:34px 0;
}

.news-links{
  margin:0 0 0 22px;
  padding:0;
}

.news-links li{
  font-size:17px;
  margin-bottom:10px;
  line-height:1.5;
}

.news-links a{
  color:var(--blue);
  font-weight:700;
}

@media(max-width:900px){
  .updates-grid{
    grid-template-columns:1fr;
  }
}


/* ===== Mobile header/hero fixes ===== */
@media (max-width: 700px){

  .topbar{
    min-height:auto;
    padding:10px 0;
  }

  .nav{
    justify-content:center;
    gap:10px;
  }

  .brand img{
    height:135px;
    transform:none;
    margin:0 auto;
  }

  .mobile-toggle{
    display:none;
  }

  .navlinks{
    width:100%;
    left:0;
    margin:0;
    justify-content:center;
    gap:12px;
  }

  .navlinks a{
    font-size:15px;
  }

  .btn-contribute{
    padding:9px 14px;
    border-radius:10px;
  }

  .hero-left{
    min-height:430px;
    padding:28px 18px;
  }

  .hero-slogan{
    left:18px;
    right:18px;
    top:45px;
    max-width:none;
    gap:12px;
  }

  .hero-slogan > span{
    font-size:22px;
    white-space:normal;
    line-height:1.15;
  }

  .hero-slogan .star{
    font-size:24px;
  }

  .hero-left h1{
    margin-top:170px;
    font-size:34px;
  }
}

/* ===== Mobile header/hero fixes ===== */
@media (max-width: 700px){

  .topbar{
    min-height:auto;
    padding:10px 0;
  }

  .nav{
    justify-content:center;
    gap:10px;
  }

  .brand img{
    height:135px;
    transform:none;
    margin:0 auto;
  }

  .mobile-toggle{
    display:none;
  }

  .navlinks{
    width:100%;
    left:0;
    margin:0;
    justify-content:center;
    gap:12px;
  }

  .navlinks a{
    font-size:15px;
  }

  .btn-contribute{
    padding:9px 14px;
    border-radius:10px;
  }

  .hero-left{
    min-height:430px;
    padding:28px 18px;
  }

  .hero-slogan{
    left:18px;
    right:18px;
    top:45px;
    max-width:none;
    gap:12px;
  }

  .hero-slogan > span{
    font-size:22px;
    white-space:normal;
    line-height:1.15;
  }

  .hero-slogan .star{
    font-size:24px;
  }

  .hero-left h1{
    margin-top:170px;
    font-size:34px;
  }
}

.popup-close{
  z-index:100000 !important;
  pointer-events:auto !important;
}


/* ===== LEGO Giveaway Page Only ===== */

.giveaway-page{
  max-width:900px;
  margin:0 auto;
  padding:30px 0 70px;
}

.giveaway-page h1{
  color:var(--blue);
  font-family:Georgia,"Times New Roman",serif;
  font-size:44px;
  text-align:center;
  margin:0 0 18px;
}

.giveaway-intro{
  max-width:720px;
  margin:0 auto 34px;
  text-align:center;
  font-size:20px;
  line-height:1.55;
  color:#222;
}

.giveaway-box{
  background:#fff;
  border:1px solid #e3e3e3;
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  padding:34px;
  margin-bottom:36px;
}

.giveaway-box h2,
.giveaway-rules h2{
  color:var(--blue);
  font-size:28px;
  margin:0 0 22px;
}

.giveaway-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.giveaway-form input[type="text"],
.giveaway-form input[type="email"],
.giveaway-form input[type="tel"]{
  width:100%;
  padding:14px;
  border:1px solid #ccc;
  font-size:16px;
}

.giveaway-check{
  display:block;
  margin-top:18px;
  font-size:16px;
  line-height:1.45;
}

.giveaway-check input{
  margin-right:8px;
}

.giveaway-form button{
  margin-top:24px;
  width:100%;
  height:58px;
  background:var(--red);
  color:#fff;
  border:none;
  font-weight:900;
  font-size:18px;
  cursor:pointer;
}

.giveaway-rules{
  background:#f7f7f7;
  border:1px solid #ddd;
  padding:30px;
}

.giveaway-rules p{
  font-size:16px;
  line-height:1.6;
  color:#222;
}

@media(max-width:700px){
  .giveaway-grid{
    grid-template-columns:1fr;
  }

  .giveaway-page h1{
    font-size:34px;
  }

  .giveaway-box,
  .giveaway-rules{
    padding:22px;
  }
}