/* --- FONT IMPORT (NORD, fallback to Karla/Inter) --- */




/* --- SKILL CHECK CHALLENGE AREA --- */

.challenge-main {
  max-width: 980px;
  margin: 86px auto 0 auto;
  text-align: center;
  padding: 0 18px 72px 18px;
}

.challenge-title {
  font-size: 2.4rem;
  font-weight: 400;
  color: #fff;
  letter-spacing: 0.04em;
  margin-bottom: 25px;
  font-family: 'Karla', 'Inter', Arial, sans-serif;
}

.challenge-subtitle {
  color: #7c8b94;
  font-size: 1.18rem;
  letter-spacing: 0.01em;
  margin-bottom: 98px;
  font-weight: 400;
  font-family: 'Karla', 'Inter', Arial, sans-serif;
}

.challenge-card {
  background: #101b1f;
  border-radius: 32px;
  box-shadow: 0 6px 40px #00d5ff0b;
  padding: 44px 54px 32px 54px;
  margin: 0 auto 42px auto;
  display: flex;
  flex-direction: column;
  gap: 34px;
  max-width: 940px;
  min-width: 320px;
  align-items: flex-start;
}

.challenge-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.challenge-lock {
  width: 32px;
  height: 38px;
  opacity: 0.6;
  cursor: pointer;
  transition: filter 0.2s, opacity 0.2s;
  outline: none;
}
/* treat 'unlocked' as 'not locked' since JS toggles .locked */
.challenge-lock:not(.locked) {
  filter: grayscale(1) brightness(2.6) hue-rotate(160deg) drop-shadow(0 0 6px #00d5ff80);
  opacity: 0.3;
}




.challenge-label {
  font-family: 'NORD', 'Karla', 'Inter', Arial, sans-serif;
  font-size: 45px;
  font-weight: 400;
  letter-spacing: 0.07em;
  margin-right: 8px;
  color: #00d5ff;
  line-height: 1.1;
}

.challenge-value {
  font-family: 'NORD', 'Karla', 'Inter', Arial, sans-serif;
  font-size: 35px;
  font-weight: 500;
  color: #fff;
  margin-left: 4px;
  line-height: 1.1;
}

.challenge-btn {
  margin-top: 46px;
  background: #0ab6d8;
  color: #111;
  border: none;
  border-radius: 2.1rem;
  padding: 12px 54px;
  font-size: 1.26rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  cursor: pointer;
  box-shadow: 0 3px 20px #00d5ff33;
  transition: background 0.14s, transform 0.14s;
  letter-spacing: 0.04em;
  font-family: 'Karla', 'Inter', Arial, sans-serif;
}
.challenge-btn:hover {
  background: #00d0ff;
  transform: translateY(-2px) scale(1.04);
}
.btn-icon {
  font-size: 1.4rem;
  margin-right: 7px;
  vertical-align: middle;
}
.challenge-lock {
  cursor: pointer;
  transition: opacity 0.2s;
}



/* --- Responsive Styles --- */
@media (max-width: 600px) {
  .challenge-main {
    max-width: 100vw;
    padding: 0 3vw 44px 3vw;
  }
  .challenge-card {
    padding: 30px 10px 18px 10px;
    min-width: 0;
    border-radius: 19px;
    gap: 19px;
  }
  .challenge-row {
    gap: 9px;
  }
  .challenge-label {
    font-size: 27px;
  }
  .challenge-value {
    font-size: 20px;
  }
  .challenge-lock {
    width: 18px; height: 18px;
  }
  .challenge-btn {
    padding: 11px 17vw;
    font-size: 1rem;
    margin-top: 24px;
  }
}































/* Position is driven by JS; no fixed left/top here */
.owl-chat-popup{
  position: fixed;
  z-index: 2001;
  display: flex;
  align-items: center;
  pointer-events: none;   /* don’t block owl clicks */
  animation: fadeIn .7s;
}

.owl-chat-img {
  width: 54px;
  height: 54px;
  margin-right: 8px;
  filter: drop-shadow(0 0 14px #00d5ff33);
}

.owl-chat-bubble {
  max-width: 370px;
  background: #101b1f;
  color: #4eb5e1;
  font-family: 'Karla', 'Inter', Arial, sans-serif;
  font-size: 1.08rem;
  border-radius: 7px 22px 22px 22px;
  padding: 18px 25px 18px 22px;
  box-shadow: 0 4px 30px #00d5ff22;
  min-height: 38px;
  display: flex;
  align-items: center;
  line-height: 1.4;
  border: 1.2px solid #00d5ff27;
  opacity: 0.98;
  animation: chatPop 0.45s;
}
@keyframes chatPop {
  0% { opacity: 0; transform: scale(0.86) translateY(10px);}
  100% { opacity: 1; transform: scale(1) translateY(0);}
}
@keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
/* Mobile adjustment */
@media (max-width: 700px) {
  .owl-chat-popup {
    left: 12vw !important;
    top: 82px !important;
    max-width: 90vw;
  }
  .owl-chat-bubble {
    font-size: 1rem;
    padding: 12px 16px;
    max-width: 75vw;
  }
}
























.accept-challenge {
  background: #10d45c !important;
  color: #111 !important;
  box-shadow: 0 3px 20px #33fa893b;
}
.accept-challenge:hover {
  background: #22e26a !important;
}




























.share-design-section {
  margin: 86px auto 0 auto;
  max-width: 700px;
  padding: 60px 16px 120px 16px;
  text-align: center;
}

.share-quote {
  font-size: 1.45rem;
  color: #fcfcfc;
  background: #0B181A;
  border-radius: 18px;
  box-shadow: 0 4px 28px #00d5ff03;
  padding: 48px 40px;
  font-weight: 300;
  font-family: 'Karla', 'Inter', Arial, sans-serif;
  margin: 0 auto;
}

.ig-link {
  color: #089fbd;
  font-weight: 100px;
  text-decoration: none;
  transition: color 0.2s;
  padding: 0 2px;
}
.ig-link:hover {
  color: #00d5ff;
}





































.design-tip-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 60px auto 0 auto;
  padding-bottom: 80px;
}

.tip-card {
  color: #fff;
  max-width: 560px;
  min-width: 320px;
  margin: 0 auto 34px auto;
  padding: 56px 44px 32px 44px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.16s;
}
.tip-card {
  transition: background 0.18s, box-shadow 0.18s;
  /* add for fade effect: */
  opacity: 1;
  transition: opacity 0.35s, background 0.18s, box-shadow 0.18s;
}

.tip-card.fade-out {
  opacity: 0;
}

.tip-card.fade-in {
  opacity: 1;
}

.tip-text {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 32px;
  font-family: 'Karla', 'Inter', Arial, sans-serif;
  line-height: 1.18;
}
.tips-header{
  font-size: 1.8rem;
  font-weight: 200;
  letter-spacing: 0.04em;
  text-align: center;
  margin-top: 62px;
  margin-bottom: 62px;
  font-family: 'Nord', 'Inter', Arial, sans-serif;
  line-height: 1.18;
}

.tip-meta {
  color: #d8edf1;
  text-align: center;
}

.tip-author {
  font-size: 1.13rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.tip-role {
  font-size: 1.03rem;
  font-weight: 400;
  opacity: 0.8;
  letter-spacing: 0.01em;
}

.tip-refresh-btn {
  background: #00d5ff;
  color: #0B181A;
  border: none;
  border-radius: 1.8rem;
  padding: 15px 54px;
  font-size: 1.23rem;
  font-weight: 700;
  margin-top: 12px;
  cursor: pointer;
  box-shadow: 0 2px 14px #00d5ff18;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  font-family: 'karla', 'Inter', Arial, sans-serif;
}
.tip-refresh-btn:hover {
  background: #04e1f8;
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 32px #00d5ff44;
}

/* Responsive */
@media (max-width: 700px) {
  .tip-card {
    max-width: 95vw;
    min-width: 0;
    padding: 30px 8vw 20px 8vw;
    border-radius: 16px;
  }
  .tip-text {
    font-size: 1.15rem;
    margin-bottom: 20px;
  }
  .tip-refresh-btn {
    width: 92vw;
    max-width: 340px;
    font-size: 1.08rem;
    padding: 13px 0;
  }
}

















.tip-download-btn {
  background: #ffffff00;
  border: none;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  margin-top: 44px;
  margin-left: 0;
  cursor: pointer;
  box-shadow: 0 2px 14px #00d5ff24;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, box-shadow 0.18s;
  stroke: #000000;
}
.tip-download-btn:hover,
.tip-download-btn:focus {
  background: #00d5ff2c;
  box-shadow: 0 4px 22px #00d5ff77;
}
.tip-download-btn svg {
  display: block;
  stroke: #578d93;
  transition: stroke 0.18s;
}
.tip-download-btn:hover svg,
.tip-download-btn:focus svg {
  stroke: #00ddff;
}