:root {
--modal-background: linear-gradient(90deg, rgb(16 14 14) 0%, rgb(23 18 18) 100%);
--text: #000000;
--alternate--text: #ffffff;
--background: #ffffff;
--primary: #36cbb5;
--secondary: #332275;
--chat: #415eb3;
--accent: #661ef6;
--alternate-accent: #8bc34a;
--primaryColor: #01bdfe;
--secondaryColor: #fe00fe;
--bgColor: #fff;
--tertiaryColor:  #d8d2df;
--descColor: #000;
}

body {
    font-family: "Roboto", sans-serif;
    overflow-x:hidden;
}


/* General styling */

.logo {
    max-width:100%;
    width:8em;
   }
   
.img {
    max-width:100%;
}

/* Backgrounds */

.secondary-background {
  background-color: var(--secondary);
}

.mainCta {
  background:var(--primary);
  color:var(--text);
}

.secondaryCta {
  background:var(--secondary);
  color:var(--text);
}

.secondaryBg {
  background:var(--secondary);
}

.accentBackground {
 background:var(--accent); 
}

.accent {
  color:var(--accent);
}

.altAccent {
  color:var(--alternate-accent);
}

/* Hero */

.hero {
  filter: brightness(0.3), grayscale(1);
}


/* Card styles */


.cardStyle {
  filter:brightness(0.8);
}


.cardStyle {
  filter:brightness(1.0);
}

/* Footer */

.footerStyle {
    background:var(--third-bg-color);
}

.footerHoverResponse {
  transition:ease-out 200ms;
}

.footerHoverResponse:hover {
  text-decoration:underline;
}


.modalBackground {
    background: var(--modal-background);
}


/* Navbar specific classes */
.hoverResponse {
    transition:ease-out 200ms;
}
.hoverResponse:hover {
    text-decoration:underline;
}

.navUnderline {
  color:#ffffff;
  transition:ease-out 200ms;
}

.navUnderline:hover{
  text-decoration: underline;
}



/* CTA */

.hoverResponseChat {
  background:var(--chat) !important;
  transition:ease-out 200ms;
}
.hoverResponseChat:hover {
background:var(--primary) !important;
  text-decoration:underline;
}



/* Font classes */
.roboto-thin {
    font-family: "Roboto", system-ui;
    font-weight: 100;
    font-style: normal;
  }
  
  .roboto-light {
    font-family: "Roboto", system-ui;
    font-weight: 300;
    font-style: normal;
  }
  
  .roboto-regular {
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: normal;
  }
  
  .roboto-medium {
    font-family: "Roboto", system-ui;
    font-weight: 500;
    font-style: normal;
  }
  
  .roboto-bold {
    font-family: "Roboto", system-ui;
    font-weight: 700;
    font-style: normal;
  }
  
  .roboto-black {
    font-family: "Roboto", system-ui;
    font-weight: 900;
    font-style: normal;
  }
  
  .roboto-thin-italic {
    font-family: "Roboto", system-ui;
    font-weight: 100;
    font-style: italic;
  }
  
  .roboto-light-italic {
    font-family: "Roboto", system-ui;
    font-weight: 300;
    font-style: italic;
  }
  
  .roboto-regular-italic {
    font-family: "Roboto", system-ui;
    font-weight: 400;
    font-style: italic;
  }
  
  .roboto-medium-italic {
    font-family: "Roboto", system-ui;
    font-weight: 500;
    font-style: italic;
  }
  
  .roboto-bold-italic {
    font-family: "Roboto", system-ui;
    font-weight: 700;
    font-style: italic;
  }
  
  .roboto-black-italic {
    font-family: "Roboto", system-ui;
    font-weight: 900;
    font-style: italic;
  }
  
  :root {
    /* Interactive */
    --chatButton:#415eb3;
    --chatButtonHighlight:#5274d8;
    --navbarButton:#000000;
    --navbarButtonHighlight:hsl(0, 79%, 39%);
    --callToActionButton:#407e8f;
    --callToActionHighlight:#6da7b7;
    --offerCTA:#65b430b8;
    --offerCTAAlternative:#559e25b8;
    /* Background */
    --background: hsl(0, 0%, 100%);
    /* Text */
    --text: #3a3a3a;
    --alternate--text: #e4e4e4;
    --header-text:#424242;
    /* Other */
    --primary: #00BDFE;
    --secondary: #00BDFE;
    --tertiary: #c56e11;
    --quartery: #001431;
    --accent: rgb(231 80 62);
    --alternate-accent: #8bc34a;
    }
    
  /* ---------------------------- */
  
  body{
    padding-bottom: 0;
    margin: 0;
  }
  
  img {
    max-width: 100%;
  }
  
  a {
    text-decoration: none;
  }
  
  .height_mapping {
    z-index: -50;
  }
  
  .logo {
    max-width:100%;
    width:6em;
    padding:5px;
   }
   
  .img {
    max-width:100%;
  }
  .offerImg > a > img {
    max-height:200px;
  }
  
  .offer_wrapper {
    outline: #3c643e;
    outline-width: 1px;
    outline-style: solid;
  }
  
  .offer_wrapper > a > img {
    transition:500ms ease-in-out;
  }
  
  .offer_wrapper > a > img:hover {
    filter:grayscale();
  }
  
  /* ---------------------------- */
  
  .divider_content {
      outline: #fb4101;
      outline-width: medium;
      outline-style: solid;
      font-weight: bold;
  }
  
  
  /* ---------------------------- */
  
  .background {
    background-color:var(--background);
  }
  
  .offerBackground {
    background: rgb(201,155,163);
    background: -moz-linear-gradient(43deg, rgba(201,155,163,0.7287289915966386) 0%, rgba(233,102,132,0.6811099439775911) 52%, rgba(228,29,60,0.6306897759103641) 100%);
    background: -webkit-linear-gradient(43deg, rgba(201,155,163,0.7287289915966386) 0%, rgba(233,102,132,0.6811099439775911) 52%, rgba(228,29,60,0.6306897759103641) 100%);
    background: linear-gradient(43deg, rgba(201,155,163,0.7287289915966386) 0%, rgba(233,102,132,0.6811099439775911) 52%, rgba(228,29,60,0.6306897759103641) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c99ba3",endColorstr="#e41d3c",GradientType=1);
  }
  
  
  .footerBackground {
    background-color:var(--quartery);
  }
  
  .alternateBackground {
    background: var(--alternate-background);
  }
  
  .alternateBackgroundFlip {
    background: var(--alternate-background-flip);
  }
  
  .lightBackground {
    background: var(--light-background);
  }
  .alternateLightBackground {
    background: var(--alternate-light-background);
  }
  
  /* ---------------------------- */
  
  /* ---------------------------- */
  
  .chatButton {
      background:var(--chatButton) !important;
      transition:ease-out 200ms;
    }
    
  .chatButton:hover {
      background:var(--chatButtonHighlight) !important;
      text-decoration:underline;
  }
  
  .callToActionButton {
    background:var(--callToActionButton);
    transition:ease-out 200ms;
  }
  
  .callToActionButton:hover {
    background:var(--callToActionHighlight);
  }
  
  .offerCTA {
    border:none;
    background-color: var(--offerCTA);
    color: rgb(236, 236, 236);
  }
  
  .offerCTA:hover {
    transition:0.5s ease-in-out;
    background-color: var(--offerCTAAlternative);
    color: rgb(236, 236, 236);
  }
  
  
  /* ---------------------------- */
  
  /* ---------------------------- */
  
  .hero {
    filter: brightness(0.3), grayscale(1);
  }
  
  /* ---------------------------- */
  
  
  /* ---------------------------- */
  
  .navbar {
    box-shadow: 0 1px 15px rgba(0,0,0,0.5);
  }
  
  .hoverResponse {
    transition:ease-out 200ms;
  }
  .hoverResponse:hover {
    text-decoration:underline;
  }
  
  .navUnderline {
  color:#ffffff;
  transition:ease-out 200ms;
  }
  
  .navUnderline:hover{
  text-decoration: underline;
  }
  
  .navBackground {
  background:var(--quartery);
  }
  
  /* ---------------------------- */
  
  
  .headerText {
    color:var(--header-text);
  }
  
  .headerTextAlternate {
    color:var(--header-text);
  }
  .text {
    color:var(--text);
  }
  
  .text_alternate {
    color:var(--alternate--text);
  }
  
  /* ---------------------------- */
  
  footer p, .upper-footer p{
    margin-bottom: 0;
    color: #fff;
  }
  
  footer {
    background-color: #0e5b61;
  }
  
  footer a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
  }
  
  footer a:hover {
    color: #f1f1f1;
  }
  
  footer, footer a, footer p {
    font-size: 12px;
    font-family: 'Roboto Condensed', sans-serif;
  }
  
  .upper-footer {
    background-color: #222;
  }
  
.top-header-area {
  position: relative;
  z-index: 1;
  background-color: #fff !important;
  width: 100%;
  color: #fff;
}

/* ---------------------------- */
/* Games Joy Figma frames (2026-10-23) */

/* The nav floats over the image: all corners rounded, and the page cards start 12px underneath it */
.site-navbar {
  border-radius: 12px !important;
  z-index: 2;
}

/* The logo sits straight on the white nav, without the black pill */
.site-navbar .site-navbar-brand {
  padding: 0 0 0 8px !important;
  background-color: transparent !important;
}

.site-navbar .site-navbar-logo {
  width: 168px !important;
}

.hero-card,
.signup-card,
.login-card,
.cancel-card {
  margin-top: -12px !important;
}

/* The hero's white panel overlaps the image too, with rounded top corners */
.hero-panel {
  position: relative;
  margin-top: -12px;
  background-color: #fff;
  border-radius: 12px 12px 0 0;
}

/* "Try Now" is black, not grey */
.section-one-cta,
.section-one-cta-arrow {
  color: #000 !important;
}

/* The frame crops main.png towards its bottom, not the middle */
.section-four-img {
  object-position: 50% 75% !important;
}

/* The login frame's Sign Up link is orange (#FF9940), not the page colour */
.login-signup a {
  color: #FF9940 !important;
}

@media (min-width: 992px) {
  .site-navbar,
  .site-navbar .site-navbar-container {
    min-height: 63px !important;
  }

  .hero-banner {
    min-height: 411px !important;
    padding: 12px 22px 23px !important;
  }

  .signup-banner,
  .login-banner,
  .cancel-banner {
    min-height: 178px !important;
    padding-bottom: 6px !important;
  }

  .section-one {
    padding: 120px 0 63px !important;
  }

  .section-one-cta {
    margin-top: 38px !important;
  }

  .section-three {
    padding-bottom: 67px !important;
  }

  #signup-form {
    padding: 70px 0 60px !important;
  }

  .login-body {
    padding: 70px 0 54px !important;
  }

  .cancel-body {
    padding: 63px 0 61px !important;
  }

  .signup-section {
    padding-bottom: 61px !important;
  }

  .login-section {
    padding-bottom: 52px !important;
  }

  .cancel-section {
    padding-bottom: 55px !important;
  }
}

/* Below 992px the banners keep the template's sizes plus the 12px hidden under the nav (and under the hero panel) */
@media (max-width: 991.98px) {
  .hero-banner {
    min-height: 324px !important;
    padding: 42px 24px 32px !important;
  }

  .signup-banner,
  .login-banner,
  .cancel-banner {
    min-height: 176px !important;
    padding-top: 24px !important;
  }
}

@media (max-width: 767.98px) {
  .hero-banner {
    min-height: 244px !important;
    padding: 44px 20px !important;
  }

  .signup-banner,
  .login-banner,
  .cancel-banner {
    min-height: 132px !important;
    padding-top: 20px !important;
  }

  .cancel-banner {
    padding-top: 28px !important;
  }
}

  /* ---------------------------- */