.textarea {
    width: 100%;
    height: auto;
    background-color: #42424220; /* Semi-transparent background */
    opacity: 0.9;
    backdrop-filter: blur(10px);
    color: white
}

.textarea:focus {
  width: 100%;
  height: auto;
  background-color: #42424220; /* Semi-transparent background */
  opacity: 0.9;
  backdrop-filter: blur(10px);
  color: white
}

textarea.form-control::placeholder {
    color: #cccccc;
}

textarea.form-control::-moz-placeholder {
    color: #cccccc;
}

textarea.form-control:-ms-input-placeholder {
    color: #cccccc;
}

textarea.form-control::-webkit-input-placeholder {
    color: #cccccc;
}

#my-div {
    /* background-image: url("static/img/istockphoto-1129050990-612x612.jpg"); */
    background-position: center;
    background-size: cover;
  }

#extra-info {
  display: flex;
  flex-direction:column;
  /* justify-content: left; */
  /* align-items: center; */
  color: #ffffff !important;
  flex-wrap: wrap;
  align-content: flex-start;
}
/* For larger screens: */
/* For larger screens: */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  text-align: left;
  flex: 1;
}

.footer-logo {
 display: flex;
 align-items: center;
 margin-bottom: 8%;
}

.footer-right {
  flex: 1;
  text-align: right;
  margin-bottom: 8%;
}

.footer-right ul {
  display: flex;
  justify-content: flex-end;
  list-style: none;
  padding: 0;
}

.footer-right ul li {
  margin-left: 10px;
}

/* For smaller screens: */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    position: static; /* Remove absolute positioning for small screens */
  }

  .footer-left,
  .footer-logo,
  .footer-right {
    position: static; /* Ensure natural flow in the stack */
    margin-bottom: 15px; /* Add margin for spacing */
  }

  .footer-right ul {
    justify-content: center;
  }

  .footer-logo {
    order: 1;
    margin-bottom: 15px; /* Space between the logo and other elements */
  }

  .footer-right {
    order: 2;
  }

  .footer-left {
    order: 3;
  }
}



/* @media only screen and (max-width: 375px) {
  .footer-content{
    flex-direction: column;
    align-items: center;
    background-color: #00ff33;
  }
}

@media only screen and (max-width: 430px) {
  .footer-content {
    flex-direction: column;
    align-items: center;
    background-color: #ff0000;
  }

  .footer-logo {
    margin-top: 10%;
  }
}

@media only screen and (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    justify-content: center;
    background-color: #00ff33;
  }
}

@media only screen and (max-width: 1024px) {
  .footer-content {
    flex-direction: row;
    justify-content: space-around;
  }
} */

/* width */
::-webkit-scrollbar {
    width: 5px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgb(35, 11, 11);
    border-radius: 10px;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: rgb(1, 1, 15);
    border-radius: 10px;
  }

  body {
    /* background-image: conic-gradient(#213, #112 50%, #213), 
    conic-gradient(transparent 20%, #08f, #f03); */
    background-image: linear-gradient(45deg, #000033, #000037, #000041);
    background-size: cover;
  }
  
@property --angle {
    syntax: '<angle>';
    initial-value: 90deg;
    inherits: true;
  }
  
  @property --gradX {
    syntax: '<percentage>';
    initial-value: 50%;
    inherits: true;
  }
  
  @property --gradY {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: true;
  }
  
  :root {
      --d: 2500ms;
      --angle: 90deg;
      --gradX: 100%;
      --gradY: 50%;
      --c1: rgba(168, 239, 255, 1);
      --c2: rgba(168, 239, 255, 0.1);
  }

  .form-style {
    border: 0.35rem solid;
    border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.1turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 30;
    animation: borderRotate var(--d) linear infinite forwards;
  }
  
  .form-style:hover {
    --d: 10s;
  }
  
  .form-style:nth-child(2) {
    border-image: radial-gradient(ellipse at var(--gradX) var(--gradY), var(--c1), var(--c1) 10%, var(--c2) 40%) 30;
    animation: borderRadial var(--d) linear infinite forwards;
  }
  
  .form-style:nth-child(2):hover {
    --d: 10s;
  }
  
  @keyframes borderRotate {
    0% {
      --angle: 0deg;
    }
    100% {
      --angle: 360deg;
    }
  }
  
  @keyframes borderRadial {
    0%, 100% {
      --gradX: 100%;
      --gradY: 50%;
    }
    25% {
      --gradX: 50%;
      --gradY: 100%;
    }
    50% {
      --gradX: 0%;
      --gradY: 50%;
    }
    75% {
      --gradX: 50%;
      --gradY: 0%;
    }
  }

/* Default */
.theme {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
.theme__icon {
  transition: transform 0.3s ease-in-out; 
}
.theme__icon,
.theme__toggle {
  z-index: 1;
}
.theme__icon,
.theme__icon-part {
  position: absolute;
}
.theme__icon {
  display: block;
  top: 0.75em;
  left: 0.75em;
  width: 1.5em;
  height: 1.5em;
}
.theme__icon-part {
  border-radius: 50%;
  box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
  top: calc(50% - 0.5em);
  left: calc(50% - 0.5em);
  width: 1em;
  height: 1em;
  transition:
    box-shadow 0.6s ease-in-out, 
    opacity 0.6s ease-in-out,
    transform 0.6s ease-in-out; 
  transform: scale(0.5);
}
.theme__icon-part ~ .theme__icon-part {
  background-color: hsl(0,0%,100%);
  border-radius: 0.05em;
  box-shadow: none;
  top: 50%;
  left: calc(50% - 0.05em);
  transform: rotate(0deg) translateY(0.5em);
  transform-origin: 50% 0;
  width: 0.1em;
  height: 0.2em;
}

.theme__icon-part:nth-child(3) {
  transform: rotate(45deg) translateY(0.5em);
}
.theme__icon-part:nth-child(4) {
  transform: rotate(90deg) translateY(0.5em);
}
.theme__icon-part:nth-child(5) {
  transform: rotate(135deg) translateY(0.5em);
}
.theme__icon-part:nth-child(6) {
  transform: rotate(180deg) translateY(0.5em);
}
.theme__icon-part:nth-child(7) {
  transform: rotate(225deg) translateY(0.5em);
}
.theme__icon-part:nth-child(8) {
  transform: rotate(270deg) translateY(0.5em);
}
.theme__icon-part:nth-child(9) {
  transform: rotate(315deg) translateY(0.5em);
}
.theme__label,
.theme__toggle,
.theme__toggle-wrap {
  position: relative;
}
.theme__toggle,
.theme__toggle:before {
  display: block;
}
.theme__toggle {
  background-color: #F2EEFF;
  border-radius: 25% / 50%;
  box-shadow: 0 0 0 0.125em #F2EEFF;
  padding: 0.15em; /* Reduced padding */
  width: 3em;      /* Reduced width */
  height: 1.5em;   /* Reduced height */
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.6s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.3s ease-in-out;
}
.theme__toggle:before {
  background-image: linear-gradient(135deg, #6f26f7 0%, #a07ef0 100%);
  border-radius: 50%;
  content: "";
  width: 1.25em; /* Reduced width */
  height: 1.25em; /* Reduced height */
  transition: background-color 0.6s ease-in-out, transform 0.3s ease-in-out;
}

.theme__toggle:focus {
  box-shadow: 0 0 0 0.125em;
  outline: transparent;
}

/* Checked */
.theme__toggle:checked {
  background-color: #F2EEFF;
}

.theme__toggle:checked:before,
.theme__toggle:checked ~ .theme__icon {
  transform: translateX(1.5em);
}

.theme__toggle:checked:before {
  background-image: linear-gradient(135deg, #6f26f7 0%, #a07ef0 100%);
}
.theme__toggle:checked ~ .theme__fill {
  transform: translateX(0);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {
  box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
  transform: scale(1);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {
  opacity: 0;
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {
  transform: rotate(45deg) translateY(0.8em);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {
  transform: rotate(90deg) translateY(0.8em);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {
  transform: rotate(135deg) translateY(0.8em);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {
  transform: rotate(180deg) translateY(0.8em);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {
  transform: rotate(225deg) translateY(0.8em);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {
  transform: rotate(270deg) translateY(0.8em);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {
  transform: rotate(315deg) translateY(0.8em);
}
.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {
  transform: rotate(360deg) translateY(0.8em);
}
.theme__toggle-wrap {
  margin: 0 0.75em;
}

@supports selector(:focus-visible) {
  .theme__toggle:focus {
    box-shadow: 0 0 0 0.125em hsl(198,90%,15%); /* Replace var(--primaryT) */
  }
  .theme__toggle:focus-visible {
    box-shadow: 0 0 0 0.125em hsl(198,90%,15%); /* Replace var(--primary) */
  }
}


.custom-accordion, .custom-accordion .accordion-item {
  margin: 0 auto; /* to center the accordion */
  width: 90%; /* default to full width on mobile */
  background-color: transparent !important;
}

.custom-accordion .accordion-button {
  width: 100%; /* Ensure button covers full width */
  background-color: transparent !important;
  /* border: 1px solid white !important */
  color: white !important; /* Make the text white */
  border-radius: 0; /* Remove rounded corners */
}

/* This will apply when the screen width is 768px or more (typically tablets and desktops) */
@media (min-width: 768px) {
  .custom-accordion, .custom-accordion .accordion-item {
      width: 50%; /* 50% width on larger screens */
  }
}

.custom-accordion .accordion-button:not(.collapsed) {
  color: white !important;
  border-color: white !important; /* Make the border white */
  background-color: rgba(0, 0, 0, 0.1) !important; /* Slight background for contrast when expanded */
}
.custom-accordion .accordion-button:focus {
  color: white !important;
  box-shadow: none !important;
}
.custom-accordion .accordion-button::after {
  color: white !important; /* Make the toggle icon white */
  filter: invert(1); /* Invert the color to make it white */
}

.custom-accordion .accordion-body {
  color: white !important; /* Ensure the body text is white */
}

.container.fs-1.text-center,
.container .text-start.text-sm-center.text-md-center.text-lg-center.text-xl-center.text-xxl-center.btn-group {
    margin-top: 0;
}

.container.text-center > div:first-child {
  margin-bottom: 0;
}

/* By default, show the static header and hide the dynamic one */
.static-header {
  display: none;
}
.dynamic-header {
  display: block;
}

.glow-on-hover {
  border: none;
  outline: none;
  color: #fff;
  cursor: pointer;
  position: relative;
  z-index: 0;
  border-radius: 0px;
  padding: 0px 0px; /* Added some padding for better visuals */
}


@keyframes glowing {
  0% { background-position: 0 0; }
  50% { background-position: 400% 0; }
  100% { background-position: 0 0; }
}

#loadingEffect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: none;  
  z-index: 1000;
  pointer-events: none; 
}

.textarea-container {
  position: relative;
}
.centered-button {
  position: absolute;
  top: 55%; /* Lowered the button within the textarea */
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Place the button above the textarea */
}

.btn.paste-text-btn {
  border-color: white; 
  border-width: 2px; /* Increased border thickness */
  color: white; 
  padding: 5px 10px; 
  font-size: 0.8rem; 
  /* font-weight: bold; Made the text bold */
  border-radius: 12px; /* Curvy borders */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
}

.btn.paste-text-btn:hover {
  background-color: white; /* Background turns white on hover */
  color: black; /* Text turns black on hover */
}

.btn.paste-text-btn .clipboard {
  stroke: white;
  transform: scale(0.8);
}

.btn.paste-text-btn:hover .clipboard {
  stroke: black; /* SVG turns black on hover */
}

.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 0.3; /* Firefox */
  color: white;
}

.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  opacity: 0.3;
  color: white;
}

.form-control::-ms-input-placeholder { /* Microsoft Edge */
  opacity: 0.3;
  color: white;
}


/* Global Toolbar Style */
#toolbar, #response-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Distribute space between items */
  border: 1px solid white;
}

/* Quill Editor Styles */
#editor .ql-editor, #response-editor .ql-editor {
  background-color: transparent;
  color: white;
}
.ql-toolbar {
  border: 1px solid #ccc;
  border-bottom: none;
  border-radius: 10px 10px 10px 10px;
  display: flex;
  justify-content: flex-start; /* Align items to the left */
}

.ql-container {
  border: 1px solid #ccc;
  border-radius: 10px 10px 10px 10px;
}

/* Toolbar Button and Select Styles */
#toolbar button, #toolbar select,
#response-toolbar button, #response-toolbar select {
  color: white;
  background-color: transparent;
  border: none; /* Remove individual borders */
}

/* White SVG icons in the toolbar */
#toolbar .ql-stroke, #response-toolbar .ql-stroke {
  stroke: white !important;
}

#toolbar .ql-fill, #toolbar .ql-stroke.ql-fill,
#response-toolbar .ql-fill, #response-toolbar .ql-stroke.ql-fill {
  fill: white !important;
}

/* White color for the dropdown arrows in the toolbar */
#toolbar .ql-picker .ql-picker-label::before, #toolbar .ql-picker .ql-picker-item::before,
#response-toolbar .ql-picker .ql-picker-label::before, #response-toolbar .ql-picker .ql-picker-item::before {
  color: white;
}

/* Custom "Paraphrase" Button Style */
#paraphrase-btn, #response-toolbar #paraphrase-btn, #extend-btn {
  background-color: transparent; 
  color: white;
  /* margin-left: auto; Push the button to the right side */
  transition: color 0.3s; /* Smooth transition for the color change */
  white-space: nowrap; /* Prevents the text from wrapping */
  flex-shrink: 0; /* Prevents the button from shrinking */
  overflow: visible; /* Ensures that content is not cut off */
  min-width: 100px; /* Set a minimum width */
  z-index: 2; /* Ensure it's above other toolbar items */
  margin-top: 0;      /* Reset top margin */
  margin-bottom: 0;   /* Reset bottom margin */
  padding: 0px 8px;   /* Adjust padding to align with other buttons. Modify as necessary. */
}

/* Hover Effect for "Paraphrase" Button */
#paraphrase-btn:hover, #response-toolbar #paraphrase-btn:hover {
  color: #007BFF;
  background-color: transparent !important; /* Ensure the background remains transparent on hover */
}

/* Dropdown background and text color */
#toolbar .ql-picker-options, 
#response-toolbar .ql-picker-options {
    background-color: black; 
}

#toolbar .ql-picker-label, 
#toolbar .ql-picker-item, 
#response-toolbar .ql-picker-label, 
#response-toolbar .ql-picker-item {
    color: white;
}

/* Hover effect for dropdown options */
#toolbar .ql-picker-item:hover, 
#response-toolbar .ql-picker-item:hover {
    background-color: #333; /* Slightly lighter shade of black for hover */
    color: white;
}

/* Set the height for the Quill text areas */
#editor, #response-editor {
  height: auto;
  overflow-y: auto; /* Allow scrolling if content exceeds the height */
}

#editor .ql-editor, #response-editor .ql-editor {
  font-size: 1.3em;  /* This value sets the font to be "large". Adjust as necessary. */
}

.spinner-container {
  display: none;  /* Hide by default */
  align-items: center;  /* Vertically center the children */
  justify-content: center;  /* Horizontally center the children */
  gap: 10px;  /* Gap between spinner and text */
  margin-top: 20px;
}

.spinner-text {
  color: white;  /* Make the text white */
}

/* Default style (for larger screens) */
.centered-content {
  max-width: 70%;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Override for phones (typically screens less than 768px wide) */
@media (max-width: 767px) {
  .centered-content {
      max-width: 95%;
  }
}

.ql-undo:before {
  content: url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF'><polygon points='6 10 4 12 2 10 6 10' /><path d='M8.09,13.91A6,6,0,0,1,3.18,9L3.1,6A1.23,1.23,0,0,1,2,6a1,1,0,0,1,0-2h4V9a1,1,0,0,0,1,1,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.42L6.83,5H11a1,1,0,0,1,0,2H8.22A6.12,6.12,0,0,1,9,7a6,6,0,0,1-.22,2A6,6,0,0,1,8.09,13.91Z' /></svg>");
}

.ql-redo:before {
  content: url("data:image/svg+xml;utf8,<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFF'><polygon points='12 10 14 12 16 10 12 10' /><path d='M9.91,13.91A6,6,0,0,0,14.82,9l.08-3A1.23,1.23,0,0,0,16,6a1,1,0,0,0,0-2H12V9a1,1,0,0,1-1,1,1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42l1.88-1.88H7a1,1,0,0,0,0,2H9.22A6.12,6.12,0,0,0,8,7a6,6,0,0,0,.22,2A6,6,0,0,0,9.91,13.91Z' /></svg>");
}

#copyToClipboardBtn:active {
  background-color: #0070d8; /* Slightly different blue for active state */
  border-color: #0056b3; /* Slightly darker blue for active border */
}

#copyToClipboardBtn:disabled {
  background-color: #c0c0c0; /* Greyed out background */
  border-color: #a0a0a0; /* Greyed out border */
  cursor: not-allowed; /* Show a 'not-allowed' cursor */
}

.bg-blue-black {
  background-color: #050547; /* This is a dark bluish/black color */
}

/* .prism-bg {
  background: linear-gradient(to right, #c81f57, #ee269e);
} */

@keyframes soft-glow {
  0%, 100% {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.9);
  }
}

.prism-bg {
  animation: soft-glow 2s ease-in-out infinite;
  background: linear-gradient(to right, #c81f57, #ee269e);
  /* Other styles for padding, border-radius, etc. */
}

.note-update {
  color: #ff5963
}

.footer-update {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    white-space: nowrap; /* Prevents wrapping on larger screens */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 60%;
    border-radius: 15px;
    border-top: var(--bs-border-width) var(--bs-border-style) #7f57f7;
    background: linear-gradient(to top, #131217, #222335);
}

@media (max-width: 768px) {
    .footer-update {
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        white-space: normal; /* Let the text wrap on smaller screens */
        width: 100%;/* Ensure it takes full width */
    }
    
    .footer-update span, .footer-update a {
        text-align: center; /* Align text to the center */
    }
}

.note-update {
    display: inline-block;
    font-size: 1rem;
    padding-right: 10px;
}

.footer-update a {
    text-decoration: underline;
}


.glow-on-hover {
  position: relative;
}

#copyButton {
  /* Additional styling as needed */
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
}


@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.card-content h5 {
  margin: 0;
}

#context-section .input-group .form-control {
  height: 300px; /* Increase the height */
  width: 80%;
}

#context-section {
  display: none;
  text-align: center;
  color: white; /* Adjust if needed */
}

.context-textarea {
  height: 150px; /* Initial height, can be adjusted */
  resize: none; /* Prevent manual resizing */
  margin: auto; /* Center the textarea */
  display: block; /* Ensure it's a block element */
  width: 80%; /* Set width to a percentage for responsiveness */
  /* max-width: 600px; */
}

#continue-button {
  margin-top: 0px; /* Space between button and textarea */
}

.clear-text {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  color: white;
  background-color: black; /* Adjust if necessary */
  padding: 0 5px;
  border-radius: 50%;
  display: none; /* Initially hidden */
}



/* 
Google Sign In */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: #131314;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #e3e3e3;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 12px;
  position: relative;
  text-align: center;
  -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  max-width: 400px;
  min-width: min-content;
  border-color: #8e918f;
  
}

@media (min-width: 1000px) {
  .gsi-material-button {
    margin-left: 10px;
  }
}

.gsi-material-button .gsi-material-button-icon {
  height: 20px;
  margin-right: 12px;
  min-width: 20px;
  width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  -webkit-align-items: center;
  align-items: center;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
  -webkit-flex-grow: 1;
  flex-grow: 1;
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
  -webkit-transition: opacity .218s;
  transition: opacity .218s;
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.gsi-material-button:disabled {
  cursor: default;
  background-color: #13131461;
  border-color: #8e918f1f;
}

.gsi-material-button:disabled .gsi-material-button-state {
  background-color: #e3e3e31f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
  opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
  opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  background-color: white;
  opacity: 12%;
}

.gsi-material-button:not(:disabled):hover {
  -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  background-color: white;
  opacity: 8%;
}

@media (max-width: 700px) {
    .style-group {
        overflow-x: auto;
        scrollbar-width: 0.1px; /* Decreased thickness for Firefox */
        scrollbar-color: white transparent;
    }

    /* For Webkit browsers like Chrome and Safari */
    .style-group::-webkit-scrollbar {
        height: 0.1px; /* Decreased thickness for Webkit browsers */
    }

    .style-group::-webkit-scrollbar-thumb {
        background: white;
    }
}
.btn-pricing {
  border-radius: 15px;
  background-color: #000000;
  padding: 9px 15px;
  border-style: none;
  display: flex;
  align-items: center; /* Align icon and text vertically */
  justify-content: space-between;
}

.btn-pricing svg {
  margin-right: 5px; /* Adds space between icon and text */
}

.btn-pricing a {
  color: #ffffff; /* Ensure the text is white for visibility on black background */
  text-decoration: none; /* Remove underline */
  font-size: 16px; /* Adjust text size as needed */
}

.btn-pricing:hover {
  background: linear-gradient(135deg, #6f26f7 0%, #a07ef0 100%); /* Change background color on hover */
  transition: background-color 0.3s ease-in-out;
}
.btn-pricing:checked {
  background: linear-gradient(135deg, #6f26f7 0%, #a07ef0 100%); /* Change background color on hover */
  transition: background-color 0.3s ease-in-out;
}

.navbar-nav {
  margin: 0 auto; /* Centers the <ul> horizontally */
  display: flex;
  justify-content: center; /* Aligns items in the center horizontally */
  align-items: center; /* Aligns items vertically in the center */
}

.sign-info {
  display: flex;

}

.heading-text {
  font-size: 64px;
}


@media (max-width: 820px) {
  .btn-pricing {
      flex-wrap: wrap; /* Allow wrapping on smaller screens */
      white-space: normal; /* Let the text wrap on smaller screens */
  }

  .sign-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2%;
  }

  .heading-text {
    font-size: 50px;
  }

  .hero-content h1 {
    font-size: 50px;
  }
}

@media (max-width: 375px) {
  
  .heading-text {
    font-size: 45px;
  }
  .hero-content h1 {
    font-size: 45px;
  }

 
}


@media (min-width: 1000px) {
  .gsi-material-button {
    margin-left: 10px;
  }
}


.collapse.navbar-collapse {
  flex-grow: 1; /* Ensures this div expands and takes up available space */
}

.logout-outline-secondary {
  background-image: linear-gradient(45deg, #A083F7, #561EFF); /* Purple to blue gradient */
  border: none;
  color: white;
  padding: 9px 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}