/* ==========================================
   Root Variables
   ========================================== */
:root {
  --rl-green:   #00C4B3;
  --rl-yellow:  #FFD633;
  --rl-blue:    #0591FD;
  --rl-pink:    #FF72AD;
  --rl-text:    #30302E;
  --rl-bg:      #F6F6F6;
  --rl-bg-alt:  #f8f9fa;
  --light-grey: #ededed;

  /* Map Bootstrap accents */
  --bs-primary: var(--rl-blue);
  --bs-body-color: var(--rl-text);
  --bs-body-bg: var(--rl-bg);
}

/* ==========================================
   Base Styles
   ========================================== */
body {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--rl-text);
  background-color: var(--rl-bg);
}

a {
  color: var(--rl-blue);
  text-decoration: none;
}
a:hover {
  color: var(--rl-green);
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--rl-text);
  margin-bottom: .75rem;
}

p {
  margin-bottom: 1rem;
}

/* ==========================================
   Bootstrap Overrides
   ========================================== */
.btn-primary {
  background: var(--rl-blue);
  border-color: var(--rl-blue);
}
.btn-primary:hover {
  background: var(--rl-green);
  border-color: var(--rl-green);
}

.badge.text-bg-primary {
  background: var(--rl-blue) !important;
}

.navbar {
  background-color: var(--rl-bg-alt);
}

/* ==========================================
   Utility Accent Classes
   ========================================== */
.accent-green { background-color: var(--rl-green); color: #fff; }
.accent-yellow { background-color: var(--rl-yellow); color: #000; }
.accent-blue { background-color: var(--rl-blue); color: #fff; }
.accent-pink { background-color: var(--rl-pink); color: #fff; }

.color-green { color: var(--rl-green); }
.color-yellow { color: var(--rl-yellow); }
.color-blue { color: var(--rl-blue); }
.color-pink { color: var(--rl-pink); }

.bg-grey { background-color: var(--light-grey); }
.btn.rounded-xxl.accent-yellow {
  transition: all ease-in 0.3s;
}
.btn.rounded-xxl.accent-yellow:hover, .btn.accent-yellow:hover{
  background: var(--rl-blue);
  color: #fff;
  text-decoration: none;

}
@media (max-width: 991px) {
  .btn.rounded-xxl.accent-yellow {
    width: 100% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}
/* Light background utility classes */
.bg-alt { background-color: var(--rl-bg-alt); }

/* ==========================================
   Helpers
   ========================================== */
.section-padding {
  padding: 4rem 0;
}
.text-accent {
  color: var(--rl-blue);
}
.rounded-xl {
  border-radius: 1rem !important;
}
.shadow-light {
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

p {
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 166.667% */
}

p.larger {

  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 120% */
}

.rounded-xxl {
  border-radius: 50px;
}

.px-5 {
    padding-right: 5rem !important;
    padding-left: 5rem !important;
}
.px-6 {
    padding-right: 6rem !important;
    padding-left: 6rem !important;
}
.px-7 {
    padding-right: 7rem !important;
    padding-left: 7rem !important;
}

#header {
  background: #EFEFEF;
  box-shadow: 15px 25px 60px 0 rgba(0, 0, 0, 0.10);
}

#header .logo {
  max-width: 125px;
  height: auto;
}

#hero-banner h1 {
  font-size: 4em !important;
  line-height: 1.3em;
}

#hero-banner h2 {
  font-size: 2.4em !important;
}

#hero-banner-content {
  margin: 0 auto;
  max-width:  960px;
  width: 100%;
}

#hero-banner-container .off-top-left, #our-story-container .off-top-left {
  position: absolute;
  top: -75px;
  left: -85px;
  width: 400px;
  height: auto;
}

#hero-banner-container .off-right, #our-story-container .off-right {
  position: absolute;
  top: 50%;
  bottom: 50%;
  right: -60px;
  width: 250px;
  height: auto;
}
@media (max-width: 991px) {
  #hero-banner h1 {
    font-size: 2.4em !important;
    line-height: 1.2em;
  }

  #hero-banner h2 {
    font-size: 1.5em !important;
  }

  #hero-banner-content {
    margin: 0 auto;
    max-width:  960px;
    width: 100%;
  }

  #hero-banner .ellipse::before {
    left: -5px;
    top: 0px;
     background: url('../images/ellipse-small.svg') no-repeat;
  }
}

.green-block {
  position: relative;
  z-index: 2 !important;
}
.green-block::before {
  content: "";
  position: absolute;
  background: var(--rl-green);
  width: 110%;
  height: 100%;
  left: -8px;
  top: 0px;
  z-index: -1 !important;
}
.pink-block {
  position: relative;
  z-index: 2 !important;
}
.pink-block::before {
  content: "";
  position: absolute;
  background: var(--rl-pink);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: -1 !important;
}
#hero-banner .green-block::before {
  width: 110%;
  height: 95%;
  left: -30px;
  top: 2px;
}
#what-is-riot .green-block::before {
  width: 105%;
  height: 78%;
  left: -5px;
  top: 6px;
}
.ellipse {
  position: relative;
}
.ellipse::before {
  content: "";
  position: absolute;
  background: url('../images/ellipse.svg') no-repeat;
  width: 120%;
  height: 100%;
  left: -20px;
  top: 15px;

}
#hero-banner .ellipse::before {
  width: 120%;
  height: 100%;
  left: -20px;
  top: 15px;
}

#post-enquiry .ellipse::before {

  width: 140%;
  height: 90%;
  left: -25px;
  top: 10px;
}

@media (max-width: 991px) {

  #hero-banner .ellipse::before {
    left: -5px;
    top: 0px;
     background: url('../images/ellipse-small.svg') no-repeat;
  }

  #hero-banner .green-block::before {

    left: -14px;
  }
  #post-enquiry .ellipse::before {
    background-size: 100% 100%;
    width: 120%;
    height: 90%;
    left: -25px;
    top: 5px;
  }
}




#why-choose-riot .ellipse::before {
  width: 150%;
  height: 120%;
  left: -15px;
  top: 10px;
  background: url('../images/ellipse-small.svg') no-repeat;

}
#what-is-riot .ellipse::before {
  background: url('../images/ellipse-small.svg') no-repeat;
  width: 120%;
  height: 150%;
  left: -20px;
  top: 16px;
  background-size: 100%;

}

#who-we-are .ellipse::before {
  background: url('../images/ellipse-small.svg') no-repeat;
  width: 120%;
  height: 200%;
  left: -5px;
  top: -10px;
  background-size: 100%;

}
#what-is-riot h2,#three-pillars h2, #why-choose-riot h2, #who-we-are h2, #post-enquiry h2, #next-steps h2, #pricing h2, #our-story h2 {
  font-size: 3.5em !important;
  line-height: 1.3em !important;
}
@media (max-width: 991px) {
  #what-is-riot h2,#three-pillars h2, #why-choose-riot h2, #who-we-are h2, #post-enquiry h2, #next-steps h2, #pricing h2, #our-story h2 {
    font-size: 2.8em !important;
    line-height: 1.2em !important;
  }
}

.divider {
  position: absolute;
  height: 100%;
  width: 20px;
  background: url('../images/divider-line-vertical.png') repeat-y;
}
@media (max-width: 992px) {
  .divider {
    width: 100%;
    height: 15px;
    background: url('../images/divider-line.png') repeat-x;
    margin: 50px 0px;
    position: relative;
  }
}
#three-pillars .card {
  border-radius: 0px 0px 8px 8px;
  border-color: var(--rl-text);  
  border-top: 5px solid;
}
#pricing .card {
  border-radius: 0px 0px 8px 8px;
  border-color: var(--rl-text);  
  border-top: 5px solid;
}
#three-pillars .card.yellow {
  border-top-color: var(--rl-yellow);
}
#three-pillars .card.yellow .card-counter span{
  color: var(--rl-yellow);
}
#three-pillars .card.green {
  border-top-color: var(--rl-green);
}
#three-pillars .card.green .card-counter span{
  color: var(--rl-green);
}
#three-pillars .card.pink {
  border-top-color: var(--rl-pink);
}
#three-pillars .card.pink .card-counter span{
  color: var(--rl-pink);
}
#three-pillars .card-counter {
  position: relative;
  width: 100%;
}
#three-pillars .card-counter span {
  position: absolute;
  left: 0;
  right: 0;
  padding-left: 10px;
  margin: 0 auto;
  top: -10px;
  height: 15px;
  width: 15px;
  color: #fff;
}

#three-pillars .card.pink .card-counter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -40px;
  width: 70px;
  height: 70px;
  background: url('../images/pink-marker.svg') no-repeat center;
  background-size: contain;
}
#three-pillars .card.yellow .card-counter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -40px;
  width: 70px;
  height: 70px;
  background: url('../images/yellow-marker.svg') no-repeat center;
  background-size: contain;
}
#three-pillars .card.green .card-counter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -40px;
  width: 70px;
  height: 70px;
  background: url('../images/green-marker.svg') no-repeat center;
  background-size: contain;
}
#three-pillars .card-header {
  color: #30302E;
  text-align: center;
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; /* 120% */
  background: transparent;
  border: none;
  padding: 50px 50px 15px;
}
#three-pillars .card-body {
  padding: 10px 30px 35px 30px;

}
#three-pillars .card-body p {
 /*color: #989899;*/
  text-align: center;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

#pricing .card {
  background: none;
}
#pricing .card-header {
  height: 160px !important;
}

#pricing .card.blank, #pricing .card-header {
  border: none !important;
  background: none !important;
}
#pricing .card  ul {
  list-style: none;
  padding-left: 0px;
}
#pricing .card li {
  line-height: 60px;
  text-align: center;
}
ul.pricing-titles li.text-end {
    line-height: 30px !important;
    height: 60px;
    display: flex;
    justify-self: end;
    align-items: center;
}
#pricing .card li span { width: 75%; font-size: 14px; padding-right: 10px; line-height: 40px;}
#pricing .card li i {
  color: #fff;
  font-size: 40px;
}
#pricing .card.yellow {
  background: var(--rl-yellow);
}

#pricing .card.green {
  background: var(--rl-green);
}

#pricing .card.pink {
  background: var(--rl-pink);
}

#pricing .card.blue {
  background: var(--rl-blue);
}

#pricing .card-counter {
  position: relative;
  width: 100%;
}
#pricing .card-counter span {
  position: absolute;
  left: 0;
  right: 0;
  padding-left: 10px;
  margin: 0 auto;
  top: -10px;
  height: 15px;
  width: 15px;
  color: #fff;
}

#pricing .card.pink .card-counter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -40px;
  width: 70px;
  height: 70px;
  background: url('../images/pink-marker.svg') no-repeat center;
  background-size: contain;
}
#pricing .card.yellow .card-counter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -40px;
  width: 70px;
  height: 70px;
  background: url('../images/yellow-marker.svg') no-repeat center;
  background-size: contain;
}
#pricing .card.green .card-counter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -40px;
  width: 70px;
  height: 70px;
  background: url('../images/green-marker.svg') no-repeat center;
  background-size: contain;
}
#pricing .card.blue .card-counter::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -40px;
  width: 70px;
  height: 70px;
  background: url('../images/blue-marker.svg') no-repeat center;
  background-size: contain;
}

#pricing .card .card-counter::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  top:-5px;
  background: var(--rl-text);
  z-index: 10;
};

#why-choose-riot .card, #who-we-are .card {
  border: none !important;
}

#why-choose-riot .card-header img {
  height: 70px;
  padding-bottom: 15px;
  width: auto;
}
#why-choose-riot .card-header {
  background: transparent;
  height: 150px;
  /*padding: 10px 0px !important;*/
  border-bottom: none;
}

/* Remove all card borders/lines just in the Why Choose Riot section */
#why-choose-riot .card, #who-we-are .card {
  --bs-card-border-width: 0;         /* nukes Bootstrap’s card/ header borders */
  --bs-card-cap-bg: transparent;     /* header bg */
  --bs-card-bg: transparent;         /* card bg */
  --bs-card-border-color: transparent;
  box-shadow: none;
  border: 0 !important;
}

#who-we-are .card a {
  color: var(--rl-text);
}

#why-choose-riot .card-header, #who-we-are .card-header {
  border: 0 !important;              /* ensure no header line */
  background: transparent !important;
}

/* (Optional) If you still see any faint rule due to nested elements) */
#why-choose-riot .card-header,
#why-choose-riot .card-header * {
  border: 0 !important;
  box-shadow: none !important;
}
#why-choose-riot .card-body  {
 /*color: #989899;*/
  text-align: left;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
/* Hard-disable any borders/outlines/shadows in the Why Choose Riot cards */
#why-choose-riot .card,
#why-choose-riot .card * {
  outline: 0 !important;
  box-shadow: none !important;
}

/* We already removed card borders, but ensure header can’t reintroduce lines */
#why-choose-riot .card-header {
  border: 0 !important;
  background: transparent !important;
}

/* Kill any img borders/outlines (some browsers/extensions add outlines on focus) */
#why-choose-riot .card-header img {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* If a pseudo-element is drawing the lines, remove them */
#why-choose-riot .card-header::before,
#why-choose-riot .card-header::after {
  content: none !important;
}
#who-we-are .card-header {
  background: transparent;
  border-bottom: none;
}

ul.differences-list {
  list-style: none;
  padding-left: 5rem; /* add space for the image */
}

ul.differences-list li {
  position: relative;
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  line-height: 1.5rem;
  color: var(--rl-green);
}

ul.differences-list li::before {
  content: "";
  position: absolute;
  left: -5rem;
  top: 0.4rem;
  width: 50px;
  height: 50px;
  background: url('../images/check1.svg') no-repeat center;
  background-size: contain;
}


ul.post-enquiry-list {
  list-style: none;
  padding-left: 5rem; /* add space for the image */
}

ul.post-enquiry-list li {
  position: relative;
   padding-top: 1.5rem;
  margin-bottom: 1.5rem;
  line-height: 1.5rem;
  color: var(--rl-blue);
}

ul.post-enquiry-list li::before {
  content: "";
  position: absolute;
  left: -5rem;
  top: 0.4rem;
  width: 50px;
  height: 50px;
  background: url('../images/check2.svg') no-repeat center;
  background-size: contain;
}


/* --- Glitch v2.2: block-safe headings, highlight overlays on ::after --- */
@media (prefers-reduced-motion: no-preference) {
  /* TEXT GLITCH: only pseudo layers move, real text stays block-level */
  #hero-banner .glitch-text.glitch-run {
    position: relative;     /* natural display (block for h1/h2/h3) */
    animation: none;        /* no transform on the real text */
  }
  #hero-banner .glitch-text.glitch-run::before,
  #hero-banner .glitch-text.glitch-run::after {
    content: attr(data-text);
    position: absolute; inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  #hero-banner .glitch-text.glitch-run::before {
    color: #00fff0;
    animation: text-glitch-chroma 900ms steps(14) both;
  }
  #hero-banner .glitch-text.glitch-run::after {
    color: #ff3ea5;
    animation: text-glitch-chroma-rev 900ms steps(15) both;
  }

  /* HIGHLIGHT OVERLAYS: fade-in glow on ::after (leaves ::before untouched) */
  #hero-banner .green-block,
  #hero-banner .ellipse {
    position: relative;
    z-index: 2; /* ensure text above overlays */
  }
  /**/

  /* ---- Keyframes for chroma layers ---- */
  @keyframes text-glitch-chroma {
    0%   { transform: translate(0,0); opacity: .65; clip-path: inset(0 0 0 0); }
    20%  { transform: translate(-2px,-1px); clip-path: inset(0 0 55% 0); }
    40%  { transform: translate(2px,1px);   clip-path: inset(35% 0 0 0); }
    60%  { transform: translate(-1px,0);    clip-path: inset(0 0 25% 0); }
    80%  { transform: translate(1px,0);     clip-path: inset(50% 0 0 0); }
    100% { transform: none; opacity: 0; clip-path: inset(0 0 0 0); }
  }
  @keyframes text-glitch-chroma-rev {
    0%   { transform: translate(0,0); opacity: .55; clip-path: inset(0 0 0 0); }
    18%  { transform: translate(2px,1px);   clip-path: inset(60% 0 0 0); }
    38%  { transform: translate(-2px,-1px); clip-path: inset(0 0 40% 0); }
    58%  { transform: translate(1px,-1px);  clip-path: inset(30% 0 0 0); }
    78%  { transform: translate(-1px,0);    clip-path: inset(0 0 20% 0); }
    100% { transform: none; opacity: 0; clip-path: inset(0 0 0 0); }
  }
}

/* Reduced motion: no glitch, overlays visible by default */
@media (prefers-reduced-motion: reduce) {
  #hero-banner .glitch-text { animation: none !important; }
  #hero-banner .green-block::after,
  #hero-banner .ellipse::after { opacity: 1 !important; }
}

.newsletter-form input { border-radius: 30px; height: 50px;}
.newsletter-form button { border-radius: 30px; height: 50px;}