/*-----------------------------------------
    Structure:
    0.0 Global
    0.1 Helper Classes and Overrides (ie. visually hidden, clear float, inline lists, etc.)
    0.2 Presentation (ie. fonts, colours, etc.)
    0.3 Structures
    0.3.1 Header
    0.3.1.1 Logos
    0.3.1.2 Nav
    0.3.1.3 Socials
    0.3.2 Footer
    0.3.2.1 Nav
    0.3.2.2 Legal/Mice
    0.3.2.3 SiteCatalyst
    1.0Home/Contest
    1.1 Intro
    1.2 Form
    1.3 Thank you
    1.4 Face Product
-------------------------------------------*/





/* ---------------------------------------
        0.0 Global
--------------------------------------- */

/* --	0.1 Helper Classes and Modules -- */
/* Visually Hidden */
.vh { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Clear fix */
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { zoom: 1; }
/* No-style List*/
.list--noStyle{
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Inline list */
.list--inline li{
    display: inline-block;
}
/* 100% width image (contextually based on wrapper) */
.imgFull{width: 100%;}

/* center a child element vertically and horizontally within its parent */
.valign--parent{position: relative;}
.valign--child{
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}



html {
    font-size: 16px; /* Base font size */
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
}


body{
    font-size: 1rem; /* Ensure 1rem is equivalent to 16px */
    margin: 0;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    background-color: #6043E6;
    padding: 0;
    background-image: url("/bravocon/media/images/bkg-diamond.png");
    background-size: contain; 
    background-position: center top;
    background-repeat: no-repeat;
    overflow-x: hidden;
}



img {
    width: 100%;
    image-rendering: -webkit-optimize-contrast;
}

.body-text{
    color: #FFF;
}








/* global transition
------------------------*/
.all{
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    transition: all 200ms linear;
}
/* --	/0.1 -- */


/* --	0.2 Presentation -- */


p{padding: 0; margin: 0;}

a {color: #FFFFFF; text-decoration: none; font-weight: bold;}
a:hover {color: #7BFFF3;}
a::after {color: #DA291C; text-decoration: none;}


.header-container {
     /* This is the main parent container for all header elements */
     height: 100vh;
     width: 100%;
     position: relative; /* All children will be positioned relative to this */
     display: block;
     overflow: hidden;
   }
   .background-animating {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image: url("/bravocon/media/images/header/bkg_1.png");
         background-size: cover;
         background-position: center;
         opacity: 0.2; /* Start with 0 opacity */
         filter: blur(20px); /* Start with heavy blur */
         animation: bgFlashFade 5.2s ease-in-out forwards 1s; /* Updated animation */
         z-index: -2; /* Lowest z-index to place it behind the other layers */
    }

    .background-static {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background-image: url("/bravocon/media/images/header/bkg_2.png");
             background-size: cover;
             background-position: top center;
             z-index: -1; /* A higher z-index than the animating background */
    }


/* Keyframes for the background's opacity and blur animation */
@keyframes bgFlashFade {
  0% { 
    opacity: 0.2; 
    filter: blur(20px);
  }
  28.85% { 
    opacity: 1; 
    filter: blur(0px); /* 1.5s into a 5.2s animation - blur removed */
  }
  76.92% { 
    opacity: 1; 
    filter: blur(0px); /* 4s into a 5.2s animation (3s hold) */
  }
  88.46% { 
    opacity: 0.4; 
    filter: blur(0px); /* 4.6s into a 5.2s animation (0.6s quick fade) */
  }
  92.0% { 
    opacity: 1; 
    filter: blur(0px); /* 4s into a 5.2s animation (3s hold) */
  }
  100% { 
    opacity: 1; 
    filter: blur(0px); /* 5.2s into a 5.2s animation (0.6s fade back up) */
  }
}


.header-content {
      /* This container holds the content and is positioned on top of the padded area. */
      position: absolute;
      top: 0;
      left: 0;
      width: calc(50% - 0rem);
      height: calc(100% - 4rem);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-end ;
      color: white;
      font-size: clamp(18px, 1.5vw, 32px);
      opacity: 0; /* Starts with 0 opacity for the fade-in effect */
      animation: fadeIn 1s ease-in-out forwards 0.5s; /* Applies the animation with a delay */
}
/* Keyframes for the fade-in animation */
   @keyframes fadeIn {
     from {
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }
.header-content-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: white;
      margin-left: clamp(24px, 10vw, 9999px);
      /* margin-top: clamp(24px, 1vw, 9999px); */
}


.header-content picture {
    width: 100%; /* Ensures it scales down responsively */
    align-self: flex-start; /* Aligns the picture to the left side of the container */
    padding-bottom: 3.5vw;
}

.header-content img {
    max-width: 407px; /* Sets the maximum width of the image */
    width: 60%; /* Ensures the image scales down responsively */
    height: auto; /* Maintains the image's aspect ratio */
    margin-bottom: 12vh;
}

.header-content h1 {
    text-align: left;
    font-size: clamp(42px, 6vw, 112px);
    font-weight: 900;
    line-height: 0.84;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.header-content p {
    width: 100%;
    text-align: left;
    margin-bottom: 1rem;
    font-size: clamp(20px, 3vw, 36px);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.header-content span {
    text-transform: uppercase;
    width: 100%;
    text-align: left;
    margin-top: -1rem;
}
.header-content span a {
    color: #7BFFF3;
}
.subscribe-now-container {margin-top: 24px;}
.subscribe-now button {
  background-color: #7BFFF3;
  color: #000;
  border: none;
  padding: 10px 50px;
  border-radius: 8px;
  text-transform: uppercase;
  font-size: clamp(16px, 3vw, 36px);
  margin-top: 0px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}


.messaging.inner.thank-you {
  margin: 1em auto 2em;
}

.thank-you h1 {
  display: block !important;
  color: #ed1d25;
  font-size: 48px;
  line-height: 1em;
  font-weight: 700;
  margin-bottom: 0.0em;
}

.messaging {
    font-size: 24px;
    position: relative;
    padding: 0rem 1rem;
    /* display: flex; */
    align-items: center;
    justify-content: center;
    overflow: hidden;

    }

  .messaging .inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 45ch;
    margin: 0 auto;
    text-align: center;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.2px;
  }

.form .messaging {
    margin: 0px auto;
    position: relative;
    padding: 0rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    max-width: 800px;
    text-align: center;
  }

  .form .messaging.inner {
    font-weight: 600;
  }





  .prize-details {
    background-color: #6043E6;
    box-shadow: 20px 20px 50px 0px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: stretch;
    color: #FFF;
    justify-content: flex-start;
    gap: 0rem;
    margin: 0 0 30px 5%;
    width: 95%;
  }

  .text.right { flex: 1 1 60%; }
  .text.left { flex: 1 1 35%; }


  .text.left {
    background-color: #DB4FF0;
    box-shadow: 20px 20px 50px 0px rgba(0, 0, 0, 0.3);
    order: 1;
  }

  .text.right {
    /* background-color: #6043E6;
    box-shadow: 20px 20px 50px 0px rgba(0, 0, 0, 0.3); */
    order: 2;
    padding: 2rem 0rem ;
    position: relative;
    top: 0rem;
  }
  /*
   * This is the crucial part for making the content readable.
   * It targets the direct children of the .left and .right columns
   * and constrains their width to a maximum of 700px.
   * margin: auto then centers the content within its column.
   */
  .text.left > * {
    max-width: 600px;
    margin: 3rem auto 3rem;
    padding: 1rem;
    width: 85%;
  }
  .text ul {padding-left: 1.5rem;}
  .text li {margin-bottom: 24px;}

  .text.right > * {
    max-width:900px;
    margin: 0 auto 100px;
    padding: 1rem;
    width: 85%;

  }
  
  .prize-details {
    line-height: 1.5; /* Add line height for better readability */
    font-size: clamp(18px, 2vw, 24px);
  }

  .prize-details span {
    font-size: clamp(12px, 1.2vw, 18px);
  }

.prize-details p {
  margin-top: 10px;
}

  h2 {
    font-size: clamp(18px, 3vw, 36px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 700;
    margin: 10px 0px; /* Remove default top margin */
  }

  .prize-details img {
    width: 100%;
    max-width: 300px;
  }

  .bravo-content {
    background-color: #000;
    box-shadow: 20px 20px 50px 0px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: stretch;
    color: #FFF;
    justify-content: flex-start;
    gap: 0rem;
    margin: 0 0 30px 5%;
    width: 95%;
  }
.bravo-content {
    line-height: 1.5; /* Add line height for better readability */
    font-size: clamp(16px, 2vw, 24px);
    text-align: center;
    text-wrap: balance;
  }
  .bravo-content-inner {
    margin: 100px auto; 
    padding-left: 10px;
    padding-right: calc(5% + 10px);
  }
  .bravo-content-inner img {
    width: 100%;
    max-width: 1300px;
    margin: 30px auto;
  }



  /* Ensure iframe and widget container can expand to show all content */
  ._widget {
    overflow: hidden !important;
    height: auto !important;
  }
  
  ._widget iframe {
    overflow: hidden !important;
    border: none !important;
    width: 100% !important;
    height: auto !important;
  }




  .bravo-con-about-container {
    display: flex;
    align-items: stretch;
    color: #FFF;
    margin: 0px auto 30px;
    width: 100%;
    max-width: 1080px;
  }
  .bravo-con-about-inner {
    display: flex;
    text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5%;
  }
  .bravo-con-about-inner img {
    width: 70%;
    margin: 0px auto 30px;
    max-width: 400px;
  }
  .bravo-con-about-inner h2 {
    font-size: 36px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: #FFF;
    text-transform: uppercase;
    font-weight: 700;
    margin: 10px 0px; /* Remove default top margin */
    text-wrap: balance;
  }









.footer__bip-img {
    max-width: 520px;
    margin: 0 auto;
    display: block;
}

.footer__rdm {
    text-align: center;
    padding: 2rem 0;
}

.footer__rdm-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer__rdmLogo {
    display: block;
    margin: 0 auto;
}

.footer__rdmLogo-img {
    max-width: 346px;
    margin: 0 auto;
    display: block;
}

.footer__rdm-copyright {
    text-align: center;
    margin: 0;
    padding: 0.2rem 0;
}

.footer__rdm p {
    margin: 0;
    padding: 0rem 0;
}