@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap");
:root {
--footer-height: 40px;
/* Colors */
--color-primary-dark: #4a00e0;
--color-primary-light: #8e2de2;
--color-gradient-start: #e9ecfa;
--color-gradient-end: #f7faff;
--color-text-dark: #031530;
--color-text-light: #3556bf;
--color-background: #fff;
--color-background-alt: #f8f9fa;
--color-border-focus: #3973fa;
--color-footer-bg: #f8f9fa;
--color-footer-text: #8a8e9a;
--color-shadow: rgba(72, 0, 224, 0.16);
}
* {
box-sizing: border-box;
}

body {
margin: 0;
font-family: "Nunito", sans-serif;
font-size: 1rem;
background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
color: var(--color-text-dark);
transition: padding-left 0.3s;
padding-left: 0; 
}
a {
text-decoration: none;
color: inherit;
}
/* Header */

.container-lg{
max-width: 1430px;
padding-left: 0;
padding-right: 0;	
}
.qw-set-bg-bs{
background-color: var(--color-background);
box-shadow: 0 2px 8px rgba(60, 80, 170, 0.1);
z-index: 1101;
position: relative;	
}	
	
header.header {
position: relative;
top: 0;
left: 0;
right: 0;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: space-between;
/*background-color: var(--color-background);*/
padding: 0 1rem;
/*box-shadow: 0 2px 8px rgba(60, 80, 170, 0.1);*/
z-index: 1100;
}
.header-logo {
display: flex;
align-items: center;
font-weight: 700;
font-size: 1.25rem;
color: var(--color-primary-dark);
gap: 0.5rem;	
}
.header-logo i {
font-size: 2.5rem;
}
.header-logo span{
font-family: "Orbitron", sans-serif;
font-size: 24px;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
letter-spacing: 5px;
}
.header-toggle {
background: var(--color-primary-dark);
border: none;
color: #fff;
padding: 0.5rem 1rem;
border-radius: 10px;
cursor: pointer;
font-size: 1.2rem;
display: none;
}
.header-toggle:hover {
background: var(--color-primary-light);
}
/* Main content area */
.height-100.bg-light.mainslider {
margin-left: 0;
padding: 3.5rem 30px 100px 30px; /* accommodate header and footer */
min-height: calc(100vh - 3.5rem - var(--footer-height));
background: var(--color-background-alt);
overflow-y: auto;
position: relative;
transition: margin-left 0.3s;
}
.main-card {
max-width: 75%; /* keep fixed max width */
margin-left: auto;
margin-right: auto;
padding: 32px 24px;
background: var(--color-background);
border-radius: 24px;
box-shadow: 0 8px 32px rgba(60,80,170,0.14);
color: var(--color-text-dark);
position: relative;
/* To fix space reduction on zoom */
width: 100%; 
box-sizing: border-box;
}
/* Counter pills (desktop) */
.counter-strip {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-bottom: 32px;
}
/*.counter-pill {
display: inline-flex;
align-items: center;
padding: 10px 20px;
border-radius: 30px;
background: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
color: #fff;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 2px 8px var(--color-shadow);
cursor: pointer;
transition: transform 0.14s, box-shadow 0.18s;
}
.counter-pill:hover,
.counter-pill:focus {
background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary-light) 100%);
transform: scale(1.07);
box-shadow: 0 10px 30px rgba(72, 0, 224, 0.23);
outline: none;
}*/

.counter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* center content horizontally */
  width: fit-content;             /* fixed width */
  height: 35px;             /* fixed height */
  border-radius: 30px;
  background: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  box-shadow: 0 2px 8px var(--color-shadow);
  cursor: pointer;
  transition: transform 0.14s, box-shadow 0.18s;
  padding: 0 2%;
  box-sizing: border-box;  /* include padding inside width */
}



.counter-pill:hover,
.counter-pill:focus {
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary-light) 100%);
  transform: scale(1.07);
  box-shadow: 0 10px 30px rgba(72, 0, 224, 0.23);
  outline: none;
}


.icon {
font-size: 1.1em;
margin-right: 7px;
}
/* Counter table (mobile) - default hidden */
.counter-table {
display: none;
width: 100%;
border-collapse: collapse;
margin-bottom: 24px;
}
.counter-table th,
.counter-table td {
border: 1px solid #ddd;
padding: 12px 16px;
text-align: left;
font-weight: 600;
}
.counter-table th {
background: var(--color-primary-light);
color: #fff;
border-color: var(--color-primary-dark);
}
/* Text input */
.text-input {
width: 100%;
min-height: 200px;
resize: vertical;
border: 2px solid #e2e6fc;
border-radius: 14px;
background: #fcfdff;
font-size: 1.14rem;
padding: 18px;
margin-bottom: 22px;
transition: border-color 0.2s;
color: var(--color-text-dark);
}
.text-input:focus {
border-color: var(--color-border-focus);
outline: none;
}
/* Action bar */
.action-bar {
display: flex;
justify-content: flex-end;
gap: 18px;
margin-bottom: 11px;
flex-wrap: wrap;
}
.action-btn {
display: inline-flex;
align-items: center;
padding: 10px 24px;
margin: 8px 6px 8px 0;
border-radius: 30px;
background: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-primary-dark) 100%);
color: #fff;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 2px 8px var(--color-shadow);
cursor: pointer;
border: none;
outline: none;
transition: transform 0.14s, box-shadow 0.18s;
gap: 8px;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(72, 0, 224, 0.24);
}
.action-btn:active {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(72, 0, 224, 0.12);
}
/* Footer */
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: var(--color-footer-bg);
text-align: center;
padding: 10px;
border-top: 1px solid #ddd;
z-index: 101;
}
footer p {
margin: 0;
color: var(--color-footer-text);
font-size: 1em;
}
/* Responsive */
@media (max-width: 767px) {
body {
padding-left: 0;
}
.height-100.bg-light.mainslider {
margin-left: 0;
padding-top: 3.5rem;
padding-bottom: 300px;
}
/* Show counter table, hide pills */
.counter-strip {
display: none;
}
.counter-table {
display: table;
}
.main-card{
display: flex;
flex-direction: column;	
}	
.qw-order-1{
order: 1;
}
.qw-order-2{
order: 2;
}
.qw-order-3{
order: 3;
}
.text-input{
border-radius: 5px;
}
}
@media (max-width: 400px) {
.text-input {
min-height: 120px;
font-size: 1rem;
}
.action-bar {
justify-content: center;
gap: 12px;
}
.action-btn {
padding: 8px 16px;
font-size: 0.95rem;
}
}
/* Desktop nav list horizontal */
.nav-menu {
display: flex;
align-items: center;
}
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 24px;
}
.nav-link {
color: var(--color-primary-dark);
/*font-weight: 600;*/
text-decoration: none;
font-size: 1rem;
transition: color 0.3s;
}
.nav-link:hover,
.nav-link:focus {
color: var(--color-primary-light);
outline: none;
}

/* Mobile: hide nav by default, vertical layout */
@media (max-width: 767px) {
.nav-menu {
position: absolute;
top: 3.5rem;
left: 0;
right: 0;
background: var(--color-background);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
box-shadow: 0 4px 12px rgba(60, 80, 170, 0.2);
/*flex-direction: column;*/
}
.nav-list {
flex-direction: column;
gap: 0;
}
.nav-link {
display: block;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--color-primary-light);
}
.nav-link:last-child {
border-bottom: none;
}
/* Show nav when active */
.nav-menu.active {
max-height: 200px; /* enough to show two links */
}
/* Show the toggle button */
.header-toggle {
display: inline-flex;
}
}