@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
:root {
  --margin-bottom: 16px;
  /* Button Design System Variables */
  --button-radius: 8px;
  --button-v-padding: 8px;
  --button-h-padding: 16px;
  --button-small-font-family: "DM Sans", sans-serif;
  --button-small-weight: 500;
  --button-small-size: 14px;
  --button-small-line-height: 20px;
  --greyscale-text-negative: #ffffff;
  --Greyscale-Text-Primary: #070614;
  --Greyscale-Text-Secondary: #51515b;
  --Colors-Red-800: #e14a4a;
  --Greyscale-Surface-White: #ffffff;
  --Border-Light: #c1c1f0;
  /* Added for headings */
  --headings-h2-font-family: "DM Sans", sans-serif;
  --headings-h2-weight: 700;
  --headings-h2-size: 24px;
  --headings-h2-line-height: 32px;
  --headings-h3-font-family: "DM Sans", sans-serif;
  --headings-h3-weight: 700;
  --headings-h3-size: 20px;
  --headings-h3-line-height: 28px;
  /* Added for Body/Small typography */
  --body-small-font-family: "DM Sans", sans-serif;
  --body-small-weight: 400;
  --body-small-size: 14px;
  --body-small-line-height: 21px;
}

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

html,
body {
  height: 100%;
  overflow-x: hidden;
}

body {
  overflow-y: auto !important;
  position: relative;
  min-height: auto !important;
}

/* Force scrolling to work globally */
html {
  overflow-y: auto !important;
  height: auto !important;
}

body {
  overflow-y: auto !important;
  height: auto !important;
  min-height: auto !important;
}

/* Override any overflow hidden rules */

body,
html,
main,
.container {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Additional scrolling fixes */
main {
  overflow-y: auto !important;
  height: auto !important;
  min-height: auto !important;
}

.container {
  overflow-y: auto !important;
  height: auto !important;
}

/* Override any fixed positioning that might block scrolling 
body > *:not(.header) {
  position: relative !important;
}
*/
/* Ensure content can scroll */
.content,
.main-content,
.page-content {
  overflow-y: auto !important;
  height: auto !important;
  min-height: auto !important;
}

/* Header login button container spacing */
.login-button-container {
  flex-shrink: 0;
  margin-left: 20px;
  display: flex;
  align-items: center;
}

/* Ensure proper header layout */
.header .d-flex.justify-content-between {
  display: flex !important;
  align-items: center;
  width: 100%;
  gap: 20px;
}

.header .offcanvas {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px;
}

img.lazy {
  display: block;
  max-width: 100%;
  /* height: auto; */
  background: rgba(0, 0, 0, 0.1);
}

/* Pulse animation */
@keyframes pulse {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.3;
  }
}

/* Apply animation only before image is fully loaded */
img.lazy:not(.lazy-loaded) {
  animation: pulse 1.5s infinite ease-in-out;
}
.article-content.tag1 {
  background: rgba(45, 142, 255, 0.05);
  small {
    background: #2d8eff;
    color: #fff;
    &:hover {
      background: #006ae5;
    }
  }
}

.article-content.tag2 {
  background: rgba(255, 152, 0, 0.05);
  small {
    background: #ff9800;
    color: #fff;
    &:hover {
      background: #eb8c00;
    }
  }
}

.article-content.tag3 {
  background: rgba(156, 39, 176, 0.05);
  small {
    background: #9c27b0;
    color: #fff;
    &:hover {
      background: #7d0093;
    }
  }
}

.article-content.tag4 {
  background: rgba(76, 175, 80, 0.05);
  small {
    background: #4caf50;
    color: #fff;
    &:hover {
      background: #008b06;
    }
  }
}

.article-content.tag5 {
  background: rgba(103, 58, 183, 0.05);
  small {
    background: #673ab7;
    color: #fff;
    &:hover {
      background: #4000b1;
    }
  }
}

.article-content.tag6 {
  background: rgba(233, 30, 99, 0.05);
  small {
    background: #e91e63;
    color: #fff;
    &:hover {
      background: #ce0046;
    }
  }
}

.article-content.tag7 {
  background: rgba(255, 87, 34, 0.05);
  small {
    background: #ff5722;
    color: #fff;
    &:hover {
      background: #e33600;
    }
  }
}

.article-content.tag8 {
  background: rgba(0, 188, 212, 0.05);
  small {
    background: #00bcd4;
    color: #fff;
    &:hover {
      background: #0097aa;
    }
  }
}

.news-content .tag1 {
  background: #2d8eff;
  color: #fff;
  &:hover {
    background: #006ae5;
  }
}
.news-content .tag2 {
  background: #ff9800;
  color: #fff;
  &:hover {
    background: #eb8c00;
  }
}
.news-content .tag3 {
  background: #9c27b0;
  color: #fff;
  &:hover {
    background: #7d0093;
  }
}
.news-content .tag4 {
  background: #4caf50;
  color: #fff;
  &:hover {
    background: #008b06;
  }
}
.news-content .tag5 {
  background: #673ab7;
  color: #fff;
  &:hover {
    background: #4000b1;
  }
}
.news-content .tag6 {
  background: #e91e63;
  color: #fff;
  &:hover {
    background: #ce0046;
  }
}
.news-content .tag7 {
  background: #ff5722;
  color: #fff;
  &:hover {
    background: #e33600;
  }
}
.news-content .tag8 {
  background: #00bcd4;
  color: #fff;
  &:hover {
    background: #0097aa;
  }
}

.left-panel {
  background-image: url(/images/bluerectangle.png);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 50px;
  min-height: 100vh;
}
.right-panel {
  padding-left: 148px;
  padding-right: 148px;
  padding-top: 85px;
  padding-bottom: 124px;
}

.login_line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  h3 {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 0 !important;
  }
  span {
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    color: #595970;
  }
}

input[type="text"],
input[type="password"],
input[type="email"] {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  border: 1px solid #d3dce6;
  &::placeholder {
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: #8a8a9c;
  }
  &:focus,
  &:visited,
  &:active {
    outline: none;
    border: 1px solid #111111;
    box-shadow: none;
  }
}

label.form-label {
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  margin-bottom: 8px;
  color: #595970;
  position: relative;
  &::after {
    content: "*";
    position: absolute;
    color: red;
  }
}

#clientForm,
#forgot-password-form,
#password-reset-form,
#resend-verification,
#step2Form,
#loginForm {
  .tnc {
    font-size: 12px;
    line-height: 16px;
    font-family: DM Sans;
    font-weight: 500;
    color: #8a8a9c;
    a {
      color: #4141ee;
    }
  }
  button {
    background: #4141ee;
    color: white;
    font-size: 14px;
    line-height: 21px;
    padding: 14px 16px;
  }
}

.error-message {
  color: #d32f2f;
  font-size: 12px;
  line-height: 16px;
  margin-top: 5px;
}
.remember {
  label {
    align-self: center;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    color: #595970;
  }
  .custom-checkbox {
    height: 16px;
    width: 16px;
    align-self: center;
  }
}
.forgot {
  text-align: center;
  margin-top: 20px;

  a {
    font-size: 14px;
    line-height: 21px;
    font-weight: 600;
    color: #667eea;
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: #764ba2;
    }
  }
}

.auth-header {
  h3 {
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    margin-bottom: 0;
  }
  p {
    margin-top: 3px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    color: #595970;
  }
}
.back-to-login {
  text-align: center;
  margin-top: 16px;
  a {
    font-size: 14px;
    line-height: 21px;
    font-weight: 500;
    color: #4141ee;
  }
}

.reset-password {
  margin-top: 20px;
  p {
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
  }
  a {
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
    color: #ffffff;
  }
}

.mb-16 {
  margin-bottom: var(--margin-bottom);
}
.mb-8 {
  --margin-bottom: 8px;
  margin-bottom: var(--margin-bottom);
}
.mb-24 {
  --margin-bottom: 24px;
  margin-bottom: var(--margin-bottom);
}

/* Login Button Styles */
.login-button {
  width: 67px;

  opacity: 1;
  border-radius: var(--button-radius);
  padding-top: var(--button-v-padding);
  padding-right: var(--button-h-padding);
  padding-bottom: var(--button-v-padding);
  padding-left: var(--button-h-padding);
  gap: 4px;
  font-family: var(--button-small-font-family);
  font-weight: var(--button-small-weight);
  font-style: normal;
  font-size: var(--button-small-size);
  line-height: var(--button-small-line-height);
  letter-spacing: 0px;
  text-align: center;
  background: var(--Surface-Default, #4141ee);
  color: var(--Greyscale-Text-Negative, #ffffff);
  border: 1px solid var(--Surface-Default, #4141ee);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Hide login button on mobile devices */
@media (max-width: 768px) {
  .login-button {
    display: none !important;
  }

  /* Hide the container div that holds the login button */
  .login-button-container {
    display: none !important;
  }
}

.login-button:hover {
  background: #3333cc;
  border-color: #3333cc;
  text-decoration: none;
  color: var(--Greyscale-Text-Negative, #ffffff);
}

.login-button:active {
  background: #2929b3;
  transform: translateY(1px);
}

/* Authentication Pages Styles */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

.auth-split-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

.auth-left-side {
  position: relative;
  overflow: hidden;
  background: var(--Colors-Royal-Blue-900, #3030cc);
}

.auth-text-content {
  text-align: center;
  margin-bottom: 20px;
  z-index: 2;
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}

.auth-title {
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}

.auth-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}

.auth-form-subtitle {
  margin-top: 10px;
}

.auth-main-container {
  z-index: 1;
  display: flex;
  flex-direction: column;
  /*
  position: absolute;
  padding: 80px 64px 32px 64px;
  */
}

.auth-content-container {
  width: 100%;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.auth-content-title {
  font-family: var(--headings-h2-font-family, "DM Sans", sans-serif);
  font-weight: var(--headings-h2-weight, 700);
  font-style: normal;
  font-size: var(--headings-h2-size, 24px);
  line-height: var(--headings-h2-line-height, 32px);
  letter-spacing: 0px;
  color: var(--Greyscale-Text-Negative, #ffffff);
  margin-bottom: 16px;
  margin-top: 0;
}

.auth-content-text {
  font-family: var(--body-medium-font-family, "DM Sans", sans-serif);
  font-weight: normal;
  font-style: normal;
  font-size: var(--body-medium-size, 16px);
  line-height: var(--body-medium-line-height, 24px);
  letter-spacing: 0px;
  color: var(--Greyscale-Text-Negative, #ffffff);
  margin: 0;
  opacity: 0.9;
}

.auth-features-container {
  width: 100%;
  padding: 20px 0;
  flex: 1;
}

.auth-features-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--Greyscale-Text-Negative, #ffffff);
}

.auth-features-list li {
  height: 24px;
  font-family: var(--body-medium-font-family, "DM Sans", sans-serif);
  font-weight: 700;
  font-style: normal;
  font-size: var(--body-medium-size, 16px);
  line-height: var(--body-medium-line-height, 24px);
  letter-spacing: 0px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--Greyscale-Text-Negative, #ffffff);
}

.auth-features-list li svg {
  flex-shrink: 0;
}

.auth-features-list li:last-child {
  margin-bottom: 0;
}

/* Auth features list text typography (Body/Medium) */
.auth-features-list-text {
  font-family: var(--body-medium-font-family, "DM Sans", sans-serif);
  font-weight: normal;
  font-style: normal; /* Regular */
  font-size: var(--body-medium-size, 16px);
  line-height: var(--body-medium-line-height, 24px);
  letter-spacing: 0px;
}

.auth-bottom-image {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  overflow: hidden;
  z-index: 0;
}

.auth-bottom-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.6;
}

.auth-right-side {
  height: 100%;
  width: 100%;
  background: #ffffff;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
}

.auth-form-container {
  width: 70%;
  padding: 0 40px;
}

/* Auth pages specific styling */
.auth-split-container {
  position: relative !important;
}

/* Responsive styles for auth layout */
@media (max-width: 992px) {
  .auth-split-container {
    flex-direction: column;
    min-height: 100vh;
  }

  .auth-split-container .row {
    flex-direction: column;
    height: auto;
  }

  .auth-left-side {
    order: 2;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .auth-right-side {
    order: 1;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .auth-main-container {
    position: relative;
    padding: 40px 20px;
  }

  .auth-form-container {
    padding: 0 40px;
    max-width: 100%;
  }

  .auth-bottom-image {
    display: none;
  }
}

/* Desktop styles to ensure proper layout */
@media (min-width: 993px) {
  .auth-split-container {
    min-height: 100vh;
  }

  .auth-split-container .row {
    min-height: auto;
    display: flex;
  }

  .auth-left-side {
    min-height: 100vh;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }

  .auth-right-side {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
    padding-top: 40px;
  }

  .auth-main-container {
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    /*
    position: absolute;
    padding: 80px 64px 32px 64px;
    height: 100%;
    */
  }

  .auth-form-container {
    width: 70%;
    padding: 0 40px;
  }
}

@media (max-width: 768px) {
  .auth-left-side {
    min-height: 250px;
  }

  .auth-right-side {
    min-height: 350px;
  }

  .auth-main-container {
    padding: 20px 16px;
  }

  .auth-form-container {
    padding: 40px;
  }

  .auth-content-title {
    font-size: 20px;
    line-height: 28px;
  }

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

  .auth-features-list li {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 8px;
  }
}

.auth-form {
  margin-top: 30px;
  width: 100%;
}

.auth-form .form-group {
  margin-bottom: 25px;
}

.auth-form label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--body-small-font-family, "DM Sans", sans-serif);
  font-weight: var(--body-small-weight, 400);
  font-style: normal;
  font-size: var(--body-small-size, 14px);
  line-height: var(--body-small-line-height, 21px);
  letter-spacing: 0px;
  vertical-align: middle;
  color: var(--Greyscale-Text-Secondary, #51515b);
}

.auth-form label .required {
  color: var(--Colors-Red-800, #e14a4a);
}

.auth-form .form-control {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.auth-form .form-control:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
  background: #ffffff;
}

.auth-form .btn {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.auth-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.auth-form .btn:active {
  transform: translateY(0);
}

/* Radio button styling for web UI */
.radio-group {
  margin-top: 8px;
}

.radio-group .row {
  margin: 0 -8px;
}

.radio-group .col-sm-12,
.radio-group .col-md-6 {
  padding: 0 8px;
  margin-bottom: 12px;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  padding: 12px;
  border: 1px solid var(--Greyscale-Border-Default, #e6e6e7);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  height: 90px;
}

.radio-item:hover {
  border-color: #667eea;
  background-color: #f0f4ff;
}

.radio-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.radio-item .form-check-label {
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  color: #333;
  flex: 1;
  padding-left: 64px;
  position: relative;
  line-height: 1.3;
  display: flex;
  align-items: center;
  height: 100%;
}

.radio-item .radio-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.radio-item .radio-text strong {
  font-weight: 600;
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
}

.radio-item .radio-subtext {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
}

.radio-item .form-check-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  background: var(--Surface-Subtle, #f7f9ff);
  border: 1px solid var(--Greyscale-Border-Default, #e6e6e7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-item .radio-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.radio-item .radio-icon svg {
  width: 18px;
  height: 18px;
}

.radio-item:has(input[type="radio"]:checked) {
  border: 2px solid var(--Greyscale-Text-Primary, #070614);
}

.radio-item input[type="radio"]:checked + .form-check-label::before {
  background: var(--Surface-Subtle, #f7f9ff);
  border: 1px solid var(--Greyscale-Border-Default, #e6e6e7);
}

/* Experience dropdowns styling for web UI */
.experience-row {
  display: flex;
  gap: 12px;
}

.experience-select {
  flex: 1;
}

.experience-select option[value=""] {
  background: var(--Greyscale-Text-Tertiary, #9c9ba1);
  color: #999;
}

/* Required field styling for web UI */
.required::after {
  content: " *";
  color: #e14a4a;
}

/* Step2 button styling to match login button */
.step2-page .auth-form-btn {
  width: 100%;
  padding: 16px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.step2-page .auth-form-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.step2-page .auth-form-btn:active {
  transform: translateY(0);
}

/* Fix for step2 page - override min-height for radio button layout */
@media (min-width: 993px) {
  .step2-page .auth-split-container .row {
    min-height: auto;
  }

  .step2-page .auth-split-container .auth-right-side {
    min-height: auto;
    display: flex;
    align-items: flex-start;
    padding-top: 40px;
  }
}

.checkbox-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--button-small-font-family, "DM Sans", sans-serif);
  font-weight: var(--button-small-weight, 500);
  font-style: normal;
  font-size: var(--button-small-size, 14px);
  line-height: var(--button-small-line-height, 20px);
  letter-spacing: 0px;
  text-align: left;
  color: var(--Greyscale-Text-Secondary, #51515b);
  gap: 8px;
}

.remember-forgot-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.forgot-password-link {
  text-decoration: none;
  text-align: right;
  vertical-align: top;
  display: inline-block;
  height: 16px;
}

.forgot-text {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0px;
  color: var(--Surface-Default, #4141ee);
  vertical-align: top;
  display: inline-block;
  height: 30px;
}

.forgot-password-link:hover {
  color: #3333cc;
  text-decoration: none;
}

.checkbox-container input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--Border-Light, #c1c1f0);
  background: var(--Greyscale-Surface-White, #ffffff);
  accent-color: #667eea;
  flex-shrink: 0;
  margin: 0;
}

.remember-text {
  font-family: var(--button-small-font-family, "DM Sans", sans-serif);
  font-weight: var(--button-small-weight, 500);
  font-style: normal;
  font-size: var(--button-small-size, 14px);
  line-height: 16px;
  letter-spacing: 0px;
  color: var(--Greyscale-Text-Secondary, #51515b);
  vertical-align: top;
  display: inline-block;
  height: 16px;
}

.login_line {
  text-align: center;
  margin-bottom: 40px;
}

.login_line h3 {
  margin-bottom: 12px;
  color: #2d3748;
  font-size: 32px;
  font-weight: 700;
}

.login_line span {
  color: #718096;
  font-size: 16px;
  font-weight: 400;
}

.login_line a {
  color: #667eea;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.login_line a:hover {
  color: #764ba2;
  text-decoration: none;
}

.alert {
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 25px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  backdrop-filter: blur(10px);
}

.alert-danger {
  background-color: rgba(245, 101, 101, 0.1);
  color: #e53e3e;
  border-left: 4px solid #e53e3e;
}

.login-container {
  padding: 50px;
}

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

.auth-form-title {
  font-family: var(--headings-h3-font-family, "DM Sans", sans-serif);
  font-weight: var(--headings-h3-weight, 700);
  font-style: normal;
  font-size: var(--headings-h3-size, 20px);
  line-height: var(--headings-h3-line-height, 28px);
  letter-spacing: 0px;
  color: var(--Greyscale-Text-Primary, #070614);
  margin: 0;
}

.signup-link {
  font-family: var(--body-small-font-family, "DM Sans", sans-serif);
  font-weight: var(--body-small-weight, 400);
  font-size: var(--body-small-size, 14px);
  line-height: var(--body-small-line-height, 21px);
  color: var(--Greyscale-Text-Secondary, #51515b);
}

.auth-no-account {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  justify-content: center;
}

.auth-no-account-text {
  width: 153px;
  height: 21px;
  font-family: var(--body-small-font-family, "DM Sans", sans-serif);
  font-weight: var(--body-small-weight, 400);
  font-style: normal;
  font-size: var(--body-small-size, 14px);
  line-height: var(--body-small-line-height, 21px);
  letter-spacing: 0px;
  color: var(--Greyscale-Text-Secondary, #51515b);
}

.auth-register-link {
  color: var(--Surface-Default, #4141ee);
  text-decoration: none;
  font-family: var(--body-small-font-family, "DM Sans", sans-serif);
  font-weight: var(--body-small-weight, 400);
  font-size: var(--body-small-size, 14px);
  line-height: var(--body-small-line-height, 21px);
  transition: color 0.2s ease;
}

.auth-register-link:hover {
  color: #3333cc;
  text-decoration: none;
}

.alert-success {
  background-color: rgba(72, 187, 120, 0.1);
  color: #38a169;
  border-left: 4px solid #38a169;
}

.text-center {
  text-align: center;
}

/* Mobile Login Button Styles */
.mobile-login-section {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

/* Hide mobile login button on desktop */
@media (min-width: 769px) {
  .mobile-login-section {
    display: none !important;
  }
}

.mobile-login-button {
  width: 100%;
  opacity: 1;
  border-radius: var(--button-radius);
  padding-top: var(--button-v-padding);
  padding-right: var(--button-h-padding);
  padding-bottom: var(--button-v-padding);
  padding-left: var(--button-h-padding);
  gap: 4px;
  font-family: var(--button-small-font-family);
  font-weight: var(--button-small-weight);
  font-style: normal;
  font-size: var(--button-small-size);
  line-height: var(--button-small-line-height);
  letter-spacing: 0px;
  text-align: center;
  background: var(--Surface-Default, #4141ee);
  color: var(--Greyscale-Text-Negative, #ffffff);
  border: 1px solid var(--Surface-Default, #4141ee);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mobile-login-button:hover {
  background: #3333cc;
  border-color: #3333cc;
  text-decoration: none;
  color: var(--Greyscale-Text-Negative, #ffffff);
}

.mobile-login-button:active {
  background: #2929b3;
  transform: translateY(1px);
}

/* Mobile Homepage Login Button Styles */
.mobile-login-section-homepage {
  padding: 20px;
  text-align: center;
  background: #f8f9fa;
  margin-top: 20px;
}

.mobile-login-button-homepage {
  width: 100%;
  height: 32px;
  opacity: 1;
  border-radius: var(--button-radius);
  padding-top: var(--button-v-padding);
  padding-right: var(--button-h-padding);
  padding-bottom: var(--button-v-padding);
  padding-left: var(--button-h-padding);
  gap: 4px;
  font-family: var(--button-small-font-family);
  font-weight: var(--button-small-weight);
  font-style: normal;
  font-size: var(--button-small-size);
  line-height: var(--button-small-line-height);
  letter-spacing: 0px;
  text-align: center;
  background: var(--Surface-Default, #4141ee);
  color: var(--Greyscale-Text-Negative, #ffffff);
  border: 1px solid var(--Surface-Default, #4141ee);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.mobile-login-button-homepage:hover {
  background: #3333cc;
  border-color: #3333cc;
  text-decoration: none;
  color: var(--Greyscale-Text-Negative, #ffffff);
}

.mobile-login-button-homepage:active {
  background: #2929b3;
  transform: translateY(1px);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  letter-spacing: -0.5px;
}
/* news section */

.header {
  box-shadow: 0px 3px 4px 0px #00000005;
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 9997;
  width: 100%;
  overflow: visible;
  transition: all 0.3s ease;

  /* Fixed navigation styles */
  &.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    animation: slideDown 0.3s ease;
  }

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

  .d-flex.justify-content-between {
    display: flex !important;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 20px;
  }

  /* Center the navigation */
  .offcanvas {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px;

    @media (min-width: 992px) {
      position: relative;
      display: block;
      flex-grow: inherit;
      flex: 1;
      display: flex;
      justify-content: center;
    }
  }

  .offcanvas-body {
    justify-content: center;
    align-items: center;
    width: 100%;

    nav {
      justify-content: flex-start;
      width: 100%;
    }

    nav ul {
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
      gap: 32px;
      flex-wrap: nowrap;
    }
  }
  @media (max-width: 992px) {
    padding: 8px 0;

    /* Mobile header container */
    .container {
      padding: 0 16px;
    }

    .d-flex.justify-content-between {
      padding: 0;
      gap: 12px;
    }

    /* Mobile navigation */
    .offcanvas {
      margin: 0;
    }

    .offcanvas-body {
      padding: 0 16px 0 16px;
      margin-top: 0;

      nav ul {
        flex-direction: column;
        justify-content: flex-start;
        gap: 0;
        width: 100%;

        li {
          width: 100%;
          border-bottom: 1px solid #e6e6e7;

          &:last-child {
            border-bottom: none;
          }

          a {
            padding: 16px 0;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: #070614;
            border-bottom: none;
            width: 100%;
            text-align: left;
          }
        }
      }
    }

    /* Mobile login button */
    .login-button-container {
      margin-left: 0;
      width: auto;
    }

    .login-button {
      padding: 8px 12px;
      font-size: 14px;
      white-space: nowrap;
      width: auto;
      min-width: fit-content;
    }
  }
  &[data-article="true"] {
    @media (max-width: 992px) {
      display: none;
    }
  }
  .logo {
    align-self: center;
    flex-shrink: 0;
    margin-right: 20px;
    /* @media (max-width: 992px) {
      order: 2;
    } */
  }
  .nav-menu {
    background: #ffffff;
    @media (max-width: 992px) {
      position: absolute;
      top: 64px;
      width: calc(100% - 24px);
      z-index: 999;
    }
    nav {
      width: 100%;
    }
    ul.nav {
      width: 100%;
      @media (max-width: 992px) {
        display: block;
      }
    }
  }
  .search {
    align-self: center;
    flex-shrink: 0;
    margin-left: 20px;
    @media (max-width: 992px) {
      display: none !important;
    }
    svg {
      align-self: center;
      &:last-child {
        margin-left: 32px;
        @media (max-width: 992px) {
          display: none;
          margin-left: 0;
        }
      }
    }
  }
  .offcanvas.offcanvas-end {
    width: 100%;
    height: 100vh;
  }

  .offcanvas-header {
    margin: 0 16px;
    padding: 16px 0;
    border-bottom: 1px solid #d3dce6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 32px);

    .btn-close {
      padding: 0;
      background: none;
      height: auto;
      width: auto;
      margin: 0;
      margin-left: auto;
      opacity: 1;
      order: 2;
    }
  }
  .offcanvas {
    @media (min-width: 992px) {
      position: relative;
      display: block;
      flex-grow: inherit;
    }
  }
  .offcanvas-body {
    padding: 0 16px 0 16px;
    margin-top: 0;
    position: relative;
    flex-direction: column;

    nav ul {
      flex-direction: row;
      width: 100%;
      flex-wrap: nowrap;
      justify-content: flex-start;
      @media (max-width: 992px) {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 0;
        width: 100%;
      }
      li {
        width: auto;
        @media (min-width: 992px) {
          text-align: center;
          width: auto;
        }
        @media (max-width: 992px) {
          width: 100%;
          border-bottom: 1px solid #e6e6e7;

          &:last-child {
            border-bottom: none;
          }

          &:first-child {
            a {
              padding-top: 0;
            }
          }
        }
        a {
          text-decoration: none;
          display: block;
          padding: 12px 0;
          font-size: 16px;
          line-height: 24px;
          font-weight: 700;
          color: #070614;
          @media (min-width: 992px) {
            font-size: 16px;
            line-height: 28px;
            padding: 25px 0;
            margin: 0;
            display: block;
            font-weight: 500;
            width: max-content;
            text-decoration: none;
            color: #595970;
            border-bottom: 2px solid transparent;
            white-space: nowrap;
            &:hover {
              color: #070614;
              border-bottom: 2px solid #4141ee;
            }
            &.active {
              color: #070614;
              border-bottom: 2px solid #4141ee;
            }
          }

          @media (max-width: 992px) {
            font-size: 16px;
            line-height: 24px;
            padding: 12px 0;
            font-weight: 500;
            color: #070614;
            border-bottom: none;
            width: 100%;
            text-align: left;
          }
        }
      }
    }

    /* Mobile login button at bottom */
    .mobile-login-section {
      margin-top: 16px;
      padding: 12px 0;
      border-top: 1px solid #e6e6e7;
      width: 100%;

      .mobile-login-button {
        width: 100%;
        display: block;
        text-align: center;
        padding: 10px 16px;
        background: #4141ee;
        color: white;
        text-decoration: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        transition: background-color 0.2s;
        border: none;

        &:hover {
          background: #3333cc;
          color: white;
          text-decoration: none;
        }
      }
    }
  }
}

.footer {
  background: #00002b;
  text-align: center;
  @media (max-width: 992px) {
    text-align: left;
  }
  .footer-logo {
    padding-inline: 40px;
    padding-block: 40px 24px;
    @media (max-width: 992px) {
      padding-bottom: 32px;
    }
  }
  .footer-nav {
    margin-bottom: 24px;
    @media (max-width: 992px) {
      padding-inline: 40px;
    }
    ul {
      padding: 0;
      margin: 0;
      li {
        display: inline-block;
        margin: 0 8px;
        @media (max-width: 992px) {
          margin: 0;
          width: calc((100% - 8px) / 2);
        }
        a {
          font-size: 12px;
          line-height: 16px;
          font-weight: 600;
          color: #ffffff;
          opacity: 0.6;
          text-decoration: none;
          text-transform: uppercase;
          width: 100%;
          display: block;
          &:hover {
            opacity: 1;
          }
          @media (max-width: 992px) {
            padding-bottom: 16px;
          }
        }
      }
    }
  }
  ul.footer-social {
    margin-bottom: 40px;
    padding: 0;
    @media (max-width: 992px) {
      padding-inline: 40px;
    }
    li {
      display: inline-block;
      a {
        padding: 0 2px;
        @media (max-width: 992px) {
          padding: 0 4px;
          &:first-child {
            padding-left: 0;
          }
        }
        svg {
          circle {
            &:hover {
              fill: #4141ee;
              opacity: 1;
            }
          }
        }
      }
    }
  }
  .copyright {
    padding: 16px 0;
    border-top: 1px solid #333355;
    text-align: center;
    p {
      margin-bottom: 0;
      color: #666666;
      font-size: 12px;
      line-height: 16px;
    }
  }
}

.item-extra {
  display: flex;
  gap: 0px 4px;
  flex-flow: row wrap;
  & > span {
    font-size: 12px;
    line-height: 16px;
    color: #8a8a9c;
    display: flex;
    align-self: center;
    svg {
      margin-right: 4px;
    }
  }
}

.custom-ads {
  text-align: center;
  @media (max-width: 992px) {
    display: none;
  }
  img {
    max-width: 970px;
    width: 100%;
    margin: 0 auto;
  }
  &.end-ads {
    padding: 40px 0;
  }
}

.whats-hot {
  margin-top: 80px;
  text-align: center;
  @media (max-width: 992px) {
    margin-top: 27px;
  }
  .whats-hot-head {
    position: relative;
    .heading {
      font-size: 32px;
      line-height: 48px;
      font-weight: 700;
      color: #070614;
      margin-bottom: 4px;
    }
    .sub-heading {
      font-size: 16px;
      line-height: 28px;
      color: #8a8a9c;
      margin-bottom: 34px;
      @media (max-width: 992px) {
        margin-bottom: 24px;
      }
    }
    .navigation-arrow {
      display: flex;
      gap: 4px;
      position: absolute;
      right: 0;
      bottom: 0;
      @media (max-width: 992px) {
        display: none;
      }
      svg {
        height: 40px;
        width: 40px;
        cursor: pointer;
        &.active {
          path {
            &:first-child {
              fill: #4141ee;
            }
            &:last-child {
              stroke: white;
            }
          }
        }
        &.disabled {
          path {
            &:first-child {
              fill: #f6f8fb;
            }
            &:last-child {
              stroke: #4141ee;
            }
          }
        }
      }
    }
  }
  .whats-hot-slider {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px; */
    margin-bottom: 43px;
    @media (max-width: 992px) {
      /* grid-template-columns: 1fr;  */
      margin-bottom: 36px;
    }
    .slick-track {
      height: fit-content !important;
    }
    .whats-hot-content {
      overflow: hidden;
      text-decoration: none;
      padding: 0 16px;
      &:hover {
        img {
          transform: scale(1.1);
        }
      }
      @media (max-width: 992px) {
        box-shadow: 0px 2px 6px 0px #19171a1f;
        border-radius: 16px;
        display: block;
        padding: 0;
        &:not(:last-child) {
          margin-bottom: 16px;
        }
      }
      .what-hot-img {
        overflow: hidden;
        border-radius: 8px;
        @media (max-width: 992px) {
          border-radius: 0px;
        }
      }
      img {
        width: 100%;
        border-radius: 8px;
        transition: transform 0.5s;
        background: transparent;
        @media (max-width: 992px) {
          max-height: 144px;
          height: 100%;
          object-fit: cover;
          border-radius: 0px;
        }
      }
      .whats-hot-detail {
        position: relative;
        margin-bottom: 40px;
        background: #ffffff;
        @media (max-width: 992px) {
          padding: 24px;
          margin-bottom: 0px;
        }
        .tag {
          display: flex;
          gap: 2px;
          position: absolute;
          left: 16px;
          padding: 8px 12px 4px;
          margin-bottom: 0px;
          top: -28px;
          font-size: 12px;
          line-height: 16px;
          font-weight: 500;
          background: #ffffff;
          border-top-left-radius: 8px;
          border-top-right-radius: 8px;
          color: #212529;
          svg {
            align-self: center;
          }
          span {
            align-self: center;
          }
        }
        .para {
          padding-top: 24px;
          font-size: 16px;
          line-height: 22px;
          font-weight: 700;
          margin-bottom: 16px;
          text-align: left;
          color: #212529;
          @media (max-width: 992px) {
            padding: 0;
            margin-bottom: 13px;
          }
          &:hover {
            color: #4141ee;
          }
        }
      }
    }
  }
}

.top-stories {
  padding-top: 40px;
  padding-bottom: 77px;
  @media (max-width: 992px) {
    padding-top: 0;
    padding-bottom: 40px;
  }
  .top-stories-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .stories {
      .heading {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32px;
        @media (max-width: 992px) {
          margin-bottom: 24px;
        }
        h3 {
          font-size: 24px;
          line-height: 36px;
          font-weight: 700;
          color: #070614;
        }
        .view-all {
          display: flex;
          gap: 4px;
          align-items: center;
          a {
            font-size: 14px;
            line-height: 21px;
            font-weight: 500;
            color: #4141ee;
            display: flex;
            gap: 7px;
            text-decoration: none;
            align-self: center;
          }
        }
      }
      .story-content {
        border: 1px solid #d3dce6;
        overflow: hidden;
        border-radius: 16px;
        display: grid;
        grid-template-columns: 264px auto;
        gap: 32px;
        min-height: 240px;
        &:hover {
          box-shadow: 0px 14px 64px -4px #19171a1f, 0px 8px 22px -6px #19171a0f;
          border: 1px solid #d3dce64d;
          img {
            transform: scale(1.2);
          }
        }
        @media (max-width: 992px) {
          grid-template-columns: 1fr;
          gap: 0;
        }
        &:not(:last-child) {
          margin-bottom: 16px;
        }
        a {
          overflow: hidden;

          .store-img {
            width: 264px;
            height: 216px;
            height: 100%;
            display: block;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            transition: transform 0.5s;
            @media (max-width: 992px) {
              width: 100%;
            }
            &:hover {
              transform: scale(1.2);
            }
          }
          img {
            visibility: hidden;
            height: 100%;
            transition: transform 0.5s;
            @media (max-width: 992px) {
              width: 100%;
            }
          }
        }
        .story-detail {
          padding: 38px 32px 38px 0;
          position: relative;
          @media (max-width: 992px) {
            padding: 24px;
          }
          h4 {
            font-size: 20px;
            line-height: 28px;
            font-weight: 700;
            color: #070614;
            margin-bottom: 12px;
          }
          a:hover ~ h4 {
            color: #4141ee;
          }
          p {
            margin-top: 16px;
            margin-bottom: 0;
            font-size: 14px;
            line-height: 21px;
            color: #595970;
          }
        }
      }
    }
    .ads {
      margin-top: 15px;
      @media (max-width: 992px) {
        margin-top: 24px;
      }
      img {
        width: 100%;
      }
      .tech-mailer {
        background: #01004e;
        margin-top: 24px;
        padding: 32px;
        text-align: center;
        border-radius: 8px;
        @media (max-width: 992px) {
          display: none;
        }
        .tech-mailer-head {
          h3 {
            font-size: 20px;
            line-height: 32px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 6px;
          }
          p {
            font-size: 14px;
            line-height: 21px;
            color: #ffffff;
            margin-bottom: 0;
            opacity: 0.7;
            margin-bottom: 16px;
          }
        }
        .tech-mailer-form {
          margin-bottom: 16px;
          input {
            width: 100%;
            font-size: 14px;
            line-height: 21px;
            border-radius: 8px;
            padding: 14px 16px;
            border: 1px solid #4141ee;
            background: #ffffff1a;
            margin-bottom: 8px;
            color: #ffffff;
            &::placeholder {
              font-size: 14px;
              line-height: 21px;
              font-weight: 400;
              color: #8a8a9c;
            }
          }
          button {
            background: #4141ee;
            color: white;
            font-size: 14px;
            line-height: 21px;
            padding: 16px;
            border-radius: 8px;
            width: 100%;
            outline: none;
            box-shadow: none;
            border: none;
          }
        }
        .tech-mailer-privacy {
          p {
            font-size: 12px;
            line-height: 16px;
            color: #ffffff80;
            margin-bottom: 0;
            a {
              color: #4141ee;
              text-decoration: none;
            }
          }
        }
      }
    }
  }
}

.explore-news {
  padding: 94px 0px 109px;
  background: url(/images/news/bg-1.png) no-repeat #00004c;
  background-size: cover;
  background-blend-mode: soft-light;
  @media (max-width: 992px) {
    padding: 29px 24px 40px;
  }
  h2 {
    font-size: 32px;
    line-height: 48px;
    font-weight: 700;
    color: #ffffff;
    max-width: 1024px;
    margin: 0 auto 24px;
  }
  .category {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px 34px;
    max-width: 1024px;
    margin: 0 auto;
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .category-item {
      border: 1px solid #ffffff33;
      text-align: center;
      width: 100%;
      display: block;
      text-decoration: none;
      backdrop-filter: blur(8px);
      border-radius: 8px;

      @media (max-width: 992px) {
        display: flex;
        flex-direction: row;
        padding: 16px;
        justify-content: space-between;
      }
      &:hover {
        border: 1px solid transparent;
        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          padding: 1px; /* Border thickness */
          border-radius: inherit;
          background: linear-gradient(
            42.11deg,
            #d564ed 23.53%,
            #008bf7 92.33%,
            #00afec 136.31%
          ); /* Border gradient */
          -webkit-mask: linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          z-index: -1;
        }
        .news-container {
          svg {
            opacity: 1;
            defs {
              display: block;
            }
          }
        }
      }
      .news-container {
        padding: 36px;
        @media (max-width: 992px) {
          display: flex;
          flex-direction: row;
          align-items: center;
          padding: 0;
        }
        svg {
          margin-bottom: 24px;
          opacity: 0.5;
          defs {
            display: none;
          }
          @media (max-width: 992px) {
            height: 40px;
            width: 40px;
            margin-bottom: 0;
            margin-right: 16px;
          }
        }
      }
      & > svg {
        display: none;
        @media (max-width: 992px) {
          display: block;
          align-self: center;
        }
      }
      p {
        font-size: 16px;
        line-height: 24px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 0;
        @media (max-width: 992px) {
          align-self: center;
          line-height: 28px;
          font-weight: 500;
        }
      }
    }
  }
}
.gadgets {
  padding: 80px 0 40px;
  @media (max-width: 992px) {
    padding: 36px 0 24px;
  }
  .gadgets-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .gadgets-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      column-gap: 24px;
      @media (max-width: 992px) {
        grid-template-columns: 1fr;
      }
      .gadgets-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        grid-column: span 2 / span 2;
        @media (max-width: 992px) {
          margin-bottom: 16px;
          grid-column: span 1 / span 1;
        }
        h3 {
          font-size: 24px;
          line-height: 36px;
          font-weight: 700;
          color: #070614;
          margin-bottom: 0;
        }
        a.view-all {
          display: flex;
          gap: 7px;
          align-items: center;
          font-size: 14px;
          line-height: 21px;
          font-weight: 500;
          color: #4141ee;
          text-decoration: none;
          span {
            align-self: center;
          }
        }
      }
      .gadgets-first {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 48px;
        grid-column: span 2 / span 2;
        @media (max-width: 992px) {
          grid-template-columns: 1fr;
          gap: 16px;
          margin-bottom: 24px;
          grid-column: span 1 / span 1;
        }
        a {
          overflow: hidden;
          border-radius: 16px;
          img {
            width: 100%;
            border-radius: 8px;
            aspect-ratio: 16 / 9;
            object-fit: cover;
            transition: transform 0.5s;
            &:hover {
              transform: scale(1.1);
            }
          }
        }
        .details {
          h4 {
            font-size: 20px;
            line-height: 28px;
            font-weight: 700;
            color: #070614;
            margin-bottom: 12px;
          }
          p {
            margin-top: 24px;
            margin-bottom: 16px;
            font-size: 14px;
            line-height: 21px;
            color: #595970;
            @media (max-width: 992px) {
              margin-top: 20px;
              margin-bottom: 8px;
            }
          }
          a.read-more {
            font-size: 14px;
            line-height: 21px;
            font-weight: 500;
            color: #4141ee;
            text-decoration: none;
            display: flex;
            gap: 4px;
            align-items: center;
          }
        }
      }

      .gadgets-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        gap: 16px;
        text-decoration: none;
        @media (min-width: 992px) {
          &:not(:nth-last-child(1)):not(:nth-last-child(2)) {
            margin-bottom: 32px;
          }
        }
        @media (max-width: 992px) {
          display: grid;
          grid-template-columns: 1fr 3fr;
          box-shadow: none;
          margin-bottom: 24px;
          /* box-shadow: 0px 2px 6px 0px #19171a1f; */
        }
        .details {
          @media (min-width: 992px) {
            margin-block: auto;
          }
          img {
            border-radius: 8px;
          }
          h4 {
            font-size: 14px;
            line-height: 20px;
            font-weight: 600;
            color: #161616;
            margin-bottom: 8px;
            &:hover {
              color: #4141ee;
            }
          }
        }
        img {
          height: 100%;
          object-fit: cover;
          /* aspect-ratio: 1 / 1; */
          border-radius: 8px;
          @media (max-width: 992px) {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
    .gadgets-sidebar {
      input[type="radio"] {
        display: none;
      }
      input#india:checked ~ .sidebar-tab label[for="india"],
      input#worldwide:checked ~ .sidebar-tab label[for="worldwide"] {
        background: white;
        color: #4141ee;
      }
      .sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #8a8a9c33;
        position: relative;
        margin-bottom: 16px;
        &::after {
          position: absolute;
          content: "";
          left: 0;
          bottom: -1px;
          height: 2px;
          width: 37px;
          background: #4141ee;
        }
        h3 {
          font-size: 24px;
          line-height: 36px;
          font-weight: 700;
          color: #070614;
          margin-bottom: 12px;
        }
      }
      .sidebar-tab {
        background: #f6f8fb;
        padding: 8px;
        border-radius: 50px;
        display: flex;
        gap: 4px;
        margin-bottom: 16px;
        width: fit-content;
        @media (max-width: 992px) {
          margin: 0 auto 24px;
        }
        label.tab-item {
          padding: 8px 16px;
          font-size: 12px;
          line-height: 16px;
          font-weight: 600;
          color: #8a8a9c;
          border-radius: 50px;
          cursor: pointer;
          margin-bottom: 0;
          min-width: 100px;
          text-align: center;
        }
      }
      .sidebar-item {
        text-decoration: none;
        display: none;
        grid-template-columns: 3fr 1fr;
        gap: 24px;
        padding-bottom: 16px;
        margin-bottom: 16px;
        border-bottom: 1px solid #8a8a9c33;
        .details {
          h4 {
            font-size: 16px;
            line-height: 22px;
            color: #161616;
            margin-bottom: 10px;
          }
          .date,
          .location {
            display: flex;
            gap: 4px;
            color: #595970;
          }
          .date {
            font-size: 14px;
            line-height: 21px;
            margin-bottom: 8px;
          }
          .location {
            font-size: 12px;
            line-height: 16px;
            margin-bottom: 0;
          }
        }
        img {
          border-radius: 16px;
          margin-left: auto;
        }
      }
      #india:checked ~ .sidebar-content .india {
        display: grid;
      }
      /* Show Worldwide events when Worldwide tab is checked */
      #worldwide:checked ~ .sidebar-content .worldwide {
        display: grid;
      }
    }
  }
}

.review {
  padding: 40px 0;
  .review-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
      gap: 38px;
    }
    .review-content {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      @media (max-width: 992px) {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .review-header {
        display: none;
        grid-column: span 2 / span 2;
        @media (max-width: 992px) {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #8a8a9c;
          position: relative;
          margin-bottom: 16px;
          grid-column: span 1 / span 1;
          &::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: -1px;
            height: 2px;
            width: 37px;
            background: #4141ee;
          }
          h3 {
            font-size: 24px;
            line-height: 36px;
            font-weight: 700;
            color: #070614;
            margin-bottom: 12px;
          }
        }
      }
      .review-first {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background: #17171a;
        border-radius: 16px;
        overflow: hidden;
        grid-column: span 2 / span 2;
        @media (max-width: 992px) {
          grid-template-columns: 1fr;
          margin-bottom: 16px;
          grid-column: span 1 / span 1;
        }
        .review-img {
          overflow: hidden;
          &:hover {
            img {
              transform: scale(1.1);
            }
          }
          img {
            width: 100%;
            border-radius: 8px;
            height: 100%;
            transition: transform 0.5s;
            @media (max-width: 992px) {
              order: 1;
              max-height: 200px;
              object-fit: cover;
            }
          }
        }
        .details {
          padding: 64px 34px 32px 32px;
          @media (max-width: 992px) {
            order: 2;
            padding: 26px 24px 24px;
          }
          small {
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 12px;
            line-height: 12px;
            letter-spacing: 0.5px;
            font-weight: 700;
            background: #ff5722;
            text-transform: uppercase;
            margin-bottom: 16px;
            display: block;
            width: fit-content;
            color: #ffffff;
          }
          a {
            text-decoration: none;
            h4 {
              font-size: 24px;
              line-height: 32px;
              font-weight: 700;
              color: #ffffff;
              margin-bottom: 16px;
              &:hover {
                color: #4141ee;
              }
            }
          }
          p {
            margin-bottom: 16px;
            font-size: 12px;
            line-height: 16px;
            color: #ffffff;
          }
        }
      }

      .review-item {
        position: relative;
        box-shadow: 0px 2px 6px 0px #19171a1f;
        border-radius: 8px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 16px;
        padding: 32px 24px;
        height: fit-content;
        @media (max-width: 992px) {
          padding: 16px;
        }
        .details {
          small {
            padding: 6px 8px;
            border-radius: 4px;
            font-size: 12px;
            line-height: 12px;
            letter-spacing: 0.5px;
            font-weight: 700;
            background: #ff5722;
            text-transform: uppercase;
            margin-bottom: 12px;
            display: block;
            width: fit-content;
            color: #ffffff;
          }
          a {
            text-decoration: none;
            h4 {
              font-size: 16px;
              line-height: 22px;
              font-weight: 700;
              color: #070614;
              margin-bottom: 16px;
              &:hover {
                color: #4141ee;
              }
            }
          }
        }
        img {
          width: 130px;
          height: 130px;
          border-radius: 8px;
        }
      }
    }
    .review-sidebar {
      .sidebar-header {
        border-bottom: 1px solid #8a8a9c33;
        position: relative;
        margin-bottom: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &::after {
          position: absolute;
          content: "";
          left: 0;
          bottom: -1px;
          height: 2px;
          width: 37px;
          background: #4141ee;
        }
        h3 {
          font-size: 24px;
          line-height: 36px;
          color: #070614;
          margin-bottom: 12px;
          font-weight: 700;
        }
      }
      .sidebar-item {
        a {
          text-decoration: none;
        }
        h4 {
          font-size: 16px;
          line-height: 22px;
          color: #161616;
          font-weight: 800;
          margin-bottom: 12px;
          &:hover {
            color: #4141ee;
          }
        }
        &:not(:last-child) {
          margin-bottom: 24px;
        }
        .item-extra {
          align-items: center;
          span {
            align-self: center;
          }
        }
      }
    }
  }
}
.get-in-touch {
  padding-bottom: 60px;
  @media (max-width: 992px) {
    padding-bottom: 40px;
  }
  .get-in-touch-wrapper {
    background: #00004c;
    border-radius: 32px;
    padding: 72px 0;
    text-align: center;
    background: url(/images/news/get-in-touch.png) no-repeat #00004c;
    background-size: cover;
    @media (max-width: 992px) {
      border-radius: 8px;
      padding: 32px 24px;
      background: #00004c;
    }
    .get-in-touch-content {
      max-width: 408px;
      margin: 0 auto;
      h3 {
        font-size: 32px;
        line-height: 48px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 8px;
        @media (max-width: 992px) {
          font-size: 20px;
          line-height: 32px;
          margin-bottom: 6px;
        }
      }
      p {
        font-size: 16px;
        line-height: 28px;
        color: #ffffff;
        margin-bottom: 24px;
        opacity: 0.7;
        @media (max-width: 992px) {
          font-size: 14px;
          line-height: 21px;
          margin-bottom: 16px;
        }
      }
    }
    .get-in-touch-form {
      background: #ffffff;
      border-radius: 58px;
      display: flex;
      gap: 10px;
      padding: 4px;
      margin-bottom: 20px;
      @media (max-width: 992px) {
        flex-direction: column;
        background: transparent;
        gap: 8px;
        margin-bottom: 16px;
      }
      input {
        width: 100%;
        font-size: 14px;
        line-height: 21px;
        padding: 10px 0 10px 17px;
        border: none;
        background: transparent;
        @media (max-width: 992px) {
          border: 1px solid #4141ee;
          padding: 14px 16px;
          border-radius: 8px;
          background: #ffffff1a;
          color: #ffffff;
          &::placeholder {
            font-size: 14px;
            line-height: 21px;
            font-weight: 400;
            color: #8a8a9c;
          }
        }
      }
      button {
        background: #4141ee;
        color: white;
        font-size: 14px;
        line-height: 16px;
        padding: 12px 16px;
        border-radius: 58px;
        border: none;
        outline: none;
        box-shadow: none;
        @media (max-width: 992px) {
          padding: 16px;
          border-radius: 8px;
        }
      }
    }
    .get-in-touch-privacy {
      p {
        font-size: 12px;
        line-height: 16px;
        color: #ffffff80;
        margin-bottom: 0;
        a {
          color: #4141ee;
          text-decoration: none;
        }
      }
    }
  }
}

/* Category Page */

.web-stories {
  margin-top: 32px;
  margin-bottom: 80px;
  @media (max-width: 992px) {
    margin-top: 16px;
    margin-bottom: 40px;
  }
  .web-stories-list {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 16px;
    @media (max-width: 992px) {
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .web-story-item {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      &:hover {
        img {
          transform: scale(1.1);
        }
      }
      &:first-child {
        @media (max-width: 992px) {
          grid-column: span 2 / span 2;
        }
        .item-extra {
          display: flex !important;
        }
        img {
          transition: transform 0.5s;
          @media (max-width: 992px) {
            height: 384px;
          }
        }
      }
      .details {
        position: absolute;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
        padding: 104px 32px 32px;
        bottom: 0;
        width: 100%;
        @media (max-width: 992px) {
          padding: 30px 16px 16px;
        }
        small {
          background: #2d8eff;
          border-radius: 4px;
          padding: 6px 6px 6px 8px;
          font-size: 12px;
          line-height: 12px;
          font-weight: 700;
          color: #ffffff;
          letter-spacing: 0.5px;
          margin-bottom: 16px;
          display: block;
          width: fit-content;
        }
        h4 {
          font-size: 24px;
          line-height: 30px;
          font-weight: 700;
          color: #ffffff;
          margin-bottom: 16px;
          @media (max-width: 992px) {
            font-size: 20px;
            line-height: 24px;
          }
        }
        .item-extra {
          @media (max-width: 992px) {
            display: none;
          }
        }
      }
      img {
        width: 100%;
        height: 552px;
        object-fit: cover;
        transition: transform 0.5s;
        @media (max-width: 992px) {
          height: 200px;
        }
      }
    }
  }
}

.category {
  margin-bottom: 152px;
  @media (max-width: 992px) {
    margin-bottom: 40px;
  }
  .category-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
      gap: 36px;
    }
    .category-content {
      .category-header {
        h3 {
          font-size: 24px;
          line-height: 36px;
          font-weight: 700;
          color: #070614;
          margin-bottom: 20px;
          text-transform: capitalize;
          @media (max-width: 992px) {
            margin-bottom: 24px;
          }
        }
      }
      .category-details {
        display: flex;
        flex-direction: column;
        gap: 24px;
        .category-item {
          display: grid;
          grid-template-columns: 168px auto;
          gap: 24px;
          padding-bottom: 24px;
          @media (max-width: 992px) {
            grid-template-columns: 96px auto;
            gap: 16px;
            padding-bottom: 0;
          }
          &:not(:last-child) {
            border-bottom: 1px solid #d3dce6;
            @media (max-width: 992px) {
              border-bottom: none;
            }
          }
          img {
            border-radius: 8px;
            aspect-ratio: 4 / 1;
            object-fit: cover;
            @media (max-width: 992px) {
              width: 96px;
              height: 90px;
            }
          }
          a {
            text-decoration: none;
          }
          h4 {
            font-size: 20px;
            line-height: 32px;
            font-weight: 700;
            color: #070614;
            margin-bottom: 8px;
            margin-top: 12px;
            &:hover {
              color: #4141ee;
            }
            @media (max-width: 992px) {
              margin-block: 9px 8px;
              font-size: 14px;
              line-height: 20px;
              font-weight: 600;
              color: #161616;
            }
          }
        }
      }
    }
    .category-sidebar {
      .top-stories {
        margin-bottom: 58px;
        padding: 0;
        .sidebar-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px solid #8a8a9c;
          position: relative;
          margin-bottom: 16px;
          &::after {
            position: absolute;
            content: "";
            left: 0;
            bottom: -1px;
            height: 2px;
            width: 37px;
            background: #4141ee;
          }
          h3 {
            font-size: 24px;
            line-height: 36px;
            font-weight: 700;
            color: #070614;
            margin-bottom: 12px;
          }
        }
        .sidebar-item {
          display: grid;
          grid-template-columns: 96px auto;
          gap: 16px;
          a {
            text-decoration: none;
            img {
              width: 96px;
              height: 70px;
              border-radius: 8px;
              aspect-ratio: 4 / 1;
              object-fit: cover;
            }
          }
          h4 {
            font-size: 16px;
            line-height: 22px;
            color: #161616;
            font-weight: 800;
            margin-bottom: 12px;
            &:hover {
              color: #4141ee;
            }
          }
          &:not(:last-child) {
            margin-bottom: 24px;
          }
          .item-extra {
            align-items: center;
            span {
              align-self: center;
            }
          }
        }
      }
      .get-in-touch {
        background: #01004e;
        padding: 32px;
        text-align: center;
        border-radius: 8px;
        position: sticky;
        top: 90px;
        .get-in-touch-wrapper {
          padding: 0;
          background: none;
          .get-in-touch-content {
            max-width: 100%;
            h3 {
              font-size: 20px;
              line-height: 32px;
              font-weight: 700;
              color: #ffffff;
              margin-bottom: 6px;
            }
            p {
              font-size: 14px;
              line-height: 21px;
              color: #ffffff;
              margin-bottom: 0;
              opacity: 0.7;
              margin-bottom: 16px;
            }
            .get-in-touch-form {
              flex-direction: column;
              background: transparent;
              gap: 8px;
              margin-bottom: 16px;
              input {
                border: 1px solid #4141ee;
                padding: 14px 16px;
                border-radius: 8px;
                background: #ffffff1a;
                color: #ffffff;
                &::placeholder {
                  font-size: 14px;
                  line-height: 21px;
                  font-weight: 400;
                  color: #8a8a9c;
                }
              }
            }
            .get-in-touch-privacy {
              p {
                font-size: 12px;
                line-height: 16px;
                color: #ffffff80;
                margin-bottom: 0;
                a {
                  color: #4141ee;
                  text-decoration: none;
                }
              }
            }
          }
        }
        button {
          background: #4141ee;
          color: white;
          font-size: 14px;
          line-height: 21px;
          padding: 16px;
          border-radius: 8px;
          width: 100%;
          outline: none;
          box-shadow: none;
          border: none;
        }
      }
    }
  }
}

/* contact us */

.contact-content {
  margin-top: 64px;
  width: 70%;
  @media (max-width: 992px) {
    width: 100%;
    margin-top: 24px;
  }
  h1 {
    font-size: 64px;
    line-height: 72px;
    font-weight: 800;
    margin-bottom: 64px;
    @media (max-width: 992px) {
      font-size: 32px;
      line-height: 48px;
      margin-bottom: 24px;
    }
  }
}
.contact-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 16px;
  row-gap: 24px;
  margin-bottom: 100px;
  @media (max-width: 992px) {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px;
    margin-bottom: 40px;
  }
  div.form-group {
    display: flex;
    flex-direction: column;
    &.textarea {
      grid-column: span 3 / span 3;
      @media (max-width: 992px) {
        grid-column: span 1 / span 1;
      }
    }
    label {
      font-size: 14px;
      line-height: 21px;
      font-weight: 500;
      color: #595970;
      margin-bottom: 8px;
    }
    input,
    textarea {
      padding: 14px 16px;
      border: 1px solid #d3dce6;
      border-radius: 8px;
      font-size: 14px;
      line-height: 21px;
    }
    textarea {
      min-height: 200px;
      resize: none;
    }
  }
  button {
    background: #4141ee;
    color: white;
    font-size: 14px;
    line-height: 21px;
    padding: 16px;
    border-radius: 8px;
    width: 100%;
    outline: none;
    box-shadow: none;
    border: none;
    max-width: 256px;
  }
}

.progress-bar-wrapper {
  width: 100%;
  height: 1px;
  /* background-color: #8A8A9C33; */
  border-radius: 4px;
  position: absolute;
  cursor: pointer;
  grid-column: span 2;
  bottom: 0;
}

.progress-bar {
  width: 100%;
  height: 100%;
}

.progress-fill {
  height: 100%;
  background-color: #4141ee;
  width: 0%;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.progress-thumb {
  width: 16px;
  height: 16px;
  background-color: #ffffff;
  border: 2px solid #4141ee;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: auto;
}
/* #global-audio-player {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  padding: 16px;
  z-index: 1000;
} */
/* .progress-bar {
  height: 4px;
  background: #e5e5e5;
  position: relative;
  border-radius: 4px;
  margin-bottom: 12px;
} */

#global-audio-player {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9999;
  box-shadow: 0px -12px 42px -4px #19171a1f, 0px -8px 18px -6px #19171a1f;
  background: #ffffff;
  padding: 12px 16px;
  display: none;
  #global-progress {
    position: absolute;
    height: 100%;
    background: #4141ee;
    width: 0%;
    border-radius: 4px;
  }
  .progress-bar {
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    background: #f6f8fb;
  }
  .audio-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .audio-controls button {
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
  }
  .global-play {
    display: flex;
    gap: 24px;
  }
}

/* Not found */

.not-found-wrapper {
  max-width: 750px;
  margin: 120px auto 0;
  text-align: center;
  @media (max-width: 992px) {
    margin-top: 80px;
    padding-top: 80px;
    background: #ffffff;
  }
  h1 {
    margin-top: 24px;
    font-size: 24px;
    line-height: 36px;
    font-weight: 700;
    @media (max-width: 992px) {
      font-size: 18px;
      line-height: 30px;
      font-weight: 500;
      margin-top: 15px;
      margin-bottom: 40px;
    }
  }
  .all-category {
    background: #00004c;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    padding-bottom: 100px;
    padding-top: 48px;
    .all-category-head {
      width: 400px;
      margin: auto;
      @media (max-width: 992px) {
        width: 100%;
      }
      h3 {
        font-size: 20px;
        line-height: 32px;
        font-weight: 700;
        color: #ffffff;
        margin-bottom: 16px;
      }
      svg {
        margin-bottom: 24px;
      }
    }
    .tag-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      width: 90%;
      margin: auto;
      justify-content: center;
    }

    .tag {
      position: relative;
      padding: 10px 16px;
      border: 1px solid transparent;
      border-radius: 40px;
      color: white;
      font-size: 14px;
      line-height: 20px;
      text-decoration: none;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(
          42.11deg,
          #d564ed 23.53%,
          #008bf7 92.33%,
          #00afec 136.31%
        );
        -webkit-mask: linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
      }
    }
  }
}

.load-more {
  text-align: center;
  cursor: pointer;
  color: #4141ee;
  margin: 30px auto 0px;
  button {
    background: #4141ee;
    padding: 1rem;
    width: 350px;
    font-size: 14px;
    line-height: 16px;
    border-radius: 8px;
    border: none;
    outline: none;
    box-shadow: none;
    color: #ffffff;
    @media (max-width: 992px) {
      width: 100%;
    }
  }
}

.external-links {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
  z-index: 4;
}
.tag-link {
  z-index: 5;
  text-decoration: none;
}
.web-tag {
  position: relative;
  z-index: 5;
  text-decoration: none;
}
.gray-text p {
  color: #595970 !important;
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-top: 16px;
  margin-bottom: 24px;
  list-style: none;
  @media (max-width: 992px) {
    margin-top: 12px;
    margin-bottom: 16px;
  }
  li {
    padding: 10px 16px;
    background: #c6c3c3 !important;
    color: #000000 !important;
    font-size: 14px;
    line-height: 21px;
    user-select: none;
    border-radius: 40px;
    opacity: 0.8;
  }
}
.prime {
  background: #070614;
  color: #ffffff !important;
  font-weight: bold;
  text-transform: uppercase;
  padding: 2px 10px;
  align-self: center;
  border-radius: 12px;
  font-size: 10px;
  svg {
    align-self: center;
  }
}
.article-image:has(.prime) {
  position: relative;
  .prime {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
  }
}

.web-story-item:has(.prime) {
  position: relative;
  h4 {
    margin-top: 4px !important;
  }
  .prime {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 4px;
    width: fit-content;
  }
}
.letest-unpluged:has(.prime) {
  align-items: center;
  margin-bottom: 8px;
  .prime {
    font-size: 10px !important;
    display: flex;
    gap: 2px;
  }
  small {
    margin-bottom: 0 !important;
  }
}
.story-img-container:has(.prime) {
  position: relative;
  .prime {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 2px;
    width: fit-content;
    margin-bottom: 5px;
  }
}
.gadgets-first .gadgets-img-cont:has(.prime),
.gadget-img:has(.prime) {
  position: relative;
  .prime {
    display: flex !important;
    gap: 2px;
    width: fit-content;
    margin-bottom: 5px;
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
  }
}

.gadgets-first .gadgets-img-cont:has(.prime) {
  .prime {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
  }
}

.what-hot-img:has(.prime) {
  position: relative;
  .prime {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex !important;
    gap: 2px;
    width: fit-content;
  }
}
.review-img:has(.prime) {
  position: relative;
  .prime {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex !important;
    gap: 2px;
    width: fit-content;
  }
}
.cat-img:has(.prime) {
  position: relative;
  .prime {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    display: flex !important;
    gap: 2px;
    width: fit-content;
  }
}

/* User Profile Styles */
.user-profile-desktop {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 9998;
}

.user-profile-mobile {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 9998;
}

/* Fix header layout */
.login-button-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  margin-left: auto;
  width: auto;
}

.login-button {
  display: inline-block;
  padding: 8px 16px;
  background: #4141ee;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
  white-space: nowrap;
  width: auto;
  min-width: fit-content;
}

.login-button:hover {
  background: #3333cc;
  color: white;
  text-decoration: none;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.2s;
  position: relative;
  z-index: 9998;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.user-dropdown {
  position: fixed;
  top: auto;
  right: auto;
  background: white;
  border: 1px solid #e1e5e9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  min-width: 120px;
  z-index: 999999;
  display: none;
  max-height: 200px;
  overflow: hidden;
}

/* Desktop user profile hover behavior */
.user-profile-desktop {
  position: relative;
  z-index: 99998;
  overflow: visible;
}

/* CSS hover disabled - using JavaScript for positioning */

.logout-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  color: #667eea;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.logout-link:hover {
  text-decoration: none;
  color: #667eea;
}

/* Mobile specific styles */
@media (max-width: 768px) {
  .user-profile-mobile {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-dropdown {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 8px 0;
  }

  .logout-link {
    color: #667eea;
  }

  /* Mobile login button fixes */
  .mobile-login-button {
    display: inline-block;
    padding: 8px 12px;
    background: #4141ee;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s;
    white-space: nowrap;
    width: auto;
    min-width: fit-content;
  }

  .mobile-login-button:hover {
    background: #3333cc;
    color: white;
    text-decoration: none;
  }

  /* Mobile header navigation fixes */
  .header .offcanvas-body {
    padding: 0 16px 0 16px;
    margin-top: 0;

    nav ul {
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
      width: 100%;

      li {
        width: 100%;
        border-bottom: 1px solid #e6e6e7;

        &:last-child {
          border-bottom: none;
        }

        a {
          padding: 16px 0;
          font-size: 16px;
          line-height: 24px;
          font-weight: 500;
          color: #070614;
          border-bottom: none;
          width: 100%;
          text-align: left;
        }
      }
    }
  }
}

/* Navbar toggler right alignment */
.navbar-toggler {
  margin-left: auto;
  order: 2;
}

/* Mobile specific navbar toggler alignment */
@media (max-width: 768px) {
  .header .d-flex.navbar-expand-lg {
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .header .navbar-toggler {
    margin-left: auto;
    order: 3;
    flex-shrink: 0;
  }

  .header .logo {
    order: 1;
    flex-shrink: 0;
  }

  .header .d-flex.search {
    order: 2;
    margin-left: auto;
    margin-right: 10px;
  }

  /* Hide person circle icon in mobile view */
  .bi.bi-person-circle {
    display: none !important;
  }

  /* Custom user icon styling */
  .user-info svg {
    flex-shrink: 0;
    color: #667eea;
  }

  /* Mobile logout button styling */
  .mobile-logout-section {
    margin-top: 12px;
    padding-top: 12px;
  }

  .mobile-logout-button {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #667eea;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .mobile-logout-button:hover {
    background: #667eea;
    color: white;
    text-decoration: none;
    border-color: #667eea;
  }

  .mobile-logout-button svg {
    flex-shrink: 0;
  }
}

/* Keyframes for slide down animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Add padding to body when header is fixed to prevent content jump */
body.header-fixed {
  padding-top: 80px; /* Adjust based on your header height */
}
.related-news {
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  color: #595970;
  a {
    text-decoration: none;
    color: #3030cc !important;
  }
}