@font-face {
    font-family: Supercell;
    src: url('../fonts/Supercell.ttf');
}

body{background:white url("../img/bg_pattern.png"); font-family: 'Rubik', sans-serif!important; font-weight:600; font-size:24px;}

a{transition: 0.3s ease-in-out;}
a{color:#0066ff;}
a:hover{color:#d33aff; text-decoration: none;}

/* Global stuff */
.border-radius-15{border-radius: 15px;}
.border-radius-20{border-radius: 20px;}

/* Spacers */
.spacer-25{width: 100%; height: 25px;}
.spacer-50{width: 100%; height: 50px;}
.spacer-100{width: 100%; height: 100px;}

nav{background:blue; font-size: 17px;}
.bg-dark{background-color: rgba(0, 0, 0, 0.6)!important;}
ul.navbar-nav{font-family: 'Supercell';}
ul.navbar-nav li{margin-left:10px;}
ul.navbar-nav li a{display:inline-block;}
ul.navbar-nav li a:hover{color: blue;}



.navbar-dark .navbar-nav .nav-link.cta {
  background: linear-gradient(90deg, #a700ff, #ff74ff, #5400ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




nav a.clashFanaticLogo:hover{opacity: 0.5; transition: 0.25s ease-in-out;}
a.clashFanaticLogo{width: 142px; height: 100px; display: inline-block; background-size: 142px 100px; background-image: url("../img/cfLogoHeader.png");}
nav.blackHeader{background-color: rgba(0, 0, 0, 1)!important;}
nav.blackHeader a.clashFanaticLogo{width: 92px; height: 65px; background-size: 92px 65px;}

.navbar-dark .navbar-nav .nav-link{color: #0066ff;}
.navbar-dark .navbar-nav .nav-link:hover{color: #bc3aff;}
.navbar-dark .navbar-toggler{border: none;}
button.bg-light:hover {background-color: white!important;}

/* Hero */
.hero{font-family: 'Supercell'; color:white; height:700px; background-size:cover;}
.hero.smaller{height: 400px; padding-top: 86px; background-position-x: center;}
.hero .mastCTA img{height:50px;}
.hero h1{font-weight:700; font-size: 35px; margin-bottom: 15px; line-height: 1.5em; text-shadow: 2px 2px black;}
.hero p{margin-bottom: 25px; text-align: left;}
.hero .breadcrumbs{display:block; font-weight: 600; font-family:'Rubik';}
.hero .breadcrumbs a{color: white; border-bottom: 2px solid white;}
.hero.smaller .breadcrumbs a:link{border-bottom: 2px solid white;}
.hero.smaller .breadcrumbs a:hover{border-bottom: 2px solid #006cff; color: #006cff;}
.hero .gold{color: #f9d53c;}

.span-with-icons{display: block; padding-bottom: 10px;}
.span-with-icons::before,
.span-with-icons::after {
  content: "";
  display: inline-block;
  width: 29px;
  height: 55px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.span-with-icons::before {
  margin-right: 5px;
  background-image: url("../img/olive_left.svg");
}

.span-with-icons::after {
  margin-left: 5px;
  background-image: url("../img/olive_right.svg");
}

/* Store Badges */

.storeBadge img {
  transition: all 0.3s ease-in-out;
  transform: scale(1);
}
.storeBadge:hover img {
  transform: scale(1.05);
}


.cfAppIconMast{
  width: 400px;
  height: 400px;
  border-radius: 100px;
  transform: scale(1);
  transition: 0.3s ease-in-out;
}
.cfAppIconMast:hover{transform: scale(1.05); border-radius: 80px;}
.heroAppIconBig a:hover{}


.isometric {
  display: block;
  margin-top: 0; /* initial position */
  animation: slideUpDown 6s ease-in-out infinite; /* adjust duration and timing function as needed */
}

@keyframes slideUpDown {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: -60px; /* slide up */
  }
  100% {
    margin-top: 0; /* slide down */
  }
}



/* homeGray */


/* Typography */

h1, h2, h3, h4, h5{font-family: 'Supercell';}
h1{font-size: 4.5rem;}
h2{font-size: 2.25rem;}
h3{font-size: 1.5rem;}
.uppercaseText{text-transform: uppercase;}
.pinkText{color: #ff1854;}
.purpleText{color: #9c00ff;}
.blueText{color: #003cff;}
.tcpp h1, .tcpp h2, .tcpp h3, .tcpp h4, .tcpp h5{font-family: 'Rubik';}

.blueGradient{
  background: linear-gradient(to right, #0021ff, #006fff);
  background: -webkit-linear-gradient(to right, #0021ff, #006fff);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
a.blueGradient:hover{
  background: linear-gradient(to right, blue, blue);
  background: -webkit-linear-gradient(to right, blue, blue);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
.neonGreenGradient {
  background: linear-gradient(to right, #bef940, #d4f941, #2cee99, #d4f941, #bef940);
  background-size: 200% 100%;
  animation: gradientShift 4s ease-in-out infinite;
}

.extraBold{font-weight:800;}
.bold{font-weight:700;}
p{line-height: 2.5rem;}


.appReview{background:#fafafa; border-radius:10px; box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); padding: 25px; position: relative; min-height: 305px; margin-bottom: 25px; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out;}

.appReview:hover{box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25);}


.appReview.show {opacity: 1; transform: translateY(0);}
.appReview .stars{background-image: url("../img/5stars.svg"); width: 150px; height: 40px; background-repeat: no-repeat;}


.appReview .store{position: absolute; top: 20px; right: 20px; width: 45px; height: 45px; transition: 0.6s ease-in-out;}

.appReview .apple{background: url("../img/appleLogo.svg");}
.appReview .google{background: url("../img/androidLogo.svg");}

.appReview .reviewTitle{font-size: 1.7rem; font-weight: bold; display: block; margin-bottom: 10px;}
.appReview p.reviewBody{font-size: 1.4rem; line-height: 2rem;}
.appReview .reviewSource{font-size: 1.2rem; color: #777;}


a.lineCTA{display:inline-block; height: auto; width: 300px; max-width: 300px; margin: 0 5px; border-bottom: 0;}
a.lineCTA.smaller{width: 200px;}

.lightGray{background: #fafafa;}
.darkerGray{background: #f5f5f5;}


/* Content */

.featureSquares{background:white; box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.03); text-align: center; min-height: 250px; padding: 20px; border-radius: 10px; margin-bottom: 20px;}
.featureSquares:hover{box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.075);}
.featureSquares h3{font-size: 1.75rem; font-weight:700; color:blue; margin-top: 15px;}
.featureSquares p{font-size:20px; line-height: 1.5em;}
.featureSquares img{width: 250px; height: 125px; transition: transform 0.5s ease-in-out;}
.featureSquares:hover img{transform: scale(1.1);}


.appCallout{background:black url("../img/footer_bg.jpg"); color: white; border-radius:30px;}
.appCallout .logo{display: block; text-align: center;max-width: 300px; margin: 0 auto 10px;}
.appCallout.calloutBig{padding: 75px 30px;}
.appCallout.calloutSmall{}
.appCallout p{font-size: 32px;}
.appCallout .phone{width: 239px; height: 500px; position: absolute; display: block; top: 50%; left: 50%; transform: translate(-50%, -50%);}


.disclaimerContent{background:rgba(249, 223, 104, 0.5); border-radius: 10px; padding: 20px; font-size: 80%; margin-top: 20px; border: 2px solid #ffdb31;}
.disclaimerContent p{line-height: 1.5rem; margin-bottom: 0;}

/* Accordion */
.card-header {
    padding: 1.5rem;
    margin-bottom: 0;
    background-color: #005fff;
    border-bottom: none;
    border-radius: 15px!important;
}
.card-header[data-toggle="collapse"] {transition: 0.2s ease-in-out;}
.card-header[data-toggle="collapse"]:hover {background-color: #0081ff;}
.card {margin-bottom: 10px; border: none;}
.card h5{color: white; line-height: 1.75rem;}


/* Footer */
footer{background:black url("../img/footer_bg.jpg"); border-top: 15px solid rgba(0, 0, 0, 0.5); margin-top: 120px; color: white; padding: 40px 0 20px;}
footer p{line-height: 1.5rem;}
footer .tagline{font-size: 21px;}
footer a{color: #006cff;}
footer a:hover{color: white;}
footer ul{list-style:none; padding:0;}
footer ul li{font-size: 16px; margin-bottom: 5px;}
footer .disclaimer{background:rgba(0, 0, 0, 0.6); border-radius: 10px; padding: 30px; font-size: 16px; margin-top: 20px;}
footer .disclaimer a{color: white; text-decoration: underline;}
footer .disclaimer a:hover{color: #006cff;}
footer .disclaimer span{font-size: 23px; display:block; margin-bottom: 5px;}
footer .disclaimer p{margin-bottom: 0;}
footer .copyright{font-size: 16px; font-weight: 500;}
footer .copyright a{color: #88f804;}
footer .copyright a:hover{color: #dbff60}
footer .footerLogo{width: 100%; max-width: 200px;}

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #222;
  color: #fff;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  z-index: 9999;
  box-sizing: border-box;
  line-height: 1.6;
}

#cookie-banner p {
  font-size: 14px;
  margin: 0;
  line-height: 1.5rem;
}

#cookie-banner a {
  color: #bef940;
  text-decoration: underline;
}

#cookie-banner button {
  background-color: #bef940;
  color: #222;
  border: none;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}

#cookie-banner button:hover {
  background-color: #d4f941;
}




@media (min-width: 1200px) {
  .container {
    max-width: 1295px;
  }
}

@media only screen and (max-width : 991px) {
  .cfAppIconMast {
  width: 270px;
  height: 270px;
  border-radius: 60px;
  max-width: 270px;}
}

@media only screen and (max-width: 900px) {
  .display-1 {font-size: 10vw;}
  .display-4 {font-size: 6vw;}
}

@media only screen and (max-width: 767px) {
  /* Hamburger menu present. */
  .hero{height: 600px;padding-top: 50px;}
  .hero .mastCTA img{height: 55px;}
  .hero p{text-align: center;}
  .appCallout{}
  .appCallout p{margin-bottom: 40px;}
  .appCallout.calloutBig{padding: 30px 20px;}
  .appCallout .phone{position: relative; display: block; top: 0; left: 0; transform: translate(0, 0); margin: 0 auto 20px;}
  a.lineCTA{display:block; margin: auto;}
  .appReview{min-height: auto;}
  .featureSquares{margin-bottom: 20px;}
  .featureSquares h3{font-size: 40px;}
  .featureSquares p{font-size: 23px;}
  a.lineCTA img{margin-bottom: 15px;}
  ul.navbar-nav li.nav-item{text-align: center;}
  ul.navbar-nav li.nav-item a{display:block;}
  ul.navbar-nav li{margin-left:0px;}
  .nav-link{padding: 1rem;}
  nav{ font-size: 20px;}
  .appCallout .phone{position: relative;}
  a.lineCTA.smaller {width: 100%; max-width: 350px;}
  footer {margin-top: 100px;}
  footer .footerLogo {max-width: 200px;}
  footer .tagline {font-size: 25px; margin-bottom: 60px; display: block;}
  h1{font-size: 2rem;}
  h2{font-size: 1.5rem;}
  h3{font-size: 1.25rem;}
  .navbar.navbar-expand-md.navbar-dark.bg-dark.fixed-top{ background-color: black!important;}
  .navbar.navbar-expand-md.navbar-dark.bg-dark.fixed-top a.clashFanaticLogo{width: 92px; height: 65px; background-size: 92px 65px;}
  .card h5{font-size: 70%;}
  #cookie-banner p {font-size: 13px;}
  .card-body{font-size: 85%;}
  .neonGreenGradient {background-size: 400% 100%;}

}


@media only screen and (max-width: 408px) {
  body{font-size: 20px;}
  .hero h1 {font-size: 25px;}
  .hero .mastCTA img {margin-bottom: 15px; height: 65px;}
  .hero {height: 550px; padding-top: 85px;}
  p{line-height: 2rem;}
  .appReview p.reviewBody {font-size: 1.25rem; line-height: 1.5rem;}
  .appReview .reviewTitle {font-size: 1.4rem;}
  footer .disclaimer{border-radius: 0;}
  footer{margin-top: 80px;}
  .featureSquares h3{font-size: 30px;}
  .featureSquares p{font-size: 20px;}
  footer .footerLogo{padding: 0 20px;}
}