* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "unbounded", sans-serif;
}

:root {
  --unbounded: "Unbounded", sans-serif;
  --inter: "Inter", sans-serif;
}

html,
body {
  background-color: #0b0c0d;
}

.mobileMenuToggle,
.mobileMenuPanel {
  display: none;
}


.navbarContainer {
  padding: 24px 108px;
  width: 100%;
  background-color: #0b0c0d;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      to right,
      #000 1%,
      rgba(255, 255, 255, 0.112) 7%,
      rgba(255, 255, 255, 0.112) 93%,
      #000 99%
    )
    1;
}

.navSignup {
  padding: 24px 108px;
  width: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbarContainer .navContent {
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navContent .navLinks {
  display: flex;
  align-items: center;
  gap: 36px;
}

.navLinks a {
  color: #dce0e3;
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  color: #dce0e3;
}

.navLinks a:hover {
  color: #fa5b5a;
}

.navContent .navLogo {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.navLogo p {
  color: #fff;
  text-align: center;
  font-family: var(--unbounded);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.navRightContent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.navRightContent .profileBtn {
  display: flex;
  padding: 14px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
}

.profileBtn a {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  text-transform: capitalize;
}

.profileBtn:hover .searchBtn:hover {
  background-color: #ffaead14;
}

.profileBtn:hover a {
  color: #ffaead;
}

.searchWrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: width 0.3s ease;
  max-width: 40px;
  transition: max-width 0.3s ease;
}

.searchWrapper.active {
  max-width: 270px;
}

.searchBtn {
  display: flex;
  padding: 14px;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: background 0.3s;
}

.searchBtn:hover {
  background-color: #ffaead14;
}

.searchBtn:hover svg path {
  stroke: #ffaead;
}

.searchBtn.active {
  background-color: #ffaead14;
}

.searchBtn.active svg path {
  stroke: #ffaead;
}

.searchInput {
  width: 0;
  opacity: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: white;
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  outline: none;
  transition: width 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
  white-space: nowrap;
  padding-left: 40px;
}

.searchInput:focus {
  border: black;
}

.searchWrapper.active .searchInput {
  width: 200px;
  opacity: 1;
  pointer-events: auto;
}

.searchInput::placeholder {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.searchInputContent {
  position: relative;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, width 0.3s ease;
}

.searchInputContent svg {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.searchWrapper.active .searchInputContent {
  opacity: 1;
  width: 200px;
  overflow: visible;
}

.navContent .navLang {
  display: flex;
  align-items: center;
  gap: 11px;
  color: white;
}

.navLang a {
  font-family: var(--inter);
  color: white;
  text-decoration: none;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: center;
  vertical-align: middle;
  transition: all 0.2s ease;
}

.navLang a:hover {
  color: #fa5b5a;
}

.home-hero-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(
    --Background-gradient-1,
    radial-gradient(
      52.69% 50% at 50% 50%,
      rgba(223, 28, 53, 0.4) 0%,
      rgba(48, 15, 20, 0.4) 80.29%,
      #0b0c0d 100%
    )
  );
}

.heroMainOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(
    --Background-gradient-1,
    radial-gradient(
      52.69% 50% at 50% 50%,
      rgba(223, 28, 53, 0.4) 0%,
      rgba(48, 15, 20, 0.4) 80.29%,
      #0b0c0d 100%
    )
  );
  z-index: 2;
}

.home-hero-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.5);
}

.home-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 820px;
  padding: 80px 20px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  box-sizing: border-box;
}

.home-hero-video-box video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero-content .subtitle {
  background: var(
    --Title-gradient-1,
    linear-gradient(90deg, #fa5b5a 0%, #ffc2c2 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.home-hero-content .home-hero-title h1 {
  color: var(--Main-White-0, #fff);
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: 56px;
}

.home-hero-content .home-hero-description p {
  color: var(--Main-White---50, #dce0e3);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.home-hero-video-box {
  width: 768px;
  aspect-ratio: 16/9;
}

.home-hero-cta-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.home-hero-cta-group .hero-btn-and-review {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(
    --Price-gradient-1,
    linear-gradient(89deg, #dce0e3 0%, #ebeced 100%)
  );
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  gap: 8px;
  cursor: pointer;
}

.hero-btn-and-review a {
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.hero-btn-and-review:hover{
  background: var(--Main-White-0, #FFF);
box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}
.hero-btn-and-review:hover a {
  color: #fa5b5a;
}
.hero-btn-and-review:hover svg path{
  fill: #fa5b5a;
}

.home-hero-review-box {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #ccc;
}

.home-hero-avatars {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #000;
  object-fit: cover;
  margin-left: -10px;
  position: relative;
  z-index: 1;
  transition: z-index 0.2s;
}

.home-hero-avatars:first-child {
  margin-left: 0;
}

.home-hero-avatar2,
.home-hero-avatar3 {
  margin-left: -23px;
}

.home-hero-review-box .raiting span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.slideTextContainer {
  width: 100%;
  max-width: 864px;
  margin: 0 auto;
  background-color: #0b0c0d;
  overflow: hidden;
  padding: 32px 0;
}

.slideTextContent {
  display: flex;
  align-items: center;
  gap: 44px;
  width: max-content;
}

.textAndIcon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  white-space: nowrap;
}

.textAndIcon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(27%) sepia(72%) saturate(2900%)
    hue-rotate(330deg) brightness(92%) contrast(89%);
}

.textAndIcon p {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1;
}

.slideTextWrapper {
  display: flex;
  width: fit-content;
  animation: scrollLoop 5s linear infinite;
}

.oldJobContainer {
  width: 100%;
  padding: 100px 310px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.oldJobContainer .oldJobContent {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.oldJobContent .oldJobHead h1 {
  color: var(--Main-White-0, #fff);
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.oldJobContent .oldJobSpan p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.whyEducateContainer {
  width: 100%;
  height: 772px;
  position: relative;
}

.whyEducateContainer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.whyEducateContainer .educateOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    52.89% 33.53% at 50.69% 64.55%,
    rgba(223, 28, 53, 0.4) 0%,
    rgba(48, 15, 20, 0.4) 32.02%,
    #0b0c0d 100%
  );
  z-index: 2;
}

.whyEducateContainer .whyEducateContent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 200px 120px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.whyEducateContent .stepTextAndLineEducate {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stepTextAndLineEducate .LeftLine {
  width: 505px;
  height: 1px;
  background: var(
    --Line-gradient-1,
    linear-gradient(270deg, #fff 0%, #ffc2c2 12%, #fa5b5a 30%, #0b0c0d 100%)
  );
}

.stepTextAndLineEducate .stepText p {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: var(
    --Title-gradient-1,
    linear-gradient(90deg, #fa5b5a 0%, #ffc2c2 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stepTextAndLineEducate .rightLine {
  width: 505px;
  height: 1px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #ffc2c2 12%,
    #fa5b5a 30%,
    #0b0c0d 100%
  );
}

.whyEducateContent .whyEducateHead h1 {
  color: var(--Main-White-0, #fff);
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.educateCardContent {
  display: flex;
  padding-top: 40px;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.educateCardContent .educateCard {
  width: 386.67px;
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(3px);
}

.educateCard .cardText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

.cardText p {
  color: var(--Main-White-0, #fff);
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.cardText span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.studensVideosContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: relative;
}

.studensVideosContainer .studentHeadAndLine {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.studentHeadAndLine p {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: var(
    --Title-gradient-1,
    linear-gradient(90deg, #fa5b5a 0%, #ffc2c2 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.studentHeadAndLine .studentTextLine {
  background: var(
    --Line-gradient-1,
    linear-gradient(90deg, #fff 0%, #ffc2c2 12%, #fa5b5a 30%, #0b0c0d 100%)
  );
  height: 1px;
  width: 500px;
}

.videosContent {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 38px;
}

.videosContent .video-container {
  width: 780px;
  height: 444px;
  flex-shrink: 0;
}

.video-container video {
  width: 100%;
  object-fit: cover;
}

.studensVideosContainer .scrollBtn {
  display: flex;
  width: 780px;
  justify-content: space-between;
  align-items: center;
  position: absolute;
}

.scrollBtn .leftBtn,
.scrollBtn .rightBtn {
  display: flex;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  z-index: 4;
  border-radius: 40px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.studentVideoPagination {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  gap: 8px;
  background-color: #999;
  border-radius: 40px;
  position: absolute;
  top: 91%;
  z-index: 999;
}

.studentVideoPagination span {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  opacity: 0.5;
  background: var(--Main-White-0, #fff);
}

.scrollBtn .leftBtn:hover svg path{
  stroke: #fa5b5a;
}
.scrollBtn .rightBtn:hover svg path{
  stroke: #fa5b5a;
}


.video-slide {
  transition: all 0.4s ease;
  transform: scale(0.9);
  opacity: 0.5;
  filter: brightness(0.6);
  z-index: 1;
}

.video-slide.active-slide {
  transform: scale(1.05);
  opacity: 1;
  filter: brightness(1);
  z-index: 2;
}

.careerContainer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 120px;
  background-color: #0b0c0d;
}

.careerContent {
  width: 100%;
  max-width: 1440px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  margin: 0 auto;
}

.careerLeftContent {
  max-width: 534px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
}

.careerStepAndText {
  display: flex;
  align-items: center;
  gap: 12px;
}

.careerStepAndText p {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fa5b5a 0%, #ffc2c2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.careerTextLine {
  width: 300px;
  height: 1px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #ffc2c2 12%,
    #fa5b5a 30%,
    #0b0c0d 100%
  );
}

.careerHead p {
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-weight: 400;
  color: #fff;
  line-height: 36px;
  text-transform: capitalize;
}

.careerSpan span {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #dce0e3;
}

.careerCtaGroup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.careerBtn {
  display: inline-flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  gap: 8px;
  cursor: pointer;
}

.careerBtn a {
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.careerBtn:hover {
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}
.careerBtn:hover a {
  color: #fa5b5a;
}
.careerBtn:hover svg path {
  fill: #fa5b5a;
}

.home-hero-review-box {
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-hero-avatars {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0b0c0d;
}

.raiting span {
  font-size: 14px;
  color: #dce0e3;
}

.careerRightContent {
  position: relative;
  width: 534px;
  height: 508px;
}

.rightImageContent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.imageAndOverlay {
  width: 100%;
  height: 100%;
  position: relative;
}

.imageAndOverlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.careerOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(11, 12, 13, 0) 20%, #0b0c0d 100%);
  z-index: 2;
  border-radius: 12px;
}

.leftLineAndtext {
  position: absolute;
  bottom: 30px;
  left: 30px;
  display: flex;
  gap: 12px;
  z-index: 3;
  max-width: 90%;
  color: white;
}

.leftLine {
  width: 1px;
  height: auto;
  background-color: #fff;
}

.imageText {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.imageText span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #fff;
}

.imageText p {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.userCommendContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  gap: 30px;
  overflow: hidden;
}

.userCommendContainer .stepTextAndLineEducate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.userCommmendContainer .userCommentHead {
  display: flex;
  justify-content: center;
  align-content: center;
  margin-bottom: 50px;
}

.userCommentHead p {
  color: var(--Main-White-0, #fff);
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
  margin-bottom: 50px;
}

.userCommentMainCardContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  justify-content: flex-start;
  cursor:grabbing;
}

.userCommentContentTop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  overflow: hidden;
  position: relative;
}


.noteEditForm {
  display: none;
  width: 100%;
  margin-top: 15px;
  align-items: flex-start;
  justify-content: flex-start;
}

.noteEditForm label {
  color: #fff;
  font-family: 'inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
}

.noteEditForm textarea {
  width: 800px;
  padding: 10px;
  min-height: 130px;
  margin: 0 0 24px 0;
  border-radius: 8px;
  background: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  border: none;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.formButtons {
  display: flex;
  gap: 10px;
}

.save-btn {
  padding: 8px 16px;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.cancel-btn {
  padding: 8px 16px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.noteIconAndText {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #DCE0E3;
  cursor: pointer;
  padding: 0;
}



/* Edit form styling */
.noteEditForm {
  display: none;
  width: 100%;
  margin-top: 15px;
}

.noteEditForm label {
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.noteEditForm textarea {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  min-height: 80px;
  margin: 0 0 24px 0;
  border-radius: 8px;
  background: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  border: none;
  resize: none;
}

.formActions {
  display: flex;
  gap: 10px;
}

.saveNoteBtn {
  padding: 8px 16px;
  border: 1px solid #FFF;
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: #fff;
  color: #000;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
}

.cancelNoteBtn {
  padding: 8px 16px;
  border: 1px solid #fff;
  border-radius: 12px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
}

/* Action buttons */
.keepNoteIcons {
  display: flex;
  gap: 15px;
  width: 100%;
  
}
.keepNote p{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: 700px;
}

.editNoteBtn ,
.deleteNoteBtn {
  background: none;
  border: none;
  color: #DCE0E3;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}

.editNoteBtn span,
.deleteNoteBtn span{
  font-family: 'Inter', sans-serif;
}

.userCommentContentTop .userCommentCard {
  display: flex;
  width: 348px;
  padding: 28px 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 12px;
  gap: 90px;
  margin-left: auto;
  border: 1px solid var(--Main-Black---100, #28292a);
  background: var(--Main-Black---80, #101112);
}

.userCommentContentBottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  overflow: hidden;
  position: relative;
}

.userCommentContentBottom .userCommentCard {
  display: flex;
  width: 348px;
  padding: 28px 24px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 12px;
  gap: 90px;
  flex-shrink: 0;
  border: 1px solid var(--Main-Black---100, #28292a);
  background: var(--Main-Black---80, #101112);
}

.userCommentCard .userCommentCardTop {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.userCommentCardTop .commentStars {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.userCommentCardTop .commentText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.userCommentCardBottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  animation-play-state: paused;
}

.userCommentCardBottom:hover{
  animation-play-state: paused;
}

.userCommentCardBottom .userProfilFoto {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.userCommentCardBottom .userProfilFoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.userCommentCardBottom .userNameAndText {
  display: flex;
  flex-direction: column;
}

.userNameAndText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.userNameAndText span {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.pricingContainer {
  width: 100%;
  position: relative;
 min-height: 100vh;

}

.pricingContainer video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1; /* Overlaydən aşağıda olacaq */
}

.pricingContainer .pricingOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(
    --Background-gradient-2,
    radial-gradient(
      52.89% 33.53% at 50.69% 64.55%,
      rgba(223, 28, 53, 0.4) 0%,
      rgba(48, 15, 20, 0.4) 32.02%,
      #0b0c0d 70%
    )
  );
  z-index: 2;
}

.pricingContainer .pricingContent {
  position: relative; /* Change from absolute to relative */
  width: 100%;
  padding: 120px 310px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.pricingContent .stepTextAndLineEducate {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pricingContent .pricingHead p {
  color: var(--Main-White-0, #fff);
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
  margin-bottom: 12px;
}

.pricingPackageContent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  margin-bottom: 36px;
}

.pricingPackageContent .pricingPackageCard {
  display: flex;
  width: 380px;
  padding: 36px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 36px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(12px);
}

.pricingWrapper {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.pricingPackageCard .packageStartedText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.packageStartedText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.packageStartedText span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.pricingPackageCard .pricingPriceText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.pricingPackageCard .pricingPriceText span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.packagesBenefitsContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

 .benefitIconAndText {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 24px;
}


.benefitIconAndText img{
  width: 100%;
  max-width: 21px;
  min-height: 21px;

}

.benefitIconAndText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.packageBuyBtn {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  margin-top: auto;
}

.packageBuyBtn a {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.allPackageBtn {
  display: flex;
  width: 308px;
  height: 48px;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  gap: 8px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  text-decoration: none;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.allPackageBtn:hover {
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
  color: #fa5b5a;
}

.allPackageBtn:hover svg path {
  fill: #fa5b5a;
}

.answerAndQuestionContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 40px;
  gap: 24px;
}

.answerAndQuestionContainer .stepTextAndLineEducate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.answerAndQuestionContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
}

.answerAndQuestionContent .answerAndQuestionHead {
  display: flex;
  justify-content: center;
  align-items: center;
}

.answerAndQuestionContent .answerAndQuestionHead p {
  color: var(--Main-White-0, #fff);
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.answerAndQuestion {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  max-width: 820px;
  font-family: "Inter", sans-serif;
}

.answerAndQuestionItem {
  width: 100%;
  border-radius: 12px;
  background: var(--Main-Black---80, #101112);
  backdrop-filter: blur(3px);
  padding: 20px;
  transition: background 0.4s ease;
  overflow: hidden;
  cursor: pointer;
}

.answerAndQuestionItem:hover{
  background-color: #fff;
}

.answerAndQuestionItem:hover p{
  color: #000;
}
.answerAndQuestionItem:hover svg path{
  stroke: #000;
}

.answerItem {
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.answerItem p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.questionItem {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.4s ease;
}

.questionItem p {
  color: var(--Main-White-0, #000);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.toggleIcon {
  transition: transform 0.4s ease, stroke 0.4s ease;
  transform-origin: center;
}

.answerAndQuestionItem.open .toggleIcon {
  transform: rotate(45deg);
}

.answerAndQuestionItem .toggleIcon path {
  transition: stroke 0.4s ease;
}

.answerAndQuestionItem.open .toggleIcon path {
  stroke: #000;
}

.answerAndQuestionItem.open {
  background-color: #fff;
}

.answerAndQuestionItem.open .answerItem p {
  font-weight: 700;
  color: #000;
}

.answerAndQuestionItem.open .questionItem {
  margin-top: 16px;
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.signupLastContainer {
  width: 100%;
  padding: 80px 310px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signupLastContent {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.signupLastContent .imageBox {
  width: 100%;
  height: 288px;
}

.signupLastContent .imageBox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  border-radius: 12px;
  border: 1px solid #4a4949;
}

.signupLastContent .imageBox .signupLastOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: 12px;
  background: radial-gradient(
    159.2% 69.77% at 50% 0%,
    rgba(48, 15, 20, 0.4) 16.98%,
    #0b0c0d 100%
  );
  border: 1px solid #4a4949;
}

.signupLastContent .signupLastMainContent {
  position: absolute;
  top: 20%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.signupLastMainContent .stepTextAndLineEducate {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.signupLastMainContent .stepTextAndLineEducate .LeftLine,
.signupLastMainContent .stepTextAndLineEducate .rightLine {
  width: 200px;
}

.signupLastHead p {
  color: var(--Main-White-0, #fff);
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.signupLastBtn {
  display: flex;
  width: 152px;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  gap: 8px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.signupLastBtn a {
  text-decoration: none;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.signupLastBtn:hover {
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}

.signupLastBtn:hover a {
  color: #fa5b5a;
}

.signupLastBtn:hover svg path {
  fill: #fa5b5a;
}

.heroContainer {
  background-image: url("/assets/image/profilSettingBack.png"); /* ✅ arxa fon */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 100vh;
  padding: 100px 120px; /* ✅ üst boşluq və yanlardan padding */
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
  position: relative;
}

.heroContainer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gradient-3, radial-gradient(74.88% 50.03% at 50% 50.03%, rgba(223, 28, 53, 0.40) 0%, rgba(48, 15, 20, 0.40) 68.27%, #0B0C0D 100%));
  z-index: 0;
}


.heroMainContainer {
  display: flex;
  width: 100%;
  max-width: 1440px;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
}

.heroMainContainer .heroContent {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
}

.heroContent .profSettingSide {
  display: flex;
  width: 288px;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(12px);
}

.profSettingSide .settingSideHead {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.settingSideHead p {
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.settingSideFoto {
  width: 100%;
  height: 100px;
  align-self: stretch;
}

.settingSideFoto img {
  width: 100%;
  border-radius: 12px;
  height: 100%;
  object-fit: cover;
}

.settingSideLink {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.settingSideLink P {
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 12px;
  width: 100%;
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.settingSideLink p:hover {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fa5b5a;
}

.settingSideLink p.active {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fa5b5a;
}

.profSettingMainContent {
  flex: 1;
  width: 100%;
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  padding: 48px 60px 60px 60px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--Main-Black---80, #101112);
  margin-bottom: 50px;
}

.profSettingMainContent .rightContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.rightContent .SettingMainHead {
  margin-bottom: 32px;
}

.rightContent .SettingMainHead p {
  color: #fff;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.rightContent .settingRightLinks {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-bottom: 40px;
}

.settingRightLinks p {
  color: var(--Main-White---50, #dce0e3);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  padding: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.settingRightLinks p:hover {
  color: #fa5b5a;
  border-bottom: 1px solid #fa5b5a;
}

.settingRightLinks p.active {
  color: #fa5b5a;
  border-bottom: 1px solid #fa5b5a;
}

.rightSubContent {
  width: 100%;
}

.rightSubContent .passInputContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 34px;
}

.passInputContent input {
  display: flex;
  padding: 16px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid var(--Main-Black---100, #28292a);
  background: rgba(78, 74, 75, 0.2);
  outline: none;
  color: #fff;
  font-family: "Inter", sans-serif;
}

.passInputContent input::placeholder {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.passInputContent input:focus {
  outline: 1px solid #fa5b5a;
}

.rightSubContent .changePassBtn {
  margin-bottom: 50px;
  display: inline-flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: var(
    --Price-gradient-1,
    linear-gradient(89deg, #dce0e3 0%, #ebeced 100%)
  );
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.rightSubContent .changePassBtn:hover{
    background: var(--Main-White-0, #FFF);
box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}

.passInputContaier button {
  border: 0;
  background: transparent;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  text-transform: capitalize;
  cursor: pointer;
}

.passInputContaier button:hover {
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
  color: #fa5b5a;
}

.passInputContent .profNameInfo {
  display: flex;
  padding: 16px 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid var(--Main-Black---100, #28292a);
  background: rgba(78, 74, 75, 0.2);
}

.profNameInfo p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-transform: capitalize;
}

.rightSubContent .profImageContent {
  width: 100%;
  height: 280px;
  align-self: stretch;
  margin-bottom: 32px;
}

.profImageContent img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.changePassBtn label {
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  text-transform: capitalize;
  cursor: pointer;
}

.changePassBtn:hover label{
  color: #fa5b5a;
}

.rightSubContent .deleteAccountText {
  width: 100%;
  margin-bottom: 32px;
}

.deleteAccountText span {
  color: #f9a1a1;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.deleteAccountText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.rightSubContent .deleteAccountBtn {
  display: inline-flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
}

.deleteAccountBtn a {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.logoutModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    77.41% 77.4% at 50% 50%,
    rgba(255, 255, 255, 0.2) 29.89%,
    rgba(87, 87, 87, 0.2) 60.73%,
    rgba(0, 0, 0, 0.2) 100%
  );
  backdrop-filter: blur(6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.logoutModalContent {
  width: 532px;
  display: flex;
  padding: 48px 64px 64px 64px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 44px;
  border-radius: 12px;
  border: 1px solid var(--Main-Black---80, #101112);
  background: var(--Main-Background, #0b0c0d);
  box-shadow: 0px 0px 40px 0px rgba(255, 255, 255, 0.08);
}

.logoutModalContent p {
  color: #fff;
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.modalActions {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
  justify-content: flex-end;
}

.modalActions button {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#confirmLogout {
  border-radius: 12px;
  background: var(
    --Price-gradient-1,
    linear-gradient(89deg, #dce0e3 0%, #ebeced 100%)
  );
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

#cancelLogout {
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  background: none;
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.logoutModalContent .loginLineAndText .subtitle {
  background: var(
    --Title-gradient-1,
    linear-gradient(90deg, #fa5b5a 0%, #ffc2c2 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.rightSubContent .subsPlanContent {
  width: 100%;
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
}

.subsPlanContent .subsPlanTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 24px;
}

.subsPlanTop .subsTopLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.subsTopLeft p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.subsTopLeft span {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  background: rgba(255, 174, 173, 0.2);
  color: var(--Main-Red---50, #ffaead);
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
}

.subsPlanTop .subsTopRight p {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.subsPlanTop .subsTopRight span {
  color: var(--Main-Red---50, #ffaead);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.rightSubContent .subsPlanMiddle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.subsPlanMiddle .subsMiddleLeft {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.subsMiddleLeft .middleChartText {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: 5px;
}

.middleChartText p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.middleChartText span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.subsMiddleRight a {
  color: var(--Main-Red---0, #fa5b5a);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.subsMiddleRight a:hover {
  text-decoration: underline;
}

.subsBottomLine {
  height: 1px;
  align-self: stretch;
  border-radius: 8px;
  background: var(
    --Divider-gradient-1,
    linear-gradient(
      270deg,
      rgba(40, 41, 42, 0) 0%,
      #28292a 10%,
      #28292a 90%,
      rgba(40, 41, 42, 0) 100%
    )
  );
  margin-bottom: 18px;
}

.subsPlanBottom {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
}

.subsPlanBottom p {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.subsPlanBottom a {
  color: var(--Main-Red---0, #fa5b5a);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.plansButtons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.plansButtons .changePlan {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.plansButtons .cancelPlan {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.paymHistoryContent {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.subsPlanContent .divider {
  height: 1px;
  align-self: stretch;
  border-radius: 8px;
  background: var(
    --Divider-gradient-1,
    linear-gradient(
      270deg,
      rgba(40, 41, 42, 0) 0%,
      #28292a 9.62%,
      #28292a 90.38%,
      rgba(40, 41, 42, 0) 100%
    )
  );
}

.paymHistoryContent p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.paymHistoryContent span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  width: 103px;
}

.paymHistoryContent a {
  color: var(--Main-Red---50, #ffaead);
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.paymHistoryContent .canceledPaym {
  color: var(--Main-Black---150, #4e4a4b);
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.rightSubContent .infoDescriptionHead {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.rightSubContent .infoDescriptionHead p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.rightSubContent .infoDesriptionSpan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.rightSubContent .infoDesriptionSpan p {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.infoSkillsContents {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: flex-start;
}

.infoSkillsContents .infoLeftContents {
  width: 444px;
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
}

.infoLeftElement1,
.infoLeftElement2,
.infoLeftElement3,
.infoLeftElement4 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 24px;
}

.infoLeftElement1 p,
.infoLeftElement2 p,
.infoLeftElement3 p,
.infoLeftElement4 p {
  width: 120px;
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.infoLeftElement1 span,
.infoLeftElement2 span,
.infoLeftElement3 span,
.infoLeftElement4 span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.infoLeftElement2 .reytingAndReview p {
  width: 20px;
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.infoLeftElement2 .reytingAndReview span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.infoLeftElement2 .reytingAndReview {
  display: flex;
  align-items: center;
  gap: 8px;
}

.infoRightContent {
  display: flex;
  width: 300px;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
}

.infoRightContent .infoRightHead p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.infoRightContent .skillsContent {
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  align-self: stretch;
  flex-wrap: wrap;
}

.skillsContent .skill {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: rgba(255, 174, 173, 0.04);
}

.skillsContent .skill p {
  color: var(--Main-Red---50, #ffaead);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.skillview {
  display: flex;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
}

.skillview p {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.skillview:hover {
  background-color: rgb(172, 161, 161);
}
.skillview:hover p {
  color: #fff;
}

.lessonActivityContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.lessonActivityContent .lessonActivityTop {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.lessonActivityTop .activityLeft {
  display: flex;
  padding: 16px 20px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1 0 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.activityLeft .IconAndCount {
  display: flex;
  align-items: center;
  gap: 12px;
}

.activityLeft .IconAndCount .activityIcon {
  display: flex;
  width: 36px;
  height: 36px;
  padding: 7.5px 8px 8.5px 8px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 400px;
  background: rgba(93, 98, 255, 0.12);
}

.activityIconRight {
  display: flex;
  width: 36px;
  height: 36px;
  padding: 7.5px 8px 8.5px 8px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1/1;
  border-radius: 400px;
  background: rgba(255, 87, 86, 0.08);
}

.activityLeft .IconAndCount p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.activityLeft .completeText p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.chart-container {
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.chartsHead {
  width: 100%;
  display: flex;
  padding: 8px;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      transparent 1%,
      rgba(40, 41, 42, 0.9) 15%,
      rgba(40, 41, 42, 0.9) 85%,
      transparent 99%
    )
    1;
}

.chartsHead p {
  color: rgba(255, 255, 255, 0.95);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
}

.chartsHead span {
  color: rgba(255, 255, 255, 0.55);
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

#learningChart {
  height: 300px !important;
}
canvas {
  width: 100%;
}

.materialsLinkContent {
  display: flex;
  width: 100%;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  margin-bottom: 40px;
}

.materialsLinkContent .materialsLinks {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  align-self: stretch;
}

.materialsLinks .module {
  width: 96px;
}

.materialsLinks .module p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.materialsLinks .moduleLink {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  flex: 1 0 0;
}

.moduleLink .linkAndIcon {
  display: flex;
  align-items: center;
  gap: 6px;
}

.moduleLink .linkAndIcon a {
  color: var(--Main-Red---50, #ffaead);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  line-height: 20px;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.moduleLink .linkAndIcon img {
  cursor: pointer;
}

.copy-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background: #222;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 9999;
}

.copy-toast.show {
  opacity: 1;
  bottom: 60px;
}

.materialDivid {
  height: 1px;
  align-self: stretch;
  border-radius: 8px;
  background: var(
    --Divider-gradient-1,
    linear-gradient(
      270deg,
      rgba(40, 41, 42, 0) 0%,
      #28292a 9.62%,
      #28292a 90.38%,
      rgba(40, 41, 42, 0) 100%
    )
  );
}

.downloadDocxContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.downloadDocxContent .downloadHead p {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
}

.resourceList {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.resourceList .resourceCard {
  display: flex;
  width: 100%;
  padding: 16px 20px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  border-radius: 8px;
  background: rgba(220, 224, 227, 0.08);
  border: 1px solid rgba(220, 224, 227, 0.08);
  cursor: pointer;
}

.resourceList .resourceCard:hover {
  background-color: #231e1f;
  border: 1px solid #fa5b5a;
}
.resourceList .resourceCard:hover h1 {
  color: #ffaead;
}
.resourceList .resourceCard:hover p {
  color: #ffaead;
}

.resourceCard .resourceCardTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.resourceCard .resourceCardTop h1 {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.resourceCard .resourceCardTop p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.resourceCard .resourceCardBottom span {
  width: 100%;
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.accordion {
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}

.accordion-header {
  background: #111; /* Sadə fon — dəyişməyəcək */
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  border-bottom: 1px solid #222;
}

.accordion-header:hover {
  background: #1a1a1a; /* Hover zamanı çox az fərqlə */
}

.accordion.active .accordion-header {
  border-radius: 8px 8px 0px 0px;
  border-bottom: 1px solid var(--Divider-gradient-1, rgba(40, 41, 42, 0));
  background: rgba(220, 224, 227, 0.08);
}

.left-side {
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent; /* Əlavə fon olmasın */
}

.left-side span:last-child {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

.moduleItem {
  width: 100%;
  padding: 25px 12px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  justify-content: space-between;
  border-bottom: 1px solid #333;
  margin: 0;
  display: flex;
}


.keepLearningLink{
  display: flex;
padding: 8px 12px;
justify-content: center;
align-items: center;
border-radius: 12px;
border: 1px solid var(--Main-White-0, #FFF);
color: var(--Main-White-0, #FFF);
font-family: 'Inter', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 20px;
gap: 12px;
text-decoration: none;
}

.keepLearningLink svg path{
fill: #fff;
}

.keepLearningLink:hover{
border: 1px solid var(--Main-Red---0, #FA5B5A);
color: #fa5b5a;
}
.keepLearningLink:hover svg path{
fill: #fa5b5a;
}

.moduleItemIconAndText{
  display: flex;
  align-items: center;
  gap: 8px;
}

.moduleItem p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.status-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #4a4647;
  display: inline-block;
  position: relative;
}

.status-circle.done {
  border-color: #ef5857;
}

.status-circle.done::after {
  content: "✔";
  color: #ef5857;
  position: absolute;
  font-size: 12px;
  top: -3px;
  left: 1px;
}

.accordion-details {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.right-info {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.active .accordion-details {
  display: block;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-right: 2px solid rgba(255, 255, 255, 0.04);
  border-bottom: 2px solid rgba(255, 255, 255, 0.04);
  border-left: 2px solid rgba(255, 255, 255, 0.04);
  background-color: #151617;
}

.pricingNextPageContent {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  box-sizing: border-box;
  z-index: 2;
}

.pricingNextPageContent .stepTextAndLineEducate {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pricingNextPageContent .stepTextAndLineEducate .LeftLine,
.pricingNextPageContent .stepTextAndLineEducate .rightLine {
  width: 400px;
}

.pricingNextPageHead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.pricingNextPageHead p {
  color: var(--Main-White-0, #fff);
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.pricingNexPagePackageMode {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pricingNexPagePackageMode .packageBronze {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.pricingNexPagePackageMode .packageBronze.active {
  display: flex;
  padding: 16px;
  align-items: center;
  gap: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 166, 166, 0.12);
  background: var(--Main-White-0, #fff);
}

.packageBronze:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.pricingNexPagePackageMode .packageBronze span {
  width: 16px;
  height: 16px;
  border: 2px solid #999; /* passiv: boz border */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Nöqtə default olaraq görünmür */
.pricingNexPagePackageMode .packageBronze span::after {
  content: "";
  width: 9px;
  height: 9px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; /* 🔴 gizli */
  transition: opacity 0.2s ease;
}

/* ✅ Aktiv olarsa border red, nöqtə görünür */
.pricingNexPagePackageMode .packageBronze.active span {
  border-color: red;
}

.pricingNexPagePackageMode .packageBronze.active span::after {
  opacity: 1;
}

.pricingNexPagePackageMode .packageBronze p {
  color: var(--Main-Black---80, #fff);
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

.pricingNexPagePackageMode .packageBronze.active p {
  color: var(--Main-Black---80, #000);
  font-family: "Unbounded", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
}

.packageContent {
  display: none;
  width: 590px;
  padding: 36px 36px 44px 36px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(4px);
}

.packageContent.active {
  display: block;
}

.packageBronzHeadAndPrice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 24px;
}

.packageBronzHeadAndPrice p {
  color: var(--Main-White-0, #fff);
  font-family: "Unbounded", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.packageBronzHeadAndPrice span {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.packageActivityText {
  margin-bottom: 24px;
}
.packageActivityTextSetting {
  margin-bottom: -24px;
}
.packageActivityText p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.packageActivityIconAndTextContent {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}
.packageActivityIconAndTextContentSetting {
  
  margin-bottom: -10px;
}

.packageActivityIconAndTextContent .activityIconAndText {
  display: flex;
  align-items: center;
  gap: 8px;
}
.packagesBenefitsContent .packageActivityIconAndTextContent .activityIconAndText {
  display: flex;
  align-items: center;
  gap: 8px;
}

.packageActivityIconAndTextContent .activityIconAndText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
}

.packageBuyNow {
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 12px;
  gap: 8px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.packageBuyNow:hover button {
  color: #fa5b5a;
}

.packageBuyNow:hover {
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}

.packageBuyNow:hover svg path {
  fill: #fa5b5a;
}

.packageBuyNow button {
  background: transparent;
  border: 0;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}

textarea::-webkit-scrollbar {
  width: 2px; /* scroll eni */
}

textarea::-webkit-scrollbar-track {
  background: transparent; /* arxa fon tamamilə şəffaf */
}

textarea::-webkit-scrollbar-thumb {
  background-color: #eb351e; /* scroll barın özü qırmızı */
  border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb:hover {
  background-color: #eb351e; /* hover zamanı tünd qırmızı */
}

textarea {
  scrollbar-width: thin;
  scrollbar-color: #eb351e transparent;
}

.notesBackContent {
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  margin-bottom: 24px;
}

.notesBackContent .noteContent {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 24px;
}

.notesContentDivid {
  width: 100%;
  height: 1px;
  align-self: stretch;
  border-radius: 8px;
  background: var(
    --Divider-gradient-1,
    linear-gradient(
      270deg,
      rgba(40, 41, 42, 0) 0%,
      #28292a 9.62%,
      #28292a 90.38%,
      rgba(40, 41, 42, 0) 100%
    )
  );
}

.noteContent .noteContentLeft {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 140px;
}

.noteContentLeft .noteLeftText p {
  color: var(--Main-White-0, #fff);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}
.noteContentLeft .noteLeftDate span {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.noteContentRight {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 34px;
}

.noteContentRight .noteUserText {
  width: 550px;
  display: flex;
  justify-content: flex-start;
}

.noteContentRight .noteUserText p {
  width: 100%;
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  word-break: break-word; /* ← uzun sözləri böl */
  white-space: pre-wrap; /* ← \n və boşluqları saxla, sərbəst sar */
}

.noteContentRight .noteEditAndDelete {
  display: flex;
  align-items: center;
  gap: 16px;
}

.noteEditAndDelete .noteIconAndText {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.noteIconAndText span {
  color: var(--Main-White---50, #dce0e3);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.noteIconAndText:hover span {
  color: #fa5b5a;
}
.noteIconAndText:hover svg path{
  stroke: #fa5b5a;
}

.seemoreNotesButton {
  display: inline-flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.seemoreNotesButton button {
  border: 0;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
  background: transparent;
}

.seemoreNotesButton:hover{
  background: var(--Main-White-0, #FFF);
box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}
.seemoreNotesButton:hover button {
  color: #fa5b5a;
}

.heroKeepContainer {
  background-image: url("/assets/image/profilSettingBack.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  min-height: 100vh;
  padding: 100px 120px;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0 auto;
}

.keepLearningContent {
  display: flex;
  width: 100%;
  max-width: 1200px;
  align-items: flex-start;
  gap: 24px;
  justify-content: center;
}

.keepLearningContent .keepLearningSideContent {
  display: flex;
  width: 288px;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(12px);
}

.keepSideHead {
  width: 100%;
}

.keepSideHead p {
  color: var(--Main-White-0, #fff);
  font-family: "Unbounded", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.keepSideHeadLine {
  width: 100%;
  height: 1px;
  background: var(
    --Divider-gradient-1,
    linear-gradient(
      270deg,
      rgba(40, 41, 42, 0) 0%,
      #28292a 9.62%,
      #28292a 90.38%,
      rgba(40, 41, 42, 0) 100%
    )
  );
}

.keepSideLessonRow {
  display: flex;
  padding-bottom: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  align-self: stretch;
}

.keepSideLessonRow .keepSideLesson {
  display: flex;
  padding: 12px 8px;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
}

.keepSideLesson:hover {
  cursor: pointer;
  background: rgba(255, 174, 173, 0.04);
}

.keepSideLessonActiveLine {
  border-left: 2px solid var(--Main-Red---0, #fa5b5a);
  background: rgba(255, 174, 173, 0.04);
}

.keepSideLesson .lessonCircle::after {
  content: "✔";
  color: #fa5b5a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 1px 0;
  font-size: 12px;
}

.keepSideLesson.keepSideLessonActive .iconAndText .lessonCircle {
  background: transparent;
  border: 1px solid #4e4a4b;
}

.keepSideLessonActive .lessonCircle::after {
  content: "";
}

.keepSideLesson .iconAndText {
  display: flex;
  align-items: center;
  gap: 8px;
}

.keepSideLesson .iconAndText .lessonCircle {
  width: 20px;
  height: 20px;
  aspect-ratio: 1/1;
  border-radius: 500%;
  border: 1px solid #fa5b5a;
  background-color: #3b191b;
}

.keepSideLesson .iconAndText p {
  display: flex;
  width: 65px;
  align-items: center;
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.keepSideLesson .lessonText p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.keepContentBox {
  display: none;
}

.keepLearningMainContent {
  display: flex;
  padding: 48px 60px 60px 60px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  flex: 1 0 0;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background: var(--Main-Black---80, #101112);
}

.keepContentBox.activeContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 40px;
}

.keepContentBox .keepBreadCramp {
  display: flex;
  align-items: center;
  gap: 4px;
}

.keepBreadCramp a {
  color: var(--Main-White---50, #dce0e3);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  text-decoration: none;
}

.keepBreadCramp p {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  background: var(
    --Title-gradient-1,
    linear-gradient(90deg, #fa5b5a 0%, #ffc2c2 100%)
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lessonVideoContent {
  display: flex;
  width: 100%;
  height: 432px;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16/9;
}

.lessonVideoContent video {
  width: 100%;
}

.lessonVideoElements {
  width: 100%;
}

.lessonElementHead {
  display: flex;
  gap: 24px;
  cursor: pointer;
}

.lessonNotes p {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #dce0e3;
  padding-bottom: 4px;
  position: relative;
  transition: all 0.3s ease;
}

.lessonNotes p.activeTab {
  color: #fa5b5a;
}

.lessonNotes p.activeTab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: #fa5b5a;
  border-radius: 2px;
}

.elementBox {
  width: 100%;
  display: none;
  margin-top: 16px;
  color: #dce0e3;
  font-size: 15px;
}

.elementBox.activeContent {
  display: block;
}

.textAreaContent {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 24px;
}

.textAreaContent #textArealesson {
  display: flex;
  height: 96px;
  padding: 8px;
  color: #fff;
  font-family: "Inter", sans-serif;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.textAreaContent #textArealesson::placeholder {
  color: var(--Main-White---100, #999797);
  text-align: left;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.textAreaContent .saveNotesButton {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.saveNotesButton button {
  background: transparent;
  border: 0;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  cursor: pointer;
}


.textAreaContent .saveNotesButton:hover {
   background: var(--Main-White-0, #FFF);
box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}
.textAreaContent .saveNotesButton:hover button{
  color: #fa5b5a;
}

.keepNoteContainer {
  width: 100%;
  display: flex;
  padding: 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  align-self: stretch;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  margin-bottom: 24px;
}

.keepNoteContainer .keepNoteContent {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 24px;
}

.keepNoteContent .keepNoteCount p {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.keepNoteTextAndIcons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
}

.keepNoteTextAndIcons .keepNote p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
   word-break: break-word;
  
}

.keepNoteTextAndIcons .keepNoteIcons {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
}

.keepNoteIcons .keepIconAndText {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.keepIconAndText span {
  color: var(--Main-White---50, #dce0e3);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}

.keepNoteIcons .keepIconAndText:hover span{
  color: #fa5b5a;
}
.keepNoteIcons .keepIconAndText:hover svg path{
  stroke: #fa5b5a;
}

.keepNoteLine {
  width: 100%;
  height: 1px;
  border-radius: 8px;
  background: var(
    --Divider-gradient-1,
    linear-gradient(
      270deg,
      rgba(40, 41, 42, 0) 0%,
      #28292a 9.62%,
      #28292a 90.38%,
      rgba(40, 41, 42, 0) 100%
    )
  );
}

.keepViewAllNotesBtn {
  display: inline-flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  cursor: pointer;
}

.keepViewAllNotesBtn button {
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.keepViewAllNotesBtn:hover {
   background: var(--Main-White-0, #FFF);
box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}

.keepViewAllNotesBtn:hover button {
  color: #fa5b5a;
}




.keepMaterialsLinkContent {
  display: flex;
  width: 768px;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(12px);
  margin-bottom: 40px;
}

.keepMaterialsLinkContent .materialsLinks {
  display: flex;
}

.keepReadingHead p {
  color: #fff;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

.keepReadingText p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.keepLessonPhotocontent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px;
}

.keepLessonPhotocontent .keepLessonFotoHead p {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
}

.keepLessonPhotocontent .keepLessonFotos {
  display: flex;
  align-items: center;
  gap: 24px;
}

.keepLessonPhotocontent .keepLessonFotos .lessonFoto {
  height: 224px;
  width: 372px;
  border-radius: 8px;
}

.keepLessonPhotocontent .keepLessonFotos .lessonFoto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.lessonCompleteBtn {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
}

.lessonCompleteBtn button {
  border: 0;
  background: transparent;
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}

.ratePackageButton {
  display: inline-flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  margin-bottom: 40px;
  cursor: pointer;
}

.ratePackageButton:hover{
    background: var(--Main-White-0, #FFF);
box-shadow: 0px 0px 20px 0px rgba(250, 91, 90, 0.24);
}

.ratePackageButton:hover button{
  color: #fa5b5a;
}

.ratePackageButton button {
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#ratePackagePopupModal {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ratePackageOverlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    77.41% 77.4% at 50% 50%,
    rgba(255, 255, 255, 0.2) 29.89%,
    rgba(87, 87, 87, 0.2) 60.73%,
    rgba(0, 0, 0, 0.2) 100%
  );
  backdrop-filter: blur(6px);
  z-index: 1;
}

.ratePackagePopupContent {
  display: flex;
  width: 384px;
  padding: 36px 36px 44px 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  border-radius: 12px;
  border: 1px solid var(--Main-Black---80, #101112);
  background: var(--Main-Background, #0b0c0d);
  box-shadow: 0px 0px 40px 0px rgba(255, 255, 255, 0.08);
  z-index: 1000;
}

.ratePackagePopupContent h2 {
  color: #fff;
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  text-transform: capitalize;
}

#ratePackageStarsWrapper {
  font-size: 32px;
  cursor: pointer;
  user-select: none;
  color: #fff;
}

.ratePopupButtons {
  display: flex;
  align-items: center;
  gap: 24px;
}

.rateStartAndCount {
  display: flex;
  align-items: center;
  gap: 12px;
}

#ratePackageStarsWrapper span {
  margin: 0 5px;
  transition: transform 0.2s ease;
}

#ratePackageStarsWrapper span:hover {
  transform: scale(1.2);
}

#ratePackageScoreLabel {
  font-size: 20px;
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

#ratePackageSubmitBtn,
#ratePackageCancelBtn {
  font-family: "Inter", sans-serif;
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  flex: 1 0 0;
}

#ratePackageSubmitBtn {
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
  background: var(--Main-White-0, #fff);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
}

#ratePackageCancelBtn {
  color: #fff;
  background: transparent;
  border-radius: 12px;
  border: 1px solid var(--Main-White-0, #fff);
}


#rateUserComment{
  display: flex;
padding: 12px 16px;
flex-direction: column;
justify-content: center;
align-items: flex-start;
align-self: stretch;
border-radius: 12px;
border: 1px solid var(--Main-Black---100, #28292A);
background: rgba(78, 74, 75, 0.20);
outline: none;
color: #fff;
resize: none;
}

#rateUserComment:focus{
  outline: #fa5b5a;
}

#rateUserComment::placeholder{
  color: var(--Main-White---100, #999797);

/* Inter/14/Regular */
font-family: 'Inter', sans-serif;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}

/* login page */

.heroContainerLogin {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 100px 0;
  box-sizing: border-box;
  background-color: black;
}

.heroBackLogin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.heroBackLogin video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-box {
  display: flex;
  flex-direction: column;
  gap: 20px;
  z-index: 1;
  
  width: 532px;
  padding: 48px 64px;
  text-align: center;
  color: white;
  border-radius: 12px;
  border: 1px solid var(--Main-Black---80, #101112);
  background: var(--Main-Background, #0b0c0d);
  position: relative;
}



.loginLineAndText {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.loginLineAndText .lineLeft {
  width: 130px;
  height: 1px;
  background: linear-gradient(
    270deg,
    #fff 0%,
    #ffc2c2 12%,
    #fa5b5a 30%,
    #0b0c0d 100%
  );
}

.loginLineAndText .lineRight {
  width: 130px;
  height: 1px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #ffc2c2 12%,
    #fa5b5a 30%,
    #0b0c0d 100%
  );
}

.login-box .subtitle {
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fa5b5a 0%, #ffc2c2 100%);
  background-clip: text;
  color: transparent;
}

.login-box h2 {
  color: #fff;
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 36px;
  margin-bottom: 30px;
}

.form-group {
  width: 100%;
  margin-bottom: 16px;
}

.form-group input {
  width: 100%;
  display: flex;
  padding: 17px 16px;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid var(--Main-Black---100, #28292a);
  background: rgba(78, 74, 75, 0.2);
  color: #fff;
}

.form-group p {
  color: var(--Main-White---100, #999797);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}

.form-group input::placeholder {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.custom-checkbox {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  user-select: none;
  margin-bottom: 40px;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.form-group input:focus {
  outline: none;
  border-color: #fa5b5a;
  background-color: rgba(255, 255, 255, 0.1);
}

.custom-checkbox .checkmark {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 1px solid #28292a;
  background: rgba(78, 74, 75, 0.2);
  backdrop-filter: blur(3px);
  display: inline-block;
  margin-right: 8px;
  position: relative;
  transition: all 0.2s ease;
}

.custom-checkbox input:checked ~ .checkmark {
  background: rgba(250, 91, 90, 0.2);
  border-color: #fa5b5a;
}

.custom-checkbox .checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid #fa5b5a;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.custom-checkbox input:checked ~ .checkmark::after {
  display: block;
}

.forgot {
  display: block;
  color: #dce0e3;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  text-decoration: none;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  margin-bottom: 17px;
}

.forgot:hover,
.forgot:focus {
  text-decoration: underline;
  outline: none;
  color: #a8c0ff;
}

.email-button {
  width: 100%;
  display: flex;
  padding: 12px 16px;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  border-radius: 12px;
  background: linear-gradient(88deg, #dce0e3 0%, #ebeced 100%);
  box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.24);
  cursor: pointer;
  gap: 8px;
  margin-bottom: 40px;
}

.rigthArrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.email-button:hover .rigthArrow {
  transform: translateX(14px);
}

.email-button a {
  color: var(--Main-Black---50, #0d0b0b);
  font-family: "Inter", sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.email-button:hover {
  background-color: white;
}

.divider {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-size: 13px;
  color: #999;
  margin-bottom: 20px;
  position: relative;
}

.divider .dividerLineLeft,
.divider .dividerLineRight {
  width: 134px;
  height: 1px;
  background-color: white;
  opacity: 0.4;
  background: var(--Main-Black---150, #4e4a4b);
}

.divider span {
  color: var(--Main-White---100, #999797);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.social-login {
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.social-login a {
  padding: 16px;
  display: flex;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: 0.2s linear;
}

.social-login a:hover {
  background-color: white;
}

.social-login a:hover svg path {
  fill: #0b0c0d !important;
}

.signup-text {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.signup-text a {
  text-decoration: none;
  color: var(--Main-Light-Red, #fa5b5a);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.signup-text a:hover {
  text-decoration: underline;
}

.mainFooter {
  width: 100%;
  padding: 60px 120px;
  display: flex;
  justify-content: center;
}

.footerContent {
  width: 100%;
  max-width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footerLogo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footerLogo img {
  width: 36px;
  height: 36px;
}

.footerTitle {
  color: var(--Main-White-0, #fff);
  text-align: center;
  font-family: "Unbounded", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

.footerSocials {
  display: flex;
  gap: 16px;
}

.footerSocials a {
  display: flex;
  width: 38px;
  height: 38px;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: 0.3s ease;
  cursor: pointer;
}

.footerSocials a:hover {
  background: #fa5b5a;
}

.footerLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-bottom: 8px;
}

.footerLinks a {
  color: var(--Main-White---50, #dce0e3);
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
}

.footerBottom {
  display: flex;
  padding: 12px 0px 24px 0px;
  justify-content: center;
  align-items: center;
  gap: 44px;
  align-self: stretch;
  border-top: 1px solid var(--Main-Black---80, #101112);
}

.footerBottom p {
  color: var(--Main-White---50, #dce0e3);
  text-align: right;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.footerBottom span {
  color: var(--Main-White---50, #dce0e3);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  line-height: 20px;
}



@media (max-width: 768px) {
  .navbarContainer {
    padding: 16px 20px;
  }

  .navContent {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Logo solda */
  .navLogo {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Desktop hissələri gizlədilir */
  .navLinks,
  .navRightContent {
    display: none !important;
  }

  /* Mobil menyu açma düyməsi */
  .mobileMenuToggle {
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* Mobil menyu panel */
  .mobileMenuPanel {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100vh;
    background-color: #0b0c0d;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: left 0.3s ease;
    z-index: 9999;
  }

  .mobileMenuPanel.active {
    left: 0;
  }

  .mobileNavLinks,
  .mobileAuthButtons {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .mobileLang {
    display: flex;
    gap: 20px;
  }

  .mobileMenuClose {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .mobileNavLinks a,
  .mobileLang a,
  .mobileAuthButtons a {
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 0;
  }

  .mobileAuthButtons .mobileProfileBtn {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 600;
    color: white;
    text-align: center;
  }

  .mobileAuthButtons .mobileProfileBtn:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }
  .home-hero-container {
    min-height: auto;
    padding: 60px 20px 40px;
  }

  .home-hero-content {
    padding: 60px 16px;
    gap: 28px;
  }

  .home-hero-content .subtitle {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1px;
  }

  .home-hero-content .home-hero-title h1 {
    font-size: 28px;
    line-height: 38px;
  }

  .home-hero-content .home-hero-description p {
    font-size: 16px;
    line-height: 22px;
  }

  .home-hero-video-box {
    width: 100%;
    aspect-ratio: 16/9;
  }

  .home-hero-cta-group {
    gap: 18px;
  }

  .home-hero-cta-group .hero-btn-and-review {
    padding: 12px 20px;
    width: 100%;
    justify-content: center;
    flex-direction: row;
  }

  .hero-btn-and-review a {
    font-size: 14px;
  }

  .home-hero-review-box {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 13px;
  }

  .home-hero-avatars {
    width: 28px;
    height: 28px;
    margin-left: -8px;
  }

  .home-hero-avatar2,
  .home-hero-avatar3 {
    margin-left: -18px;
  }

  .home-hero-review-box .raiting span {
    font-size: 13px;
  }

  .oldJobContainer {
    padding: 60px 16px;
    flex-direction: column;
    align-items: center;
  }

  .oldJobContainer .oldJobContent {
    width: 100%;
    gap: 20px;
    align-items: center; /* Mobil üçün mərkəzləmə */
    text-align: left;
  }

  .oldJobContent .oldJobHead h1 {
    font-size: 22px;
    line-height: 30px;
  }

  .oldJobContent .oldJobSpan {
    width: 100%;
  }
  .oldJobContent .oldJobSpan p {
    font-size: 16px;
    line-height: 22px;
  }

  .whyEducateContainer {
    width: 100%;
    position: relative;
    background: black;
    margin-bottom: 150px;
  }

  .whyEducateContainer video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  .whyEducateContainer .educateOverlay {
    z-index: 2;
  }

  .whyEducateContainer .whyEducateContent {
    position: relative;
    z-index: 3;
    padding: 80px 20px;
    gap: 20px;
  }

  .stepTextAndLineEducate .LeftLine,
  .stepTextAndLineEducate .rightLine {
    width: 100px;
    height: 1px;
  }

  .stepTextAndLineEducate .stepText p {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1px;
  }

  .whyEducateContent .whyEducateHead h1 {
    font-size: 22px;
    line-height: 30px;
    text-align: center;
  }

  .educateCardContent {
    flex-direction: column;
    gap: 16px;
    padding-top: 24px;
  }

  .educateCardContent .educateCard {
    width: 100%;
    padding: 20px;
    gap: 32px;
  }

  .cardText {
    gap: 10px;
    align-items: flex-start;
  }

  .cardText p {
    font-size: 16px;
    line-height: 24px;
  }

  .cardText span {
    font-size: 14px;
    line-height: 20px;
  }

  .studensVideosContainer {
    padding: 40px 16px;
    gap: 24px;
  }

  .studentHeadAndLine p {
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 1px;
  }

  .studentHeadAndLine .studentTextLine {
    width: 100px;
  }

  .videosContent {
    padding: 24px 0;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .videosContent .video-container {
    width: 280px;
    height: 158px;
    flex-shrink: 0;
    scroll-snap-align: center;
  }

  .video-container video {
    border-radius: 12px;
  }

  .video-slide {
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 1 !important;
  }

  .video-slide.active-slide {
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: none !important;
    z-index: 1 !important;
  }

  .studensVideosContainer .scrollBtn {
    width: 100%;
    padding: 0 12px;
    top: 50%;
    transform: translateY(-50%);
  }

  .scrollBtn .leftBtn,
  .scrollBtn .rightBtn {
    width: 32px;
    height: 32px;
    background: rgba(0, 0, 0, 0.3);
  }

  .studentVideoPagination {
    top: unset;
    bottom: 12px;
    gap: 6px;
    padding: 3px 8px;
  }

  .studentVideoPagination span {
    width: 6px;
    height: 6px;
    opacity: 0.6;
  }

 

  .careerContainer {
    padding: 60px 20px;
    flex-direction: column;
  }

  .careerContainer .careerContent:first-child {
    flex-direction: column-reverse !important;
    gap: 40px;
  }

  .careerContainer .careerContent:last-child {
    flex-direction: column !important;
    gap: 40px;
  }

  .careerLeftContent {
    max-width: 100%;
    gap: 28px;
    text-align: left;
    align-items: flex-start;
  }

  .careerStepAndText {
    align-items: center;
    gap: 8px;
  }

  .careerStepAndText p {
    font-size: 10px;
    letter-spacing: 1px;
    line-height: 14px;
  }

  .careerTextLine {
    width: 80px;
  }

  .careerHead p {
    font-size: 22px;
    line-height: 30px;
  }

  .careerSpan span {
    font-size: 14px;
    line-height: 22px;
  }

  .careerCtaGroup {
    width: 100%;
    align-items: flex-start;
  }

  .careerBtn {
    width: 100%;
    justify-content: center;
  }

  .careerRightContent {
    width: 100%;
    height: auto;
  }

  .rightImageContent {
    width: 100%;
    height: auto;
  }

  .imageAndOverlay {
    height: auto;
  }

  .imageAndOverlay img {
    height: auto;
    aspect-ratio: 16/9;
  }

  .careerOverlay {
    background: linear-gradient(180deg, rgba(11, 12, 13, 0) 40%, #0b0c0d 100%);
  }

  .leftLineAndtext {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    left: 16px;
    bottom: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
  }

  .imageText span {
    font-size: 12px;
    line-height: 18px;
  }

  .imageText p {
    font-size: 12px;
    line-height: 18px;
  }

  .leftLine {
    width: 1px;
    height: auto;
    background-color: #fff;
  }

  .userCommendContainer {
    padding: 20px 16px;
    gap: 24px;
  }

  .userCommendContainer .stepTextAndLineEducate {
    align-items: center;
    gap: 8px;
  }

  .userCommmendContainer .userCommentHead {
    margin-bottom: 24px;
    padding: 0 10px;
  }

  .userCommentHead p {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 24px;
  }

  .userCommentMainCardContainer {
    gap: 20px;
  }

  .userCommentContentTop,
  .userCommentContentBottom {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .userCommentCardTop .commentText p {
    font-size: 14px;
    line-height: 22px;
  }

  .userCommentCardBottom {
    gap: 12px;
  }

  .userCommentCardBottom .userProfilFoto {
    width: 48px;
    height: 48px;
  }

  .userNameAndText p {
    font-size: 14px;
    line-height: 20px;
  }

  .userNameAndText span {
    font-size: 13px;
    line-height: 18px;
  }

  .pricingContainer {
    min-height: 100vh;
  }

  .pricingContainer .pricingContent {
    padding: 100px 16px 60px 16px;
    gap: 20px;
  }

  .pricingContent .stepTextAndLineEducate {
    gap: 8px;
  }

  .pricingContent .pricingHead p {
    font-size: 22px;
    line-height: 30px;
    padding: 0 8px;
  }

  .pricingPackageContent {
    flex-wrap: wrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 8px;
  }

  .pricingPackageContent::-webkit-scrollbar {
    display: none;
  }

  .pricingPackageContent .pricingPackageCard {
    flex: 0 0 85%;
    scroll-snap-align: start;
    min-width: 280px;
    max-width: 85%;
    padding: 24px;
    gap: 24px;
  }

  .pricingWrapper {
    gap: 24px;
  }

  .packageStartedText p {
    font-size: 16px;
    line-height: 22px;
  }

  .packageStartedText span {
    font-size: 14px;
    line-height: 20px;
  }

  .pricingPriceText p {
    font-size: 28px;
  }

  .pricingPriceText span {
    font-size: 13px;
  }

  .benefitIconAndText p {
    font-size: 14px;
  }

  .allPackageBtn {
    width: 100%;
    height: auto;
    padding: 12px;
    font-size: 14px;
  }

  .answerAndQuestionContainer {
    padding: 30px 16px 40px 16px;
    gap: 20px;
  }

  .answerAndQuestionContent {
    gap: 28px;
  }

  .answerAndQuestionContent .answerAndQuestionHead p {
    font-size: 22px;
    line-height: 30px;
    padding: 0 8px;
  }

  .answerAndQuestion {
    max-width: 100%;
    gap: 10px;
  }

  .answerAndQuestionItem {
    padding: 16px;
  }

  .answerItem {
    flex-direction: row;
    gap: 12px;
  }

  .answerItem p {
    font-size: 15px;
    line-height: 22px;
  }

  .questionItem p {
    font-size: 14px;
    line-height: 20px;
  }

  .toggleIcon {
    width: 18px;
    height: 18px;
  }

  .answerAndQuestionItem.open .questionItem {
    margin-top: 12px;
    max-height: 400px;
  }

  .signupLastContainer {
    padding: 40px 16px;
  }

  .signupLastContent {
    max-width: 100%;
  }

  .signupLastContent .imageBox {
    height: 200px;
  }

  .signupLastContent .imageBox img {
    border-radius: 10px;
  }

  .signupLastContent .imageBox .signupLastOverlay {
    border-radius: 10px;
  }

  .signupLastContent .signupLastMainContent {
    top: 15%;
    padding: 0 12px;
    gap: 20px;
  }

  .signupLastMainContent .stepTextAndLineEducate .LeftLine,
  .signupLastMainContent .stepTextAndLineEducate .rightLine {
    width: 100px;
  }

  .signupLastHead p {
    font-size: 20px;
    line-height: 28px;
    padding: 0 10px;
  }

  .signupLastBtn {
    width: 140px;
    padding: 10px 14px;
  }

  .signupLastBtn a {
    font-size: 13px;
  }

  .footerLinks,
  .footerBottom {
    flex-direction: column;
  }

  .pricingNextPageContent {
    padding: 0 20px;
    gap: 32px;
  }

  .pricingNextPageContent .stepTextAndLineEducate .LeftLine,
  .pricingNextPageContent .stepTextAndLineEducate .rightLine {
    width: 120px;
  }

  .pricingNextPageHead {
    width: 100% !important;
    max-width: 390px !important;
  }

  .pricingNextPageHead p {
    width: 390px;
    font-size: 12px;
    line-height: 20px;
  }

  .pricingNexPagePackageMode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 360px !important;
  }

  .pricingNexPagePackageMode .packageBronze,
  .pricingNexPagePackageMode .packageBronze.active {
    width: 100%;
    justify-content: space-between;
  }

  .pricingNexPagePackageMode .packageBronze p,
  .pricingNexPagePackageMode .packageBronze.active p {
    font-size: 12px;
    line-height: 20px;
  }
  .pricingNexPagePackageMode .packageBronze .packageCircle,
  .pricingNexPagePackageMode .packageBronze.active .packageCircle {
    width: 24px;
    height: 20px;
  }

  .packageContent,
  .packageContent.active {
    width: 370px;
    padding: 24px;
  }

  .packageBronzHeadAndPrice {
    align-items: flex-start;
    gap: 12px;
  }

  .packageBronzHeadAndPrice p {
    font-size: 14px;
  }

  .packageBronzHeadAndPrice span {
    font-size: 20px;
  }
  .packageBuyNow {
    width: 100%;
    padding: 14px;
  }

  .packageBuyNow button {
    font-size: 13px;
  }

  .heroMainContainer {
    width: 100% !important;
    flex-direction: column;
    align-items: center;
    padding: 20px;

  }

  .heroMainContainer .heroContent {
    width: 100%;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    padding: 30px;
  }

  .heroContent .profSettingSide {
    position: relative;
    width: 350px;
    padding: 20px;
    display: flex !important;
  }

  .settingSideHead {
    width: 250px !important;
    position: absolute;
    left: 24%;
    top: 15%;
  }
  .settingSideHead p {
    width: 100%;
    font-size: 25px;
  }

  .settingSideFoto {
    width: 50px;
    height: 50px;
  }
  .settingSideFoto img {
    border-radius: 120px !important;
  }

  .settingSideLink {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
  }

  .settingSideLink p {
    width: 48%;
    text-align: center;
  }

  .profSettingMainContent {
    width: 390px !important;
    padding: 24px;
  }

  .rightContent .SettingMainHead p {
    font-size: 22px;
    line-height: 28px;
  }

  .rightSubContent .passInputContent {
    align-items: stretch;
  }

  .infoSkillsContents {
    flex-direction: column;
    gap: 16px;
  }

  .infoLeftContents,
  .infoRightContent {
    width: 340px !important;
    padding: 20px;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .infoLeftContents img {
    display: none;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .infoLeftContents img:first-child {
    display: block;
  }

  .infoLeftContents .infoLeftElement1,
  .infoLeftContents .infoLeftElement2,
  .infoLeftContents .infoLeftElement3,
  .infoLeftContents .infoLeftElement4 {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
  }

  .infoLeftElement1 p,
  .infoLeftElement1 span,
  .infoLeftElement2 p,
  .infoLeftElement3 p,
  .infoLeftElement4 p {
    word-wrap: break-word;
    font-size: 11px;
  }

  .settingRightLinks {
    display: flex;
    flex-direction: row; /* yatay düzülmə */
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    gap: 12px; /* p elementləri arasında boşluq üçün */
    padding-bottom: 8px; /* scroll varsa alt boşluq */
    -webkit-overflow-scrolling: touch; /* iOS üçün rahat scroll */
    scrollbar-width: none; /* Firefox üçün scrollbar gizlət */
  }

  .status-circle {
    width: 20px;
    height: 20px;
    border-width: 2px;
  }

  .status-circle.done::after {
    font-size: 9px;
    left: 1px;
    top: 0.5px;
    color: #ccc;
  }



  .settingRightLinks::-webkit-scrollbar {
    display: none; /* Chrome/Safari üçün scrollbar gizlət */
  }

  /* Chrome scroll görünüşünü dəyişmək istəsən */
  .settingRightLinks::-webkit-scrollbar {
    height: 6px;
  }
  .settingRightLinks::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
  }

  .settingRightLinks p {
    flex-shrink: 0; /* kiçilməsin */
    white-space: nowrap; /* birdəfəlik söz dağılmasın */
    padding: 8px 16px;
  }

  .lessonActivityContent .lessonActivityTop {
    width: 100% !important;
    flex-direction: column;
    gap: 16px;
  }
  .lessonActivityContent .lessonActivityTop .activityLeft{
    width: 100% !important;
    
  }

  .materialsLinks {
    flex-direction: column;
    gap: 20px;
  }

  .moduleLink .linkAndIcon {
    flex-direction: row;
    gap: 6px;
  }

  .plansButtons {
    flex-direction: column;
    gap: 16px;
  }

  .chart-container #learningChart {
    height: 200px !important;
  }

  .noteContent {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .noteContentLeft {
    width: 100% !important;
    display: flex !important;
  }

  .noteUserText {
    width: 100% !important;
  }

  .noteEditForm textarea {
    width: 100% !important;
  }

  .subsPlanTop {
    width: 100%;
    flex-direction: column;
    gap: 20px;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

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

  .paymHistoryContent {
    flex-direction: column;
    gap: 10px;
    width: 100% !important;
    align-items: flex-start;
  }
  .paymHistoryContent span {
    width: 100% !important;
  }

  .heroKeepContainer {
    padding: 60px 20px;
  }

  .keepLearningContent {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .keepLearningContent .keepLearningSideContent {
    width: 100%;
    padding: 16px;
  }

  .keepLearningMainContent {
    padding: 24px 16px;
  }

  .keepContentBox{
    width: 100%;
  }

  .lessonVideoContent {
    width: 100%;
    height: auto;
  }

  .lessonVideoContent video {
    width: 100%;
    height: 100%;
  }

  .keepMaterialsLinkContent {
    width: 100%;
    padding: 20px;
  }

  .keepLessonPhotocontent .keepLessonFotos {
    flex-direction: column;
    gap: 16px;
  }

  .keepLessonPhotocontent .keepLessonFotos .lessonFoto {
    width: 100%;
    height: auto;
  }

  .textAreaContent {
    padding: 16px;
  }

  .textAreaContent #textArealesson {
    height: 80px;
  }

  .keepNoteContainer {
    padding: 20px;
    gap: 24px;
  }

  .keepNoteContent {
    flex-direction: column;
    gap: 16px;
  }

  .keepNoteTextAndIcons {
    gap: 16px;
  }

  .lessonElementHead {
    width: 100%;
    gap: 12px;
  }

  .lessonNotes p {
    font-size: 14px;
  }

  .saveNotesButton {
    width: 100%;
    justify-content: center;
  }

  .keepViewAllNotesBtn {
    width: 100%;
    justify-content: center;
  }

  .keepNote{
    width: 100%;
  }
  .heroContainerLogin {
    padding: 60px 16px;
    align-items: center;
  }

  .login-box {
    width: 100%;
    padding: 32px 24px;
    border-radius: 8px;
  }

  .loginLineAndText .lineLeft,
  .loginLineAndText .lineRight {
    width: 80px;
  }

  .form-group input {
    font-size: 14px;
    padding: 14px 12px;
  }

  .email-button {
    font-size: 14px;
    padding: 10px 14px;
  }

  .email-button a {
    font-size: 15px;
  }

  .divider .dividerLineLeft,
  .divider .dividerLineRight {
    width: 60px;
  }

  .social-login {
    gap: 12px;
    margin-bottom: 30px;
  }

  .signup-text {
    font-size: 14px;
    line-height: 20px;
  }

  .signup-text a {
    font-size: 14px;
  }

  .studentVideoPagination{
    display: none;
  }
  .creerContent2{
    flex-direction: column-reverse !important;
  }
}