/*
Theme name: OSCEstop 4
Theme URL: oscestop.education/
Author: Sam Owen
Version: 2.0
*/

/* Table of contense 
1. Fonts / sizing
2. Screen-size
3. Header
4. Footer
5. Buttons
6. Stations
7. Learning
8. Flexbox
9. Homepage fix
10. Qbank
11. Accordion
12. Welcome
13. Search

*/

html *,
html *:before,
html *:after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
}

.welcome-2-sections {
  display: flex;
  justify-content: space-between;
  overflow: hidden; /* or auto, scroll */
  box-sizing: border-box;
  width: 100%;
}

.welcome-2-sections > * {
  flex: 1; /* or another appropriate value */
  min-width: 0; /* ensures items don't grow beyond container */
  max-width: 100%; /* ensures children don't exceed parent */
  margin: 0;
  padding: 0;
}

.two-columns {
  display: flex;
  gap: 50px;
  max-width: 100%; /* Adjust to prevent overflow */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box; /* Include padding and border in width */
}

.two-columns > * {
  flex-shrink: 1; /* Allows items to shrink */
  min-width: 0; /* Prevents items from exceeding container */
}

.two-columns-first {
  width: 30%;
  margin-inline: auto;
  box-sizing: border-box;
}

.qbank-selection {
  flex: 1; /* or another appropriate value */
  min-width: 0; /* Ensures it fits within parent */
  box-sizing: border-box;
}

/* 1. Fonts / sizing */
@font-face {
  font-family: BrandonText-Regular;
  src: url(./fonts/BrandonText-Regular.woff);
}

@font-face {
  font-family: BrandonText;
  src: url(./fonts/Brandon-Text-Bold.woff);
}

body,
p,
li {
  font-family: "BrandonText-Regular" !important;
  color: #353535;
  font-size: clamp(16px, 2vw + 1rem, 20px);
  line-height: clamp(1.3, 1.2 + 0.3vw, 1.5);
  margin-bottom: 0px;
}

strong {
  font-family: "BrandonText";
  font-weight: 400;
  font-size: clamp(16px, 2vw + 1rem, 20px);
  color: #3b3b61;
  line-height: clamp(1.3, 1.2 + 0.3vw, 1.5);
}

h1 {
  font-family: "BrandonText";
  font-size: clamp(28px, 4vw + 1rem, 40px);
  color: #20124d;
  font-weight: 400;
  line-height: clamp(1.2, 1.1 + 0.2vw, 1.3);
}

h2 {
  font-family: "BrandonText";
  font-weight: 400;
  font-size: clamp(24px, 3.5vw + 1rem, 35px);
  color: #20124d;
  line-height: clamp(1.2, 1.1 + 0.2vw, 1.4);
}

h3 {
  font-family: "BrandonText";
  font-weight: 400;
  color: #20124d;
  font-size: clamp(20px, 3vw + 1rem, 30px);
  margin-bottom: 10px;
  line-height: clamp(1.3, 1.1 + 0.2vw, 1.4);
}

h4 {
  font-family: "BrandonText";
  font-weight: 500;
  margin-bottom: 5px;
  font-size: clamp(18px, 2.5vw + 1rem, 25px);
  line-height: clamp(1.3, 1.1 + 0.2vw, 1.4);
}

.content h4 {
  color: #5d28f6;
}

.content h3,
.content h4 {
  margin-top: 50px;
}

.content h3 + h4,
.content h4 + h3 {
  margin-top: 0px;
}

h5 {
  font-family: "BrandonText";
  font-weight: 400;
  font-size: 22px;
  color: #5d28f6;
}

h6 {
  font-family: "BrandonText";
  font-size: 25px !important;
  font-weight: 400;
  color: #20124d;
  margin-top: 50px;
  margin-bottom: 0px;
}

ul {
  margin-top: 0px;
  padding-left: 20px;
}

li {
  font-size: 20px;
  font-family: "BrandonText-Regular";
}

a {
  text-decoration: none !important;
}

s {
  background-color: #fff3d8;
  border-radius: 5px;
  padding-left: 2px;
  padding-right: 3px;
  text-decoration: none !important;
}

.learning-title {
  text-align: center;
  margin-top: 20px; /* Smaller margin for small screens */
  margin-bottom: 20px;
  font-size: 30px; /* Smaller font size for readability on small screens */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Larger screens */
@media screen and (min-width: 768px) {
  .learning-title {
    margin-top: 50px !important; /* Original margin for larger screens */
    margin-bottom: 50px !important;
    font-size: 60px !important; /* Original font size for larger screens */
  }
}

.light-blue {
  color: #5333ee;
}

.svg-size {
  max-width: 30px;
}

.svg-size-20 {
  max-width: 25px;
  display: block;
}

.svg-menu {
  max-width: 15px;
}

/*1.1 comments */

#comment {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
}

.comments-title {
  display: flex;
  align-items: baseline;
  gap: 30px;
}

#comments,
div.comment-author.vcard > img {
  display: none;
}

.comment {
  margin-bottom: 0px;
}

.comment-author,
.fn {
  font-family: "BrandonText";
  font-size: 22px;
  font-style: normal;
}

.comment-body {
  padding: 20px;
}

.comment-meta .commentmetadata {
  font-size: 14px;
}

.comment-meta {
  font-size: 14px;
}

.comment-reply-link {
  font-family: "BrandonText";
  color: white;
  font-size: 16px;
}

.comment-author-vcard-reply-line {
  display: flex;
  justify-content: space-between;
}

section .comments {
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 40px;
}

div.comments-title > h3 {
  margin-top: 0px;
  padding-top: 0px;
}

.comment-reply-title,
.comment-form-url {
  display: none;
}

.icon {
  width: 20px;
}

.comment-form-comment,
.comment-form-author,
.comment-form-email {
  display: grid;
}

#commentform > p.comment-form-comment > label,
#commentform > p.comment-form-author > label,
#commentform > p.comment-form-email > label {
  font-family: "BrandonText";
}

textarea#comment,
input#author,
input#email {
  font-family: "BrandonText-Regular";
  font-size: 20px;
  padding: 20px;
  border: 0px;
  border-radius: 10px;
}

#submit {
  padding: 10px;
  border-radius: 50px;
  display: inline-block;
  font-family: "BrandonText";
  font-size: 18px;
  background: #000;
  color: #fff;
  border: 1px solid #000;
  will-change: transform;
  transition: transform 500ms;
}

#submit:hover {
  cursor: pointer;
  transition: transform 125ms;
  transform: translateY(-5px);
  background-color: #4ac494 !important;
  color: white !important;
  border: 1px solid #4ac494 !important;
}

/*2. Screen-size */

.customize-support {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
}

body {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
}

.inner-1 {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.inner-2 {
  margin-right: auto;
  margin-left: auto;
  max-width: 1170px;
}

.inner-section {
  max-width: inherit;
  margin-left: auto;
  margin-right: auto;
}

.inner {
  width: min(95%, 670px);
  margin-inline: auto;
}

.spacer-desktop {
  margin-bottom: 100px;
}

.two-columns {
  display: flex;
  gap: 50px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.two-columns-first {
  width: 30%;
  margin-inline: auto;
}

.first-column-styling {
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 20px;
  margin-top: 30px;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 50px;
  width: auto;
}

@media (max-width: 1170px) {
  .inner-section {
    margin-left: auto;
    margin-right: auto;
  }
}

/* 3. Navigation menu */

.header-image {
  position: relative;
  top: 8px;
}

.menu-dropdown-box {
  display: none; /* Initially hidden */
  z-index: 1000; /* High z-index to ensure it's on top of other elements */
  background-color: white;
  position: fixed;
  left: 150px;
}

.show-dropdown {
  display: block;
}

.inner-section.blur-content {
  filter: blur(5px); /* Adjust the blur strength as needed */
}

header,
.menu-dropdown-box {
  z-index: 1001; /* Higher than the z-index for the blurred content */
}

.sticky {
  position: sticky;
  z-index: 999;
  background-color: white;
  top: 0;
}

.menu-desktop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

div.menu-items strong {
  color: #282828;
}

.dropdown-icon {
  display: flex;
  background-color: #f5f5f5;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  margin-bottom: 15px;
}

section.menu-dropdown p {
  margin-top: 5px;
}

.menu-dropdown {
  display: flex;
  gap: 50px;
  padding: 10px 10px 0px 10px;
}

.menu-dropdown-box {
  border: 1px solid #5333ed;
  border-radius: 10px;
  width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

.dropdown-section:hover .svg-size-20 {
  background-color: white;
  stroke: #5333ed;
}

.dropdown-section:hover .dropdown-icon {
  background-color: white;
}

.dropdown-section {
  flex: 1;
  text-align: left;
  padding: 20px;
  border: 10px;
  will-change: transform;
  transition: transform 500ms;
}

.dropdown-banner p {
  text-align: center;
  background: #5333ed;
  color: white;
  border-radius: 0px 0px 7px 7px;
  font-family: "BrandonText" !important;
}

.dropdown-section strong {
  color: #5333ed;
}

.dropdown-section p {
  line-height: 1.5;
  font-size: 18px;
}

.dropdown-section:hover {
  background-color: #f9fafb;
  border: 0px solid;
  border-radius: 10px;
  will-change: transform;
  transition: transform 500ms;
  transform: scale(1.05);
  cursor: pointer;
  transition: transform 250ms;
  transform: translateY(15px);
}

.menu-item a {
  font-family: "BrandonText" !important;
  color: #3f3f3f;
  transition: color 0.45s cubic-bezier(0.25, 1, 0.33, 1);
}

.menu-item a :hover {
  background-color: #5333ee !important;
}

.menu-item {
  position: relative;
  transition: color 0.45s cubic-bezier(0.25, 1, 0.33, 1);
  overflow: hidden;
}

.menu-item:hover::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.menu-item:hover {
  color: #fff; /* Change text color on hover if needed */
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border-radius: 50px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.menu-options,
.menu-options-buttons {
  display: flex;
  gap: 8px;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

#menu-logged-in-active {
  margin-bottom: 0px;
}

.current_page_item {
  border-radius: 10px;
}

.current_page_item a {
  color: #22a7ab;
}

.menu-item > a:hover {
  color: #22a7ab !important;
}

.menu li {
  list-style-type: none;
}

.sub-menu {
  display: none;
}

@media (max-width: 1160px) {
  .menu-items {
    display: none;
  }

  .hamburger {
    width: 25px;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 610px) {
  .members-area {
    display: none;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hamburger-menu {
  display: flex;
}

.hamburger-menu .dropdown-content {
  display: none;
  position: absolute;
  left: 50%; /* Center horizontally */
  top: 150px; /* Height of the header */
  width: 90%;
  transform: translateX(-50%); /* Adjust horizontally to truly center */
  z-index: 1000; /* Ensure it's above other content */
  background-color: rgb(255 255 255 / 58%);
  backdrop-filter: blur(12px);
  padding: 50px;
  border: solid 1px blue;
  border-radius: 15px;
}

.dropdown-content.show {
  opacity: 1;
  visibility: visible;
}

.dropdown-content-menu {
  display: grid !important;
  padding: 0px !important;
}

.hamburger-menu .show {
  display: block;
  text-align: center;
}

/* 4. Footer */

#sticky-menu-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #20124d;
  z-index: 1000;
  border-top: 1px solid #f2f2f2;
}

#sticky-menu-bottom ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 5px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

#sticky-menu-bottom ul li {
  padding: 10px;
  display: flex; /* Add this line */
  justify-content: center; /* Horizontally center content */
  align-items: center; /* Vertically center content */
  height: 50px; /* Adjust the height as needed */
}

#sticky-menu-bottom ul li a svg {
  width: 30px; /* Adjust size as needed */
  height: 30px;
  fill: transparent; /* Or another color if you prefer */
  color: #d0d0d0;
  transition: transform 0.3s ease;
}

#sticky-menu-bottom ul li a:hover svg {
  transform: scale(1.2); /* Increase size by 10% on hover */
}

.widget-space {
  font-family: "BrandonText" !important;
}

.footer-section-2 h4,
.footer-section-3 h4 {
  margin-bottom: 7px;
  margin-top: 0px;
}

.footer-content .hover-underline-animation {
  margin-top: 5px;
}

.footer-area {
  margin-top: 100px;
  background-color: #f9f9f9;
  padding: 70px;
  border-radius: 50px;
  margin-bottom: 50px;
}

.select-a-category {
  background-color: white;
  padding: 20px;
  border-radius: 50px;
  margin-top: 50px;
}

.three-columns {
  display: flex;
  gap: 40px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  font-family: "BrandonText-Regular";
}

.footer-section-1 {
  width: 50%;
  display: grid;
}

.widget-box {
  display: flex;
  flex-direction: column;
  background-color: #daecfb;
  padding-top: 20px;
  padding-right: 20px;
  padding-left: 20px;
  padding-bottom: 10px;
  border-radius: 10px;
  margin-top: 30px;
}

.widget-space {
  font-family: "BrandonText";
  margin-bottom: 10px !important;
  margin-top: 10px;
}

.hover-underline-animation,
.href {
  display: inline-block;
  position: relative;
  color: #3f3f3f;
}

.hover-underline-animation:hover,
.href:hover {
  display: inline-block;
  position: relative;
  color: #5333ed;
}

.hover-underline-animation::after,
.href::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #5333ed;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after,
.href:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* 5. Buttons */

.btn-os {
  font-family: "BrandonText-Regular";
  font-size: 16px;
  padding: 9px 12px;
  align-items: center;
  border-radius: 12px;
  gap: 8px;
  border: none;
  opacity: 0.6;
  transition: 0.3s;
}

.highlight-btn {
  background-color: #5333ed;
  color: white;
}

.btn-os:hover {
  opacity: 1;
  cursor: pointer;
}

.tx14 {
  font-size: 14px !important;
}

.tx16 {
  font-size: 16px !important;
}

/* 6. Stations */

.random-post {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 20px;
  padding: 3%;
  background-color: #fff2ee;
  border-radius: 20px;
  margin-top: 20px;
  flex-wrap: wrap; /* Allow items to wrap */
}

.random-post p {
  margin-top: 0px;
  align-self: center;
  font-family: "BrandonText" !important;
}

.random-post-learning {
  display: flex;
  align-content: center;
  justify-content: center;
  gap: 20px;
  padding: 3%;
  background-color: #eefbf4;
  border-radius: 20px;
  margin-top: 20px;
  flex-wrap: wrap; /* Allow items to wrap */
}

.random-post-learning p {
  margin-top: 0px;
  align-self: center;
  font-family: "BrandonText" !important;
}

.pass-result {
  text-align: center;
  font-size: 40px;
  color: #3ec09c;
  margin-top: 30px;
}

.fail-result {
  text-align: center;
  font-size: 40px;
  color: #e46262;
  margin-top: 30px;
}

.answer-checkbox {
  height: 20px;
  width: 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  outline: none;
  transition-duration: 0.3s;
  background-color: #ffffff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.answer-checkbox:checked {
  border: 1px solid #41b883;
  background-color: rgb(104, 188, 104);
}

.answer-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 13px;
  border: 1px solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.answer-checkbox:active {
  border: 1px solid #34495e;
}

.my-stats h2 {
  font-size: 25px;
  text-align: center;
}

.my-stats p {
  text-align: center;
  font-size: 25px;
  color: #20124d;
}

.my-stats span {
  background-color: #fbfbfbc7;
  padding: 0px 15px;
  border-radius: 50px;
}

.traffic-light {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

@media (max-width: 1025px) {
  .my-stats-section {
    display: block !important;
  }
}

.my-stats-section {
  display: flex;
}

.my-stats {
  margin: 20px;
  border-radius: 15px;
  padding: 20px;
}

body.admin-bar .lg-backdrop {
  z-index: 100000; /* Higher than the WordPress admin toolbar */
}

body.admin-bar .lg-outer {
  z-index: 100001; /* Higher than the backdrop */
}

.lg-download {
  display: none;
}

.stations-icon {
  width: 10px;
}

.question-row {
  padding: 20px;
}

.question-row-1 {
  padding: 5px 10px 5px;
}

.stations-bc {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  align-items: center;
}

.answer-checkbox {
  display: flex;
  align-items: flex-start;
}

.good-value,
.excellent-value {
  border-radius: 5px;
  text-align: center;
  background-color: #f6f6f6;
  transition: background-color 0.5s ease;
  color: #716f6f;
}

.padding-div {
  display: inline-block;
  vertical-align: top;
  width: 50%; /* Adjust this based on your requirements */
}

.main-content {
  display: block;
  white-space: normal;
  vertical-align: top;
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeEffect 1s;
  background-color: #f4f6f9;
  padding: 3%;
  border-radius: 20px;
  margin-top: 30px;
  filter: grayscale(100%);
  opacity: 0.4;
  transition: filter 0.5s, opacity 0.5s;
}

@media (max-width: 1326px) {
  .main-content {
    padding: 5%;
    border-radius: 20px;
  }
}

.main-content.inactive {
  filter: grayscale(1);
  opacity: 0.5;
}
.main-content.active {
  filter: grayscale(0);
  opacity: 1;
  background-color: #f9f9f9 !important;
}

.submit-station-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.timer {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.spacer1 {
  margin-bottom: 50px;
}

.station-sections {
  position: sticky;
  top: 50px;
  z-index: 100; /* Optional: To ensure the element stays above other content */
  background-color: inherit; /* Or any background color you prefer */
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* When admin bar is present, stick .station-sections 32px from the top */
body.admin-bar .station-sections {
  top: 32px;
}

.btn-station-active {
  transition: 0.5s;
  background-color: #5232ec !important;
  color: white !important;
}

.btn {
  background-color: #f6f6f6;
  font-family: "BrandonText";
  border: none;
  background-color: #fafafd;
  padding: 15px 30px 15px 30px;
  border-radius: 17px !important;
  font-size: 18px;
  color: #808080;
  border: solid 1px #5232ec;
  color: #5232ec;
  font-weight: 400;
  letter-spacing: 1px;
  will-change: transform;
  transition: transform 500ms;
}

.btn:hover {
  transform: scale(1.05);
  cursor: pointer;
  transition: transform 125ms;
  transform: translateY(-5px);
  background-color: #4ac494 !important;
  color: white !important;
  border: 1px solid #4ac494 !important;
}

.btn-blue {
  background: #5333ee;
  color: #fff;
  border: 1px solid #5333ee;
}

.btn-green {
  background: #4ac494;
  color: #fff;
  border: 1px solid #4ac494;
}

.btn-dark-green {
  background: #46aa75;
  color: #fff;
  border: 1px solid #46aa75;
}

.btn-purple {
  background: #20124d;
  color: #fff;
  border: 1px solid #20124d;
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
}

.btn-blue:hover {
  background-color: #4ac494 !important;
  color: #fff !important;
  border: 1px solid #4ac494;
}

.btn-no-outline {
  background: transparent;
  color: #000;
  border: 1px solid white;
}

.reset {
  background-color: #140768;
  color: white;
}

.current-time {
  background-color: #ffbb27;
  color: white;
  flex-shrink: 0;
}

.pause {
  background-color: #5232ec;
  color: white;
}

.btn-main {
  background-color: #ffffff8a;
  transition: background-color 0.5s, color 0.5s;
  backdrop-filter: blur(10px) !important;
}

.active {
  background-color: #fafafd !important;
  color: #000000 !important;
}

.station-marksheet-option {
  margin-bottom: 0px !important;
}

/*Hide section*/
.hide {
  display: none;
}

.desk-s {
  display: none;
}

@media (max-width: 1000px) {
  .mob-s {
    display: none;
  }

  .desk-s {
    display: contents;
  }

  .spacer1 {
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 1145px) {
  .two-columns {
    display: flex; /* Keep it as flex */
    flex-direction: column; /* Stack the children vertically */
    gap: 40px;
  }

  .qbank-selection {
    width: 100% !important;
    order: 1;
  }

  .two-columns-first {
    width: 100%;
    order: 2;
  }
}

/* iPad Size */

@media (max-device-width: 1032px) {
  .three-columns {
    display: block;
  }

  .footer-area {
    padding: 10%;
  }

  .footer-section-1,
  .footer-section-2,
  .footer-section-3,
  .copyright-notice {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .two-columns {
    display: block;
    gap: 0;
    margin-left: 20px;
    margin-right: 20px;
  }

  .info-trending {
    margin-left: 20px;
    margin-right: 20px;
  }

  .trending-section {
    margin-right: 20px;
    margin-left: 20px;
  }

  .two-columns-first {
    margin-inline: auto;
  }

  .trending-content-section {
    display: block !important;
  }

  .trending-content-2 {
    margin-bottom: 10px;
  }

  .hero-background-color {
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* iPhone Size*/
@media only screen and (max-device-width: 768px) {
  .image-bg-2 {
    position: absolute;
    top: 18px !important;
    left: 31px !important;
  }

  .image-bg-1 {
    position: absolute;
    top: 172px !important;
    right: 9px !important;
  }

  .hero-image {
    display: none;
  }

  .info-trending {
    margin-left: 10px;
    margin-right: 10px;
  }

  .trending-content-2 {
    margin-bottom: 10px;
  }

  .trending-content-section {
    display: block !important;
  }

  .footer-area {
    padding: 10%;
  }

  .footer-section-1,
  .footer-section-2,
  .footer-section-3,
  .copyright-notice {
    width: 100%;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
  }

  .widget-box {
    margin-right: 40px;
  }

  .trending-title {
    width: 100%;
  }

  .two-columns {
    display: block;
    gap: 0px;
    margin: 0px;
  }

  .two-columns-first {
    width: 100%;
    margin-inline: auto;
  }

  .two-column-main-section {
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  .main-category-part {
    padding: 20px !important;
  }

  .background-surround {
    padding: 10px !important;
  }

  .os-faq-custom .panel {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .learning-title {
    font-size: 40px !important;
  }

  .inner-section div.panel.active > ul {
    padding-left: 20px;
  }

  section.welcome-second-section div h1 {
    margin-top: 0px;
  }
}

/* 7. Learning */

.main-category-header-surround {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.percentage-amount {
  margin-top: 0px;
  background-color: lightgreen;
  color: green;
  padding: 2px 4px;
  border-radius: 7px;
  font-family: "BrandonText" !important;
}

.first-column-styling ul.category-selection-menu {
  list-style-type: none; /* Remove bullet points */
  position: relative; /* Needed for absolute positioning of pseudo-elements */
  padding-left: 0; /* Remove default padding */
}

.first-column-styling ul.category-selection-menu::before {
  content: "";
  position: absolute;
  left: 20px; /* Adjust as needed */
  top: -4px;
  bottom: 14px;
  width: 1px; /* Width of the line */
  background-color: #e4e4e4; /* Color of the line */
}

.first-column-styling ul.category-selection-menu li {
  position: relative;
  margin-left: 40px; /* Adjust as needed for alignment */
  font-size: 18px;
  margin-bottom: 10px;
}

.first-column-styling ul.category-selection-menu li::before {
  content: "";
  position: absolute;
  left: -20px; /* Half of margin-left */
  top: 50%;
  width: 15px; /* Length of the line going to each item */
  height: 1px;
  background-color: #e4e4e4; /* Color of the line */
}

.jump-section-text {
  margin-bottom: 5px;
  margin-top: 0px;
  font-size: 23px;
}

.category-button {
  text-align: right;
}

.category-link.active {
  background-color: yellow; /* Example style */
}

.welcome-title {
  margin-bottom: 40px;
}

.two-column-main-section {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

ul.connected-list {
  list-style-type: none; /* Removes default bullet points */
  padding: 0;
}

ul.connected-list li {
  position: relative;
  padding-left: 20px; /* Adjust space for the line */
  margin-bottom: 10px; /* Space between items */
}

ul.connected-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 2.5px;
  top: 16px;
  bottom: -31px;
  width: 2px;
  background: #525252;
}

ul.connected-list li::before {
  content: "•"; /* Custom bullet point */
  position: absolute;
  left: -4px;
  color: #525252; /* Bullet point color */
  font-size: 40px;
  top: 14px;
  transform: translateY(-50%);
}

.single-line-space {
  margin-bottom: 15px;
}

.other-posts {
  padding: 10px;
  border-radius: 10px;
}

.title-sub p {
  text-align: center;
  font-size: 16px;
}

.title-styling h1 {
  margin-bottom: 10px !important;
}

.title-styling {
  margin-bottom: 50px;
}

.wpc-button-complete,
a.wpc-button {
  margin-top: 50px;
}

div.panel.active {
  max-height: 100% !important;
  padding: 5% !important;
}

.trending-hover {
  transition: transform 0.2s;
}

.trending-hover:hover {
  transform: scale(1.05);
}

.trending-section-header h2 {
  margin-bottom: 0px;
}

.trending-section-header {
  display: flex;
  align-items: end;
  gap: 20px;
  margin-bottom: 20px;
  margin-top: 50px;
}

.treding-icon {
  background-color: #0000ff1c;
  padding: 10px;
  border-radius: 50%; /* Make it a circle */
  width: 50px; /* Fixed width */
  height: 50px; /* Fixed height */
  display: flex; /* Center the SVG horizontally */
  justify-content: center; /* Center the SVG horizontally */
  align-items: center; /* Center the SVG vertically */
}

.trending-content-section {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.trending-content-2 {
  padding: 20px;
  border-radius: 15px;
  background-image: url("/wp-content/uploads/02-min.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flow;
  align-self: baseline;
  box-shadow: inset 0 0 0 1000px rgb(14 14 14 / 8%);
}

.trending-content-2 img {
  width: 100%; /* Make image take full width of its container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 15px;
}

.main-hero {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff7d;
  border-radius: 50px;
  padding: 10px;
}

.email-subscribe-section {
  margin-top: 50px;
}

.completed-learning {
  margin-top: 20px;
}

.info-trending {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0px;
  margin-bottom: 0px;
}

.main-page-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.main-page-title h1 {
  margin-bottom: 0px;
}

.info-trending h2 {
  margin-bottom: 0px;
}

.title {
  position: relative;
  line-height: 1.5;
  margin-top: 0px;
}

.text-title {
  text-align: center !important;
  line-height: 1.2;
}

.title .image-bg-1 {
  position: absolute;
  top: -47px;
  right: 383px;
}

.title .image-bg-2 {
  position: absolute;
  top: 177px;
  left: 409px;
}

.learning-progress {
  margin-top: 20px;
  margin-bottom: 20px;
}

.acc-text p {
  font-family: "BrandonText" !important;
}

.section-categories {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.select-all-button {
  padding: 15px;
  border: none;
  border-radius: 15px;
  font-family: "BrandonText";
  font-size: 20px;
  transition: 1s;
  cursor: pointer;
}

.select-all-button:hover {
  background-color: green;
  color: white;
}

.category-selection {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}

.category-selection label {
  margin-left: 10px;
  background-color: #f9f9f9;
  padding: 5px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 16px;
  font-family: "BrandonText";
}

.category-selection label.selected {
  background-color: green;
  color: white;
}

.main-cont {
  width: 90%;
  margin-left: 5%;
  margin-right: 5%;
}

.trending {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 20px;
  margin-top: 150px;
}

body > section > section.inner > div.trending > h2 {
  width: 40%;
}

.trend-category {
  margin-top: 0px;
  background-color: #015aeebf;
  color: white;
  font-family: "BrandonText" !important;
  padding: 5px;
  border-radius: 10px;
  font-size: 14px;
  display: inline;
}

.inner-learning {
  max-width: inherit;
  margin-left: auto;
  margin-right: auto;
}

/* Trending*/
.trending-content {
  background-color: whitesmoke;
  padding: 40px;
  border-radius: 10px;
  width: 300px;
  flex-shrink: 0;
  display: grid;
  height: 250px;
  background-size: cover; /* Cover the entire area */
  background-position: center; /* Center the image */
  transition: transform 0.3s ease-in-out; /* Add transition */
  overflow: hidden; /* Hide overflow */
}

.trending-content:hover {
  transform: scale(1.1);
}

.trending-box-styling {
  margin-left: 50px;
}

.trending-content::before {
  background-image: attr(data-bg url);
}

.trending-title {
  font-family: "BrandonText";
  margin-bottom: 0px;
  font-size: 25px;
}

.trending-text {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: end;
  color: white;
}

.first-trending {
  margin-left: 10px;
}

.trend-counter {
  padding-right: 13px;
  padding-left: 13px;
  padding-bottom: 3px;
  padding-top: 3px;
  border-radius: 50px;
  display: inline-flex;
  font-family: "BrandonText";
  background-color: #5232ed12;
}

.trending-content-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.flexbox-trending {
  display: flex;
  overflow-x: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.flexbox-trending::-webkit-scrollbar {
  display: none;
}

/* 8. Flexbox settings */
.flexbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flexbox-center-items {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* 9. FAQ item */

.wrap-custom-sam {
  background-color: #fafafd !important;
  border-radius: 24px;
}

.background-surround {
  background-color: white;
  padding: 30px;
  border-radius: 15px;
}

.os-faq-custom,
.os-faq-wrap,
.os-faq-item {
  margin-bottom: 20px;
  border-radius: 30px;
}

div.panel.active > ul > li {
  margin-bottom: 5px;
}

.os-faq-custom,
.os-faq-wrap,
.os-faq-item,
.accordion {
  margin-top: 0px !important;
}

.os-faq-custom .accordion {
  cursor: pointer;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  font-size: 20px;
  font-weight: 450;
  line-height: 160%;
  font-family: "BrandonText";
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  padding: 20px !important;
  align-items: center;
}

.os-faq-custom .accordion::after {
  content: "";
  background-image: url("/wp-content/themes/OS3/assets/img/arrow-faq.svg");
  display: block;
  width: 24px;
  height: 24px;
  margin-left: 5px;
  flex: 0 0 24px;
}

.os-faq-custom .panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
  padding-left: 32px;
  padding-right: 32px;
  color: #292929;
  font-size: 20px;
}

div.accordion > p {
  margin-top: 0px;
}

.os-faq-custom .accordion.active {
  padding-bottom: 16px;
  border-radius: 50px;
}

.faq-custom .accordion.active {
  border-radius: 30px 30px 0px 0px;
}

.main-category-part {
  padding: 40px;
  border-radius: 15px;
  margin-top: 30px;
  background-size: 200%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.accordion p {
  font-family: "BrandonText";
  color: #5333ee;
}

.main-category-part h2 {
  color: #1b1b7a;
  margin-top: 0px;
}

/* 9. Homepage fix */

body
  > section
  > section.result
  > div
  > div.block-wrap.aos-init.aos-animate
  > div.block.block-2
  > div.top-block
  > div.left-text.aos-init.aos-animate
  > p,
body
  > section
  > section.result
  > div
  > div.block-wrap.aos-init.aos-animate
  > div.block.block-2
  > div.top-block
  > div.right-text.aos-init.aos-animate
  > p {
  margin-top: 0px;
}

.result .block-wrap .block-2 .icon-box .icon {
  width: 50px;
  height: 50px;
}

.result .block-wrap .block-2 .left-text::after,
.result .block-wrap .block-2 .right-text::after {
  top: 45px !important;
}

@media (max-width: 1399px) {
  .result .block-wrap .block-2 .left-text::after,
  .result .block-wrap .block-2 .right-text::after {
    top: 30px !important;
  }
}

body
  > section
  > section.oscestop-platform
  > div
  > div.platform-wrap
  > div.img-box
  > img {
  width: 100%;
}

@media (max-width: 992px) {
  body
    > section
    > section.oscestop-platform
    > div
    > div.platform-wrap
    > div.img-box
    > img {
    padding: 10%;
  }

  .info-blocks {
    margin-top: 50px;
  }

  .title-block,
  body
    > section
    > section.result
    > div
    > div.block-wrap.aos-init.aos-animate
    > div.block.block-1
    > div.info-wrap
    > div.info
    > div.text-block {
    font-size: 25px !important;
  }
}

@media (max-width: 575px) {
  .result .block-wrap .block-1 {
    padding: 50px !important;
  }

  .result .block-wrap .block-1 .title-block {
    font-size: 25px;
  }

  .what-we-offer-slider .splide__slide .panel ul {
    margin-left: -25px !important;
  }
}

.m-accordions {
  margin-bottom: 40px !important;
}

.stacking-slide {
  top: 50px !important;
  margin-bottom: 200px !important;
}

.m-accordions__item__text p:first-child {
  margin-bottom: 0px;
  margin-top: 0px;
}

.slider-custom.slider_reviews .swiper-slide .img-box img {
  width: 400px !important;
  height: auto;
}

.slider-custom.slider_reviews .swiper-slide .img-box .flag-bg img {
  width: 32px !important;
}

.timeline .timeline-block ul li .item-custom .title h5 {
  margin-top: 0px;
  margin-bottom: 20px;
}

li.in-view {
  list-style-type: none;
}

div.timeline-block > ul > li::marker {
  list-style-type: none;
  content: none;
}

.what-we-offer .block-wrap-custom .block .title-block h5 {
  margin-bottom: 20px;
  margin-top: 30px;
}

/* 10. Email signup */

.email-subscribe {
  max-width: 300px;
  margin-right: auto;
  margin-left: auto;
}

.email-list-form .email-subscribe {
  margin-left: inherit;
}

.email-shortcode-text {
  font-family: "BrandonText" !important;
}

div.email-subscribe input {
  float: left;
  max-width: 100%;
  width: 100%;
  height: 38px;
  outline: none;
  border-radius: 5px;
  border: 1px #e0e0e0 solid;
  font-size: 14px;
  background: white;
  font-family: "BrandonText-Regular" !important;
  font-size: 16px;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 20px;
}

form#sib_signup_form_1 p {
  font-family: "BrandonText" !important;
}

[form] input[type="text"],
[form] input[type="email"],
[form] select {
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 5px !important;
  height: auto;
  margin: 2px 0 15px 0px;
  font-size: 18px;
}

[form] .sib-default-btn {
  margin: 5px 0;
  padding: 6px 12px;
  color: #fff;
  background-color: #5434ed;
  border-color: #5434ed;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4285;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: normal;
  border: 1px solid transparent;
  border-radius: 50px;
  font-family: "BrandonText" !important;
}

[form] .sib-default-btn:hover {
  background-color: #20124d;
}

[form] p {
  margin: 10px 0 0 0;
}

/* 10. Qbank */

#thumbs_up_span > img,
#thumbs_down_span > img {
  width: 18px;
}

#practice_exam_form > div.question {
  margin: 3%;
}

#correct,
#wrong {
  padding: 3% !important;
}

#wrong .qbank-selection {
  width: 60%;
}

.feeedback-arrows-above {
  margin-top: 10px;
  background-color: #ffffff;
  border-radius: 5px;
  padding: 10px;
}

.qbank-buttons {
  padding: 10px 20px 40px 90px;
}

.feedback_section {
  border: 2px solid #25c83a;
  padding: 33px;
  display: inline-flex;
  border-radius: 10px;
}

#wrong > div.feedback.wrong > div > br {
  display: none;
}

.thumbs_up_down_div .thumbs-up {
  background-color: #f7f7f7;
  padding: 7px 10px;
  border-radius: 4px;
}

.thumbs_up_down_div .thumbs-down {
  background-color: #f7f7f7;
  padding: 7px 10px;
  border-radius: 4px;
  margin-left: 5px;
}

form#down_feedback_form {
  background-color: #f7f7f7;
  padding: 40px;
  margin-top: 25px;
  border-radius: 4px;
}

.close_btn {
  cursor: pointer;
  float: right;
  position: relative;
  display: inline-block;
  font-size: 15px;
  color: #e82a2a;
  font-weight: 600;
  transition: transform 500ms;
}

.close_btn:hover {
  transition: transform 125ms;
  transform: translateY(-5px);
  cursor: pointer;
}

form#down_feedback_form textarea {
  padding: 15px;
  border: 1px solid #919191;
  margin: 15px 0;
  border-radius: 5px;
  width: 100%;
}

.select-question-one textarea {
  padding: 15px;
  min-height: 29px !important;
}

.feedback-form h3 {
  margin-top: 0px;
  font-size: 25px;
}

#down_feedback_form > h4 {
  padding-left: 0px !important;
  margin-top: 10px !important;
  font-size: 18px;
}

form#down_feedback_form #submit_fb_btn {
  background-color: #5d28f6;
  border-radius: 50px;
  color: #fff;
  padding: 10px 30px;
  font-size: 18px;
  font-family: "BrandonText";
  transition: transform 500ms;
  border: none;
}

form#down_feedback_form #submit_fb_btn:hover {
  transition: transform 125ms;
  transform: translateY(-5px);
  background-color: #4ac494;
  cursor: pointer;
}

#down_fb_count > b {
  display: none;
}

#feedback-text {
  font-family: "BrandonText-Regular";
  font-size: 18px;
}

/* 11. Armember */

.arm_site_info_row .arm_close_icon {
  margin-top: 20px !important;
  margin-left: -39px;
  background: #4200ff;
}

#contents-wrap
  > div
  > main
  > article
  > div
  > div
  > div.arm_setup_form_container
  > div
  > div
  > div {
  height: 100% !important;
  margin: 60px auto !important;
  width: 100% !important;
}

@media screen and (max-width: 568px) {
  #contents-wrap
    > div
    > main
    > article
    > div
    > div
    > div.arm_setup_form_container
    > div
    > div
    > div {
    height: 100% !important;
    margin: 0px auto !important;
    width: 100% !important;
  }
}

div.arm_setup_gatewaybox_main_wrapper {
  display: none !important;
}

@media screen and (max-width: 568px) {
  .arm_field_col_2 {
    width: 100% !important;
  }
}

#arm_setup_form1_UQzPgs8IR6
  > div
  > div.arm_setup_summary_text_main_container
  > div
  > div
  > div:nth-child(15) {
  font-family: "BrandonText-normal";
  font-size: 20px;
}

#contents-wrap
  > div
  > main
  > article
  > div
  > div
  > div.arm_current_membership_container
  > div.arm_current_membership_heading_main,
#contents-wrap
  > div
  > main
  > article
  > div
  > div
  > div.arm_account_detail_wrapper
  > div
  > div
  > div.arm_account_detail_tab_heading {
  display: none;
}

#contents-wrap
  > div
  > main
  > article
  > div
  > div
  > div.arm_account_detail_wrapper
  > div
  > div
  > div.arm_account_detail_tab_link_belt.arm_member_detail_action_links
  > a {
  font-family: "BrandonText";
  font-size: 16px !important;
}

.curved-corners {
  border-radius: 15px;
}

.arm_module_forms_container .arm_form_101,
.arm-form-container .arm_form_101.arm-default-form:not(.arm_admin_member_form),
.arm_update_card_form_container .arm_form_101,
.arm_admin_member_form .arm_editor_form_fileds_wrapper {
  background: #f3f3f3 !important;
}

.sam-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 50px;
}

.sam-column {
  padding: 10px;
  border: 0px solid #f0f3fd;
  border-radius: 10px;
  margin: 0px;
}

@media screen and (max-width: 568px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

#arm_subscription_plan_option_3 > span.arm_module_plan_name,
#arm_subscription_plan_option_2 > span.arm_module_plan_name,
#arm_subscription_plan_option_4 > span.arm_module_plan_name {
  font-size: 35px !important;
}

.arm_setup_form_1 .arm_setup_column_item .arm_module_plan_name,
.arm_module_plans_container .arm_module_plan_price {
  font-family: "BrandonText" !important;
}

.arm_module_plans_container .arm_module_plan_description {
  font-family: "BrandonText-normal" !important;
}

.arm-default-form.arm_form_layout_iconic
  .arm-df__form-field
  .arm-df__radio
  .arm-df__fc-radio--label {
  font-family: "BrandonText-normal";
}

.arm_module_gateway_name .arm_module_gateway_span {
  font-family: "BrandonText";
}

.arm-df__form-group
  .arm-df__field-label
  .arm-df__label-asterisk
  + label.arm_form_field_label_text,
.armf_alignment_left .arm_form_label_wrapper .arm_form_field_label_text {
  margin-bottom: 10px !important;
  font-family: "BrandonText";
}

h3.arm_setup_form_title {
  display: none !important;
}

div.arm_module_gateways_container.arm_module_box.arm_form_106.arm_form_layout_iconic.arm-default-form,
div.arm_module_forms_container.arm_module_box,
div.arm_module_plans_main_container > div {
  border-bottom: 0px !important;
}

.arm_site_info_row .arm_close_icon {
  margin-top: 20px !important;
  margin-left: -39px;
  background: #4200ff;
}

#contents-wrap
  > div
  > main
  > article
  > div
  > div
  > div.arm_setup_form_container
  > div
  > div
  > div {
  height: 100% !important;
  margin: 60px auto !important;
  width: 100% !important;
}

@media screen and (max-width: 568px) {
  #contents-wrap
    > div
    > main
    > article
    > div
    > div
    > div.arm_setup_form_container
    > div
    > div
    > div {
    height: 100% !important;
    margin: 0px auto !important;
    width: 100% !important;
  }
}

div.arm_setup_gatewaybox_main_wrapper {
  display: none !important;
}

/* 11. accordion */

.panel {
  transition: max-height 0.5s ease-out;
  overflow: hidden;
  max-height: 0; /* Start with max-height 0 */
}

div.aagb__accordion_head.aab_right_icon {
  color: #333333;
  background-color: transparent;
  padding: 1px 15px 1px 15px !important;
}

div.wp-block-aab-accordion-item.aagb__accordion_container.aagb__accordion_active
  > div.aagb__accordion_body.aagb__accordion_body--show
  > div
  > ul {
  margin-left: 0px !important;
}

div.wp-block-aab-accordion-item.aagb__accordion_container {
  border-radius: 10px !important;
  border: 1px solid #e4e3e3 !important;
}

div.wp-block-aab-accordion-item.aagb__accordion_container.aagb__accordion_active
  > div.aagb__accordion_head.aab_right_icon
  > div.aagb__accordion_heading.aab_right_icon
  > h4,
div.aagb__accordion_head.aab_right_icon
  > div.aagb__accordion_heading.aab_right_icon
  > h4 {
  padding-top: 10px !important;
}

div.wp-block-aab-accordion-item.aagb__accordion_container.aagb__accordion_active
  > div.aagb__accordion_body.aagb__accordion_body--show {
  border-top-color: #e4e3e3 !important;
  border-top-style: solid !important;
}

p.aab__accordion_title {
  font-family: "BrandonText" !important;
  padding: 10px !important;
  color: #5333ed !important;
}

div.wp-block-aab-group-accordion.aagb_accordion_0ddb7014-f6d8-4f3a-b6a0-f4ba60cdde60
  > div.wp-block-aab-accordion-item.aagb__accordion_container.aagb__accordion_active {
  border-color: #5333ed !important;
  border-width: 1px !important;
  border-style: solid !important;
}

div.aagb__accordion_heading.aab_right_icon > p {
  font-family: "BrandonText" !important;
  padding: 10px !important;
  color: #5333ed !important;
}

/* 12. Welcome */

.welcome-progress-title h2 {
  margin-bottom: 10px;
  margin-top: 0px;
}

.how-many-yd {
  border-radius: 10px;
  margin-bottom: 20px;
  background-color: #664aef;
  border-radius: 10px;
  color: white;
  margin-top: 0px;
  padding: 7px;
}

.how-many-yd p {
  margin-top: 0px;
}

.how-many-yd span {
  color: white;
  margin-top: 0px;
  padding: 7px;
}

.how-many-yd strong {
  background-image: linear-gradient(to right, #00dcff, #b0b7ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}

.welcome-2-sections {
  display: flex;
  justify-content: space-between;
}

.welcome-first-section {
  flex: 0 0 250px;
  padding: 18px;
  border-right: 1px solid transparent; /* Set border to transparent */
  background: linear-gradient(
    #eaeaea,
    transparent
  ); /* Gradient from your border colour to transparent */
  background-repeat: no-repeat;
  background-size: 1px 100%; /* Width of the border */
  background-position: right; /* Position the gradient on the right side */
}

.welcome-second-section {
  margin-top: 50px;
  width: 100%;
}

.welcome-content {
  background-color: #ffffff;
  padding-right: 5%;
  padding-left: 5%;
  max-height: 100%;
}

.welcome-title h1 {
  margin-top: 40px;
  margin-bottom: 0px;
}

.welcome-title p {
  margin-top: 5px;
}

.welcome-learning {
  background-color: #fff2ee;
  padding: 20px;
  border-radius: 30px;
}

.welcome-stations {
  background-color: #f4f1fd;
  padding: 20px;
  border-radius: 30px;
}

.welcome-qbank {
  background-color: #fff9eb;
  padding: 20px;
  border-radius: 30px;
}

.welcome-conditions {
  background-color: #f8e9e8;
  padding: 20px;
  border-radius: 30px;
}

.welcome-3-boxes {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  flex-wrap: wrap;
}

.boxes-number strong {
  font-size: 30px;
}

.boxes {
  background-color: #fbfbfb;
  border-radius: 35px;
  padding: 10px;
  flex: 1; /* Each box will grow to fill the space */
  margin: 10px; /* Adds some space around each box */
  box-sizing: border-box; /* Ensures padding and border are included in the width/height */
  text-align: center; /* Centers the text inside the boxes */
  min-width: 200px; /* Minimum width for each box */
  transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.boxes:hover {
  transform: scale(1.05); /* Slightly enlarges the box on hover */
  cursor: pointer;
}

@media (max-width: 600px) {
  .boxes {
    flex-basis: 100%; /* On small screens, each box takes full width */
  }
}

.trending-boxes {
  padding: 20px;
  background-color: #eefbf4;
  display: flow;
  align-self: baseline;
}

.trending-text-boxes p {
  text-align: left;
  font-size: 18px;
  font-family: "BrandonText" !important;
  margin-top: 0px;
}

.trending-text-boxes {
  margin-bottom: 15px;
}

.trending-category {
  margin-top: 0px;
  background-color: #47aa75;
  color: white;
  font-family: "BrandonText" !important;
  padding: 5px;
  border-radius: 10px;
  font-size: 14px;
  display: inline;
}

.welcome-menu-bar {
  display: flex;
  align-items: end;
  place-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
}

@media (max-width: 687px) {
  .logged-out {
    display: none;
  }

  .welcome-menu-bar {
    display: flex;
    align-items: end;
    place-content: space-between;
    padding: 10px 10px 7px 10px;
    border-bottom: 1px solid #eaeaea;
  }
}

.member-bar {
  display: flex;
  align-items: center;
  place-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #eaeaea;
  background-color: #5333ee;
  width: 100%;
  z-index: 1000;
  transition: top 0.3s;
}

.welcome-menu p {
  font-family: "BrandonText" !important;
}

.forbidden {
  background-color: #f9f9f9;
  color: grey;
}

p.forbidden:hover {
  background-color: black;
}

.searchform {
  padding: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
}

.searchform #s {
  border: 1px solid #ccc;
  padding: 5px 10px;
  padding: 5px 10px;
  margin-right: 10px;
  flex-grow: 1;
  width: 300px;
  border-radius: 10px;
}

#s {
  font-family: "BrandonText-Regular";
  font-size: 16px;
}

.searchform #searchsubmit {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchform #searchsubmit svg {
  height: 24px;
  width: 24px;
}

.welcome-menu-active p {
  background-color: aliceblue;
}

.welcome-menu p {
  transition: background-color 0.3s ease;
  padding: 5px 10px;
  margin-top: 10px;
  border-radius: 10px;
}

.welcome-menu a:hover p {
  background-color: #e6f1ea; /* Background color on hover */
}

.welcome-feedback {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 20px;
  margin-top: 40px;
}

.welcome-progress-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
}

@media screen and (max-width: 1000px) {
  .welcome-progress-title {
    display: inline-block;
  }
}

.welcome-accordion {
  margin-top: 20px !important;
}

.welcome-accordion .active {
  background-color: transparent !important;
}

#sticky-menu-bottom {
  display: none;
}

@media screen and (max-width: 768px) {
  .welcome-first-section {
    display: none;
  }

  #sticky-menu-bottom {
    display: initial;
  }

  div.member-bar button {
    font-size: 14px !important;
  }
}

.learning-content {
  margin-right: 5%;
  margin-left: 5%;
  max-width: 90%;
}

.slide-out-menu.active {
  right: 0; /* Slides in */
}

.blurred {
  filter: blur(5px);
  transition: filter 0.3s ease;
}

.welcome-stations,
.welcome-learning,
.welcome-qbank,
.welcome-conditions {
  margin-top: 50px;
}

.welcome-conditions {
  margin-bottom: 100px;
}

.welcome-trending strong {
  font-size: 20px;
}

li .wpc-lesson-completed {
  background-color: #2e983517;
  border-radius: 5px;
  padding: 1px;
}

.cta-title {
  font-family: "BrandonText" !important;
  font-size: 30px;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 20px;
}

.advert-for-users {
  padding: 7%;
  background-color: #f9f9f9;
  border-radius: 30px;
  margin-bottom: 50px;
  margin-top: 50px;
  background-image: url("/wp-content/uploads/L7-scaled.jpg");
  transition: transform 0.3s ease;
}

.advert-for-users:hover {
  transform: scale(1.05) !important;
}

.cta-flexbox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Allows items to wrap onto multiple lines */
}

.cta-flexbox p {
  background-color: #ffffff6e;
  padding: 5px;
  border-radius: 15px;
  margin: 5px; /* Adds space around each item */
  flex: 1 1 auto; /* Allows flex items to grow and shrink as needed */
  text-align: center;
}

/* Responsive styles */
@media (max-width: 768px) {
  .cta-flexbox {
    flex-direction: column;
    align-items: center; /* Center items in a column layout */
    gap: 0px;
  }

  .cta-flexbox p {
    width: 100%; /* Full width in a column layout */
    text-align: center; /* Center text for smaller screens */
    margin-bottom: 10px; /* Adds more space at the bottom of each item */
  }
}

.login-sections {
  display: flex;
  min-height: 100vh; /* Ensures that the login sections take up the full viewport height */
}

.login-section-1 {
  flex: 0.6; /* Half width */
  background-color: #5333ee; /* Replace with your desired blue color */
  display: flex;
  flex-direction: column; /* Aligns children vertically */
  align-items: flex-start; /* Centers items horizontally */
  justify-content: center; /* Centers items vertically */
  padding: 5%;
  box-sizing: border-box;
}

.login-section-2 {
  flex: 1; /* Half width */
  background-color: #fff; /* White background */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.white-text {
  color: white;
}

/* Media Query for Smaller Devices */
@media (max-width: 768px) {
  .login-sections {
    flex-direction: column; /* Stacks the sections vertically */
  }

  .login-section-1,
  .login-section-2 {
    width: 100%; /* Full width for each section */
    flex: none; /* Removes the flex: 1 setting */
  }
}

.accordion-arrow {
  width: 20px;
}

.accordion-single,
.sub-accordion-single {
  border: 0px solid #ccc;
  margin-bottom: 10px;
  border-radius: 20px;
  background-color: #f9f9f9;
}

.accordion-single-title {
  position: relative; /* Ensure the parent element controls the positioning of the ::before element */
  overflow: hidden; /* Prevent the background from spilling out of the parent */
}

.accordion-single-title,
.sub-accordion-single-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  user-select: none;
}

.accordion-single-body p,
.sub-accordion-single-body p {
  margin-top: 15px;
}

div.accordion-single-body ul p,
div.sub-accordion-single-body ul p {
  margin-top: 3px;
}

.accordion-single-body,
.sub-accordion-single-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 15px;
  transition: max-height 0.1s ease-out, padding 0.2s ease-out;
  user-select: none;
}

/* Outer accordion */
.accordion-active .accordion-single-body {
  max-height: 10000px; /* A large enough value for the outer accordion */
  padding: 15px;
  transition: max-height 0.4s ease-in, padding 0.4s ease-in;
}

/* Inner accordion */
.sub-accordion-active .sub-accordion-single-body {
  max-height: 10000px; /* A large enough value for the inner accordion */
  padding: 15px;
  transition: max-height 0.4s ease-in, padding 0.4s ease-in;
}

.accordion-active,
.sub-accordion-active {
  background-color: #d8e7ff52;
}

.arrow-up {
  display: none;
}

.accordion-active .arrow-down,
.sub-accordion-active .arrow-down {
  display: none;
}

.accordion-active .arrow-up,
.sub-accordion-active .arrow-up {
  display: block;
}

.accordion-single-title p,
.sub-accordion-single-title p {
  margin-top: 0px;
  font-family: "BrandonText" !important;
}

div.accordion-single-body > ul > li,
div.sub-accordion-single-body > ul > li {
  margin-bottom: 5px;
  font-family: "BrandonText-Regular" !important;
  font-weight: 400;
}

#arm_tm_wrapper > div.arm_current_membership_content > table > thead {
  border-spacing: 0px 0px !important;
}

table {
  border-collapse: separate;
  border-spacing: 0px 0px !important;
  width: 100%;
}

body
  > section
  > section
  > section
  > section.welcome-second-section
  > div.welcome-content
  > div.arm_setup_form_container
  > div
  > div
  > div {
  height: 100% !important;
  margin: 0px auto !important;
  width: 100% !important;
}

div.mark-as-complete {
  margin-left: 50px !important;
}

.nf-form-content textarea.ninja-forms-field {
  height: 200px;
  font-family: "BrandonText-Regular";
  font-size: 18px;
}

/* 13. Search */

#search-modal-trigger {
  color: white;
  font-family: "BrandonText";
  font-size: 16px;
  padding: 10px;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(255 255 255 / 9%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  z-index: 1040;
}

.search-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  align-items: center;
  gap: 5px;
  border-bottom: 1px #e3e3e3 solid;
}

#ajax-search-field {
  width: 100%;
  padding: 5px;
  font-family: "BrandonText";
  font-size: 20px;
  border: 1px solid transparent;
}

#ajax-search-field:focus {
  border: 1px solid transparent;
}

#search-results {
  padding: 10px 20px;
  max-height: 500px; /* Maximum height before scrolling */
  overflow-y: auto; /* Enables vertical scrollbar if content overflows */
}

.search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border-radius: 15px;
  transition: background-color 0.5s ease;
}

.search-result-item:hover {
  background-color: whitesmoke;
}

p.search-item {
  font-family: "BrandonText" !important;
}

p.search-item,
p.search-post-type {
  margin-top: 0px;
}

p.search-post-type {
  background-color: #dbdbfe;
  padding: 2px 13px;
  border-radius: 15px;
}

/* Style adjustments for the modal content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  margin-top: 10% !important;
  padding: 0;
  border: 1px solid #fafafa;
  border-radius: 10px;
  max-width: 800px;
  box-shadow: 0 4px 8px 0 rgb(202 202 202 / 20%),
    0 6px 20px 0 rgb(87 87 87 / 19%);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
}

@media only screen and (max-width: 900px) {
  .modal-content {
    margin: 3% 3% !important;
    margin-top: 10% !important;
  }

  #search-modal-trigger {
    display: none;
  }

  body > header > div > div.welcome-buttons > div > button > p {
    display: none;
  }

  .modal-search-header svg {
    margin-top: 0px;
  }
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes animatetop {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

/* The Close Button (x) */
.close-modal {
  float: right;
  font-size: 30px;
  font-weight: 700;
  line-height: 20px;
  color: #5e5e5e;
  text-shadow: 0 1px 0 #fff;
  opacity: 1;
}

.close-modal:hover,
.close-modal:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.no-scroll,
.no-scroll body {
  overflow: hidden !important; /* Use !important to ensure override */
  height: 100%; /* Lock the height to full viewport */
  position: fixed; /* Prevent scrolling on iOS devices */
  width: 100%; /* Prevent width from causing issues */
}

.modal-search-header {
  display: flex !important;
  align-content: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 17px;
  display: inline-block;
  font-family: "BrandonText";
  background: #46aa75;
  color: #fff;
  border: 1px solid #46aa75;
  will-change: transform;
  transition: transform 500ms;
}

.modal-search-header svg {
  width: 16px;
  color: white;
  margin-top: 4px;
}

.modal-search-header:hover {
  transform: scale(1.05);
  cursor: pointer;
  transition: transform 125ms;
  transform: translateY(-5px);
  background-color: #4ac494 !important;
  color: white !important;
  border: 1px solid #4ac494 !important;
}

.search-button {
  margin-top: 0px;
  color: white;
  font-family: "BrandonText" !important;
  font-size: 16px;
}

p + .accordion-single {
  margin-top: 10px;
}

div.os-cta > h4,
div.os-cta > h3 {
  margin-top: 20px !important;
}

.right-sided-accordion {
  display: flex;
  gap: 5px;
}

.completed-post {
  background-color: #e3f0ea;
  padding: 2px;
  border-radius: 8px;
  color: #48956c;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.percentage-meter-background-color-border {
  background-color: #f9f9f9;
  height: 25px;
  border-radius: 20px;
  align-items: center;
  flex-grow: 1;
  display: flex;
}

.percentage-bar-text {
  margin-top: 0px;
}

.percentage-meter-background-color {
  background-color: #4dc494;
  width: 100%;
  height: 15px;
  margin-top: auto;
  margin-bottom: auto;
  border-radius: 20px;
  margin-left: 5px;
  margin-right: 5px;
}

.percentage-bar-area {
  display: flex;
  align-items: center;
  gap: 10px;
}

.background-accordion {
  position: sticky;
  border-radius: 20px;
}

.background-accordion::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--background-width);
  background-color: var(--background-color);
  z-index: -1;
  border-radius: 20px;
}

code {
  background-color: #005aee1c;
  border-radius: 0.375rem;
  padding: 0.125rem 0.25rem;
  font-family: "BrandonText-Regular";
}

.highlighted-text.yellow {
  background-color: #fff0cf;
  border-radius: 0.375rem;
  padding: 0.05rem 0.25rem;
}

.highlighted-text.green {
  background-color: #cdf6e0;
  border-radius: 0.375rem;
  padding: 0.05rem 0.25rem;
}

.highlighted-text.blue {
  background-color: #c5ecff;
  border-radius: 0.375rem;
  padding: 0.05rem 0.25rem;
}

.highlighted-text.pink {
  background-color: #ffe4db;
  border-radius: 0.375rem;
  padding: 0.05rem 0.25rem;
}

.nav-text {
  margin-top: 0px;
  color: white;
  font-family: "BrandonText" !important;
  cursor: default;
}

.nav-background {
  padding: 4px 10px;
  border-radius: 17px;
  transition: ease 0.3s;
  align-items: center;
}

.nav-background:hover {
  background-color: #20124d;
}

.new-navigation {
  display: flex;
  align-items: center;
  gap: 5px;
}

.new-navigation-qbank {
  display: flex;
  align-items: center;
  gap: 5px;
}

.flex {
  display: flex;
  gap: 3px;
}

.inner-drop-down-menu {
  display: flex;
  padding: 3%;
  justify-content: space-between;
  gap: 20px;
}

.sub-menu-new,
.trending-menu {
  flex: 1;
}

.drop-down-menu {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(-20px);
  position: absolute;
  top: 100px;
  left: 1px;
  z-index: 9999;
  width: 94%;
  border: 3px solid #5333ee;
  margin-left: 3%;
  margin-right: 3%;
  border-top-left-radius: 30px;
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-top: 1%;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.blurred-menu {
  filter: blur(4px);
  transition: filter 0.3s ease;
}

.blurred-menu::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  border-radius: inherit;
}

.drop-down-menu.show {
  display: block; /* Make it visible */
  opacity: 1; /* Full opacity */
  transform: translateY(0); /* Move to original position */
}

.sub-menu-category-text {
  background-color: white;
  border-radius: 16px;
  margin-bottom: 5px;
  padding: 10px;
  display: inline-flex;
  margin-left: 10px;
  font-family: "BrandonText" !important;
  transition: transform 0.3s ease, background-color 0.4s ease, color 0.4s ease;
  margin-top: 10px;
}

.sub-menu-category-link .sub-menu-category-text:hover {
  transform: scale(1.05) !important;
  cursor: pointer;
  background-color: #46aa75;
  color: white;
}

.sub-menu-category-link {
  text-decoration: none; /* Prevents the link from having an underline */
}

.sub-menu-cta {
  border: 0px solid #dedede;
  background-color: #5333ee;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 3%;
  padding-right: 3%;
  margin-left: 0%;
  margin-right: 0%;
}

.sub-menu-new h3,
.trending-menu h3 {
  position: relative; /* Added this line */
  margin-top: 0;
  display: table; /* Moved this line from inline to CSS */
  padding: 5px; /* Moved this line from inline to CSS */
  border-radius: 20px; /* Moved this line from inline to CSS */
}

.sub-menu-new h3::before,
.trending-menu h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.25em;
  z-index: -1;
  transform: translateY(0.25em);
}

/* Modal styles */
.modal-feedback {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgb(25 25 25 / 45%);
  backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0; /* Remove the padding-top */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.modal-feedback.show {
  opacity: 1;
  visibility: visible;
}

.modal-content-feedback {
  background-color: #fefefe;
  padding: 20px;
  border: 0px solid #888;
  width: 80%;
  max-width: 800px; /* Optional: limit the maximum width */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.close-feedback {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-feedback:hover,
.close-feedback:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-header-feedback {
  font-family: "BrandonText" !important;
  margin-bottom: 20px;
  font-size: 1.2em;
  margin-top: 0px;
}

#feedbackForm > textarea {
  width: 100%; /* Make the textarea 100% width of the parent container */
  padding: 10px; /* Add padding inside the box */
  font-family: "BrandonText-regular"; /* Set the font family */
  font-size: 0.8em; /* Set the font size */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  margin-bottom: 10px;
  margin-top: 25px;
  border-radius: 8px;
}

.feedback-radio {
  display: inline-block !important;
  margin-right: 10px;
}

.feedback-radio input[type="radio"] {
  display: none;
}

.feedback-radio input[type="radio"] + span {
  display: inline-block;
  padding: 10px 20px;
  border: 0px solid whitesmoke;
  color: #353535;
  border-radius: 17px;
  background-color: whitesmoke;
  cursor: pointer;
  font-family: "BrandonText-regular";
  font-size: 0.8em;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.feedback-radio input[type="radio"]:checked + span {
  background-color: #4ac494;
  color: #fff;
}

.feedback-radio:hover span {
  background-color: #0056b3;
  color: #fff;
}

.os-mark-as-complete {
  display: flex;
  padding: 5%;
  justify-content: space-around;
  gap: 20px;
  margin-top: 5%;
  margin-bottom: 5%;
  background-color: #46aa7533;
  border-radius: 17px;
}

.delay-hover {
  pointer-events: none;
  cursor: not-allowed;
}

.pricing-points-text {
  margin-top: 0px;
  color: #112d1e;
}

.pricing-reviews {
  background-color: #ffffff;
  padding: 3%;
  border-radius: 20px;
  margin-bottom: 20px;
  display: none;
}

.pricing-reviews-active {
  display: block; /* Show only the active review */
}

.p-review-name {
  font-family: "BrandonText" !important;
}

.pricing-tick-svg {
  width: 20px;
  background-color: #ffffffb5;
  border: 0px solid;
  border-radius: 50px;
  padding: 5px;
  cursor: pointer;
}

.pricing-points {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.inner-drop-down-menu-pricing {
  display: flex;
  padding: 3%;
  gap: 20px;
}

.inner-drop-down-menu-pricing .pricing-column {
  flex: 1;
}

.pricing-bits {
  margin-top: 20px;
  background-color: #46aa7542;
  padding: 20px;
  border-radius: 20px;
}

.strong-pricing-text {
  color: #112d1e;
}

.p-review-text {
  margin-top: 0px;
}

.pricing-plans,
.plan-options {
  display: flex;
  gap: 10px;
  align-items: center;
}

.plan-options {
  background-color: #c5e6d3;
  padding: 5px;
  border-radius: 9px;
}

.actual-price {
  background-color: #c5e6d3;
  padding: 10px;
  border-radius: 9px;
  transition: opacity 0.3s ease-in-out;
}

.plan-active {
  background-color: #ffffffbf;
  padding: 5px;
  border-radius: 7px;
  transition: background-color 0.3s ease-in-out;
}

.plan-term {
  margin-top: 0px;
  font-family: "BrandonText" !important;
  border-radius: 9px;
  color: #1b4a37;
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  transition: background-color 0.3s ease-in-out;
  user-select: none; /* Prevent text selection */
  -webkit-user-select: none; /* Prevent text selection in WebKit browsers */
  -moz-user-select: none; /* Prevent text selection in Firefox */
  -ms-user-select: none; /* Prevent text selection in IE/Edge */
  -webkit-tap-highlight-color: transparent; /* Disable click highlight on mobile devices */
}

.plan-term:hover {
  background-color: #ffffffbf;
  transition: background-color 0.3s ease-in-out;
}

.actual-price {
  margin-top: 0px;
  font-family: "BrandonText" !important;
  color: #1b4a37;
}

.all-plans-include {
  margin-top: 0px;
  margin-bottom: 10px;
  font-family: "BrandonText" !important;
  color: #112d1e;
  font-size: 1.1em;
}

.reviews-in-title {
  margin-top: 0px;
  font-family: "BrandonText" !important;
  margin-bottom: 20px;
  font-size: 1.1em;
}

.review-container {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  background-color: #ffffff; /* Background color */
  padding: 10px;
  border-radius: 10px; /* Rounded corners */
  color: #fff; /* Text color */
  margin-bottom: 20px;
}

.avatars {
  display: flex;
  align-items: center;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0px solid #232323;
  margin-left: -10px;
  background-size: 110%;
  background-position: center;
}

.avatar:first-child {
  margin-left: 0;
}

.rating {
  display: block;
  margin-left: 10px;
}

.stars {
  color: #ffc107; /* Star color */
  font-size: 20px;
}

.review-text {
  font-size: 16px;
}

.review-text strong {
  font-weight: bold;
}

.review-text-users {
  color: #1b4a37;
}

.reviews-header {
  display: flex;
  gap: 20px;
}

.cta-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cta-text {
  margin-top: 0px;
  font-family: "BrandonText" !important;
  color: white;
}

@media (max-width: 1410px) {
  .nav-text {
    font-size: 0.8em !important;
  }

  .accordion-arrow {
    width: 15px;
  }

  body > header > div > a > img {
    height: 25px;
  }

  .sub-menu-category-text {
    font-size: 0.8em !important;
  }

  .new-navigation {
    gap: 3px !important;
  }

  body > header > div > div.new-navigation > div:nth-child(11) {
    display: none;
  }
}

@media (max-width: 1102px) {
  .hamburger-menu {
    display: flex !important;
  }

  .new-navigation {
    display: none;
  }
}

.trending-menu-fix {
  padding: 2%;
  background-color: #ffffffde;
  border-radius: 38px;
  align-content: center;
}

/* Hamburger menu icon */
.hamburger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 24px;
  cursor: pointer;
  z-index: 1001;
  margin-top: auto;
  margin-bottom: auto;
}

.hamburger-menu .bar {
  height: 3px;
  width: 100%;
  background-color: #fafafe;
  border-radius: 10px;
}

.hamburger-menu .active-ham {
  background-color: black !important;
}

/* Responsive menu overlay */
.menu-overlay {
  display: none; /* Hide by default */
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  overflow: hidden; /* Hide overflow */
  justify-content: center;
  opacity: 0; /* Start with opacity 0 */
  transform: translateY(-100%); /* Start with transform out of view */
  transition: opacity 0.5s ease, transform 0.5s ease; /* Add transition for opacity and transform */
}

.menu-overlay.active {
  display: flex;
  opacity: 1; /* Make it fully opaque */
  transform: translateY(0); /* Bring it into view */
}

.menu-overlay .close-btn {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 24px;
  color: #fff;
  cursor: pointer;
}

.menu-overlay .menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #fff;
}

.menu-overlay .menu-content a {
  text-decoration: none;
  color: black;
  font-size: 24px;
  margin: 10px 0;
  font-family: "BrandonText";
}

.menu-overlay .menu-buttons {
  margin-top: 50px;
}

.menu-overlay .menu-buttons .btn {
  margin: 5px;
  font-size: 0.8em !important;
  padding: 10px 30px;
  border-radius: 10px !important;
}

.mini-menu-text:hover {
  color: blue;
}

/* Disable body scroll when overlay is active */
.body-no-scroll {
  overflow: hidden;
}

div.trending-menu.trending-menu-fix > h3 {
  font-size: 1.3em;
}

.mini-menu-text {
  transition: transform 500ms;
}

.mini-menu-text:hover {
  cursor: pointer;
  transition: transform 125ms;
  transform: translateY(-5px);
  color: #4ac494;
}

body,
.smooth-container {
  scroll-behavior: smooth;
}

.sub-menu-qbank {
  flex: 1;
}

.nav-header-qbank {
  background-color: white;
}

.go-button {
  width: 16px;
  color: white;
  margin-top: 0px;
}

.go-btn {
  padding: 5px 13px !important;
  display: flex !important;
  gap: 5px;
  align-items: center;
  user-select: none;
}

.pricing-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

div.boxes-text {
  color: #57578f;
  font-size: 18px;
}

/* Styled form */

.styled-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  margin-top: 50px;
  margin-bottom: 50px;
}

.styled-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #333;
  font-family: "BrandonText" !important;
}

.styled-form input[type="text"],
.styled-form input[type="email"],
.styled-form input[type="tel"],
.styled-form textarea {
  width: 100% !important;
  padding: 10px !important;
  margin-bottom: 20px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
  font-family: "BrandonText-Regular" !important;
}

.styled-form textarea {
  resize: vertical;
  height: 150px;
}

.styled-form button {
  background-color: #6366f1;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-family: "BrandonText" !important;
  cursor: pointer;
}

.styled-form button:hover {
  background-color: #4f46e5;
}

#form-message {
  text-align: center;
  background-color: #edfbf4;
  margin-bottom: 20px;
  margin-top: 20px;
  padding: 3%;
  border-radius: 20px;
}

#form-message p {
  font-size: 20px;
  color: #487961;
  font-family: "BrandonText" !important;
  margin-top: 0px;
}

.faq-custom .panel {
  font-size: 19px !important;
}

.sidebar-active {
  background-color: #e6f1ea;
}

div.comment-author-vcard-reply-line > div.reply.btn.btn-blue > a {
  color: white;
}

body
  > section
  > section
  > section
  > section.welcome-second-section
  > div.welcome-content
  > div.arm_setup_form_container
  > div
  > div
  > div {
  margin: 0px auto !important;
}

.button-tag-beta {
  background: #3cae7530;
  padding: 1px 9px;
  border-radius: 11px;
  color: #3cae75;
  font-family: "BrandonText" !important;
  margin-top: 0px;
}

.button-tag-os-engine {
  background: #6a6df229;
  padding: 1px 9px;
  border-radius: 11px;
  color: #696df2;
  font-family: "BrandonText" !important;
  margin-top: 0px;
}

.button-tags {
  display: flex;
  gap: 10px;
  justify-content: center;
}