@font-face {
  font-family: 'Radley';
  src: url('./Radley.woff2') format('woff2'),
       url('./Radley.ttf') format('truetype');
     font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('./Raleway.woff2') format('woff2'),
       url('./Raleway.ttf') format('truetype');

     font-display: swap;
}
@font-face {
  font-family: 'Rampart One';
  src: url('./RampartOne-Regular.woff2') format('woff2'),
       url('./RampartOne-Regular.ttf') format('truetype');
     font-display: swap;
}
@import "tailwindcss";
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Hide the scrollbar track but keep the thumb visible */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #AD1519;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8b0f14;
}

/* Hide the scrollbar track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* For Firefox */
scrollbar-width: thin;
scrollbar-color: #AD1519 transparent;

/* For Internet Explorer & Microsoft Edge */
body {
  top: 0 !important;
  scrollbar-face-color: #AD1519;
  scrollbar-track-color: transparent;
}

/* Make the scrollbar overlay the content */
html {
  background: #FFF9DA;
}

body {
  overflow-y: auto;
}

.rampart-one-regular {
  font-family: "Rampart One", serif;
  font-weight: 400;
  font-style: normal;
  color: black;
  line-height: 0;
  
}
body{
  background: #FFF9DA;

}
section * {
  all: revert;
}


.radley-regular-italic {
  font-family: "Radley", serif;
  font-weight: 400;
  font-style: italic;
}

@keyframes scaleBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.animate-bounce-scale {
  animation: scaleBounce 0.2s ease-in-out;
}

.font-open-sans {
  font-family: 'Open Sans', sans-serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
    background-color: white; /* Keep white in the middle */
  }
  100% {
    transform: rotateY(0deg);
  }
}

.flip-animation {
  animation: flip 0.5s ease-in-out forwards;
}

.color-green {
  background-color: #538d4e;
}

.color-yellow {
  background-color: #b59f3b;
}

.color-gray {
  background-color: gray;
}

.container-benefit {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  width: 90%;
  margin-left:auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.left-content {
  flex: 2;
  color: black; /* Text is black */
}
.right-image {
  max-width: 35%;
}
.responsive-img {
  max-width: 100%;
  height: auto;
}
.bullets-img {
  width: 14px;
  height: auto;
}
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .left-content {
    max-width: 100%; /* Full width */
  }
  .right-image {
    display: none; /* Hide image */
  }
}
.custom-list {
  list-style: none; /* Remove default bullets */
  padding-left: 0;
}

.custom-list li {
  display: flex;
  gap: 6px; /* Reduce spacing for a compact look */
  margin-bottom: 8px; /* Adjust spacing between list items */
}

.custom-list li::before {
  content: "";
  display: inline-block;
  width: 14px; /* Set minimum width */
  height: 14px; /* Set minimum height */
  min-width: 14px;
  min-height: 14px;
  margin-top: 6px;
  max-width: 14px;
  max-height: 14px;
  background-image: url('data:image/svg+xml,<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.1754 7.98675L0.459275 15.3799C0.178885 15.5127 -0.101495 15.2028 0.0460746 14.9372L3.79433 7.85395C3.85333 7.76535 3.85333 7.64735 3.79433 7.55875L0.0460746 0.475458C-0.101495 0.209828 0.178885 -0.100063 0.459275 0.0327474L16.1754 7.42595C16.4262 7.52925 16.4262 7.88345 16.1754 7.98675Z" fill="%23DA121A"/><path d="M0.0462859 0.47551L3.79455 7.55888C3.80935 7.60308 3.83885 7.66218 3.82405 7.70638H16.3379C16.3379 7.58838 16.2789 7.47028 16.1608 7.41128L0.459476 0.0328091C0.179096 -0.100011 -0.116044 0.19513 0.0462859 0.47551Z" fill="%23DD7171"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}


.container-wiw {
  display: flex;
  width: 90%;
  margin-left:auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 10px;
}

.image-left-wiw, .image-right-wiw {
  text-align: center;
}

 .image-right-wiw {
  text-align: center;
}

.image-left-wiw img, .image-right-wiw img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.content-wiw {
  flex: 2;
}

.content-wiw h1 {
  font-size: 28px;
  color: #000;
  margin-bottom: 10px;
}

.content-wiw p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

@media (max-width: 768px) {


  .image-right-wiw {
      display: none;
  }
}
/* General styles */
.features-section {
  text-align: center;
  background-color: #FFD800;
  padding: 50px 20px;
  
}

/* Grid styles */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  gap: 0px; /* Ensure dividers align properly */
  position: relative;
  align-items: stretch; /* Ensures equal height columns */
  width: 95%;
}

/* Feature box styles */
.feature-box {
  padding: 20px;
  text-align: center;
  position: relative; /* Needed for dividers */
  display: flex;
  flex-direction: column;
}

/* Vertical dividers: Only apply within each row */
.feature-box:nth-child(3n+1)::after, /* First column */
.feature-box:nth-child(3n+2)::after { /* Second column */
  content: "";
  position: absolute;
  width: 1px;
  height: 90%; /* Ensure full height */
  top: 0;
  right: 0;
  background-color: #827323;
}

/* Horizontal dividers: Only apply between rows */
.feature-box:nth-child(n+4)::before { /* Applies from the second row onward */
  content: "";
  position: absolute;
  width: 90%;
  height: 1px;
  top: -10px; /* Adjust position */
  left: 5%;
  background-color: #827323;
}

/* Icon styling */
.feature-icon {
  font-size: 40px;
  margin-bottom: 10px;
}
.feature-icon span{
  font-size: 30px !important;
}

/* Title and text styling */
.feature-title {
  font-size: 18px;
  font-weight: bold;
  color: #000;
  width: 90%;
  margin: auto;
}

.features-subtitle {
  width: 90%;
  margin: auto;
}
.feature-text {
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .feature-box:nth-child(n+3)::before { /* Applies from the second row onward */
    content: "";
    position: absolute;
    width: 90%;
    height: 1px;
    top: -10px; /* Adjust position */
    left: 5%;
    background-color: #827323;
  }
  
  /* Adjust vertical dividers for a two-column layout */
  .feature-box:nth-child(n)::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 90%; /* Make full height */
    top: 0;
    right: 0;
    background-color: #827323;
  }

  /* Remove vertical dividers from last column */
  .feature-box:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  /* Remove all dividers for a single-column layout */
  .feature-box::after,
  .feature-box::before {
    display: none;
  }
}

.wordle-guide {
  max-width: 900px;
  margin: auto;
}

.content h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.step {
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.step-number {
  font-size: 18px;
  font-weight: bold;
  color: red;
}

.image-container img {
  width: 100%;
  border: 2px solid yellow;
  border-radius: 5px;
  margin-top: 10px;
}

ul {
  padding-left: 20px;
}

.green { color: green; }
.yellow { color: goldenrod; }
.gray { color: gray; }

@media (max-width: 768px) {
  .steps {
      grid-template-columns: 1fr;
  }
}

.how-guide {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}

h2 {
  font-size: 24px;
  font-weight: bold;
}

.how-steps {
  margin-top: 20px;
}

.how-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.how-reverse {
  flex-direction: row-reverse;
}

.how-text {
  width: 45%;
  text-align: left;
}

.how-image {
  width: auto;
  max-width: 50%;
}

.how-image img {
  width: 100%;
}

.how-step-number {
  font-size: 18px;
  font-weight: bold;
  color: white;
  background-color: red;
  padding: 2px 4px 2px 4px;
  border-radius: 6px;
  margin-right: 4px;
  height: fit-content;
  width: 18px;
}
section p {
  margin: 0;
}
.how-grid-step {
  display: grid;
      gap: 13px;
      grid-template-columns: auto 1fr;
}
ul {
  padding-left: 20px;
}

.how-green { color: green; }
.how-yellow { color: goldenrod; }
.how-gray { color: gray; }

@media (max-width: 768px) {
  .how-row {
      flex-direction: column !important;
      text-align: center;
  }

  .how-text, .how-image {
      width: 100%;
      max-width: 100%;
  }
}

.sco-container {
  margin-left: auto;
  margin-right: auto;
  background-color: #FFD800;
  text-align: center;
  padding: 50px 20px;
  position: relative;
  z-index: 1;
}

/* Title */
.sco-title {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 20px;
  margin-top: 0px;
  position: relative;
  z-index: 2;
}

/* Content Layout */
.sco-content {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 90%;
  margin: auto;
  z-index: 2;
}

/* Attempts List */
.sco-attempts {
  width: 55%;
  text-align: left;
}

/* Table Section */
.sco-table {
  width: 30%;
 
  padding: 15px;
}
/* Table Styling */
.sco-table table {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px #00000040;
  border-spacing: 14px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* Table Cells */
.sco-table th, .sco-table td {
  padding: 8px;
  text-align: center;
}
.sco-table td {
  background: #E3CE58D4;

}


/* Header Row */
.sco-table th:first-child {
  border-top-left-radius: 8px; /* Top-left corner */
  background-color: #CFB737;
}

.sco-table th:last-child {
  border-top-right-radius: 8px; /* Top-right corner */
  background-color: #CFB737;
}

/* Last Row */
.sco-table tr:last-child td:first-child {
  border-bottom-left-radius: 8px; /* Bottom-left corner */
}

.sco-table tr:last-child td:last-child {
  border-bottom-right-radius: 8px; /* Bottom-right corner */
}


/* Responsive Styles */
@media (max-width: 768px) {
  .sco-content {
      flex-direction: column;
      align-items: center;
  }

  .sco-attempts, .sco-table {
      width: 100%;
      text-align: center;
  }
}

.faq-container {
  margin-left: auto;
  margin-right: auto;
  padding: 50px 20px;
}

.faq-header {
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.faq-header img {
  width: 24px;
  height: 24px;
}

/* FAQ Styling */
.faq {
  border-radius: 5px;
  margin-top: 10px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  box-shadow: 0px 1px 0.4px 0px #00000033;
}

.faq-question {
  background: white;
  padding: 15px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  font-size: 14px;
  color: #444;
  background: #FFFFFF;
  border-top: 2px solid #00000033;
  border-top-style: dashed;
  transition: max-height 0.2s ease-in-out, padding 0.2s ease-in-out;
}


.faq.active .faq-answer {
  max-height: 200px; /* adjust this value based on your content */
  padding: 15px;
}
.faq-icon {
  font-size: 18px;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.faq.active .faq-icon {
  transform: rotate(180deg);
}

@keyframes borderMove {
  0% {
    clip-path: inset(0% 88% 0% 0%);
  }
  25% {
    clip-path: inset(0% 0% 88% 0%);
  }
  50% {
    clip-path: inset(0% 0% 0% 88%);
  }
  75% {
    clip-path: inset(88% 0% 0% 0%);
  }
  100% {
    clip-path: inset(0% 88% 0% 0%);
  }
}

.animate-border {
  animation: borderMove 2s linear infinite;

}

.border-btn {
  position: relative;
  border-radius: 9999px; /* Full rounded */
}

.border-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #DA121A, rgba(218, 18, 26, 0.5), #DA121A);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: destination-out;
  animation: borderMove 2s linear infinite;
}
#mobile-menu {
  transition: transform 0.3s ease-out, top 0.3s ease-out;
  -webkit-backface-visibility: hidden;
}

.skiptranslate, #goog-gt-tt {
  display: none !important;
  visibility: hidden !important;
}

.blog-content {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #222;
  font-size: 1rem;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.blog-content p {
  margin-bottom: 1em;
}

.blog-content ul,
.blog-content ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
  list-style: initial;
}

.blog-content a {
  color: #0066cc;
  text-decoration: underline;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 1em 0;
}