html, body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x: hidden;
}


.container{
  width:80%;
  margin:auto;
  overflow:hidden;
}

ul{
  margin:0;
  padding: 0;
}

header {
background-color: #3e4c5e;
max-width:100%;
color: #ffffff;
padding: 25px 25px;
min-height: 25px;
border-bottom: #52b788 3px solid;
display: block;
text-shadow:2px 2px 10px rgba(0,0,0,0.8);
text-align:center;
}

header #branding,
header .logo {
float: left;
margin: 0;
}

header #branding h1,
header .logo {
margin: 0;
font-size: 24px;
color: #ffffff;
font-weight: bold;
letter-spacing: 0.5px;
line-height: 30px;
margin-top:10px;
}

header nav,
header .nav-links {
float: right;
margin: 0;
padding: 0;
}

header nav ul,
header .nav-links {
list-style: none;
padding: 0;
margin: 0;
}

header nav li,
header .nav-links a {
display: inline-block;
margin-left: 35px;
white-space: nowrap !important;
width: auto !important;
max-width: none !important;
}

header a,
header .nav-links a {
color: #b3c1d1;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.5px;
line-height: 30px;
transition: color 0.2s ease;
}

header .highlight,
header .current a,
header a.active,
header .nav-links a.active {
color: #52b788 !important;
font-weight: bold !important;
}

header a:hover,
header .nav-links a:hover {
color: #ffffff !important;
font-weight: bold !important;
}

header::after {
content: "";
display: table;
clear: both;
}

#showcase{
  min-height:600px;
  width:100%;
  margin:0;
  background-image: url("/static/images/pages/showcase.jpg.jpeg");
  background-size:cover;
  background-position: center;
  text align:center;
}

#showcase h1{
  margin-top:300px;
  font-size:50px;
  margin-bottom:10px;
  text-align:center;
  color:#e0f7fa;
  text-shadow:2px 2px 10px rgba(0,0,0,0.8);
}

#showcase p{
  font-size:20px;
  text-align:center;
  color:#ffffff;
  margin-bottom:200px;
}

#showcase::after {
content: "";
display: table;
clear: both;
}

.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}

#details, #upload {
padding: 80px 0;
background-color: #f8fafc;
}

#upload {
background-color: #ffffff;
}

.upload-zone,
label[for="photoInput"] {
position: relative;
display: block;
width: 100%;
cursor: pointer;
overflow: hidden;
}

#upload form input[type="file"],
#photoInput {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

opacity: 0;
cursor: pointer;
z-index: 10;
}

#upload form:hover {
border-color: #52b788;
background-color: #f0fdf4;
transition: background-color 0.2s, border-color 0.2s;
}

#details h1, #upload h2, .chat-header, .facts-section h2 {
color: #1a2a3a;
font-size: 2rem;
text-align: center;
margin-bottom: 35px;
font-weight: 700;
}

form{
  max-width: 600px;
margin: 0 auto;
background: #ffffff;
padding: 40px;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
border: 1px solid #e2e8f0;
}

#upload form {
background: #f8fafc;
border: 2px dashed #cbd5e1;
text-align: center;
}

label {
display: block;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #475569;
margin-bottom: 8px;
margin-top: 20px;
}

label:first-of-type {
margin-top: 0;
}

input[type="text"],
input[type="age"],
input[type="email"],
select,
.chat-input {
width: 100%;
padding: 14px 16px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background-color: #ffffff;
font-size: 1rem;
color: #0f172a;
margin-bottom: 5px;
transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, select:focus, .chat-input:focus {
outline: none;
border-color: #52b788;
box-shadow: 0 0 0 3px rgba(82, 183, 136, 0.15);
}

.button_1, .button_2, .chat-send-btn {
display: inline-block;
width: 100%;
background-color: #52b788;
color: white;
font-size: 1rem;
font-weight: 600;
padding: 14px;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 25px;
transition: background-color 0.2s ease;
}

.button_1:hover, .button_2:hover, .chat-send-btn:hover {
background-color: #40916c;
}

.upload-zone {
padding: 30px 10px;
}
.upload-icon {
font-size: 2.5rem;
display: block;
margin-bottom: 10px;
color: #52b788;
}

.chat-card {
max-width: 700px;
margin: 80px auto;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
overflow: hidden;
}

.chat-header {
background-color: #1a2a3a;
color: white;
margin: 0;
padding: 20px;
font-size: 1.25rem;
}

.chat-window {
padding: 30px;
background-color: #f8fafc;
min-height: 150px;
}

.system-msg {
background-color: #eff6ff;
border-left: 4px solid #3b82f6;
padding: 15px 20px;
border-radius: 4px;
color: #1e3a8a;
font-size: 0.95rem;
margin-bottom: 20px;
line-height: 1.6;
}

.chat-subtext {
color: #64748b;
font-size: 0.85rem;
margin-bottom: 15px;
}

.chat-input-form {
display: flex;
gap: 10px;
padding: 20px 30px;
background: white;
border-top: 1px solid #e2e8f0;
}

.chat-input {
margin-bottom: 0;
}

.chat-send-btn {
width: auto;
margin-top: 0;
padding: 0 30px;
white-space: nowrap;
}

.inner-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
text-align:center;
}


.anxiety-calm-banner {
background:
radial-gradient(circle at 20% 20%, rgba(17, 94, 89, 0.4) 0%, transparent 40%),
radial-gradient(circle at 80% 80%, rgba(30, 58, 138, 0.4) 0%, transparent 40%),
linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #115e59 100%);
padding: 90px 0;
text-align: center;
}

.coping-strategies {
background-color: #f4f7f6; /* Soft, calming background color */
padding: 60px 20px;
font-family: system-ui, -apple-system, sans-serif;
color: #333;
}

.coping-strategies .inner-container {
max-width: 1100px;
margin: 0 auto;
}

.coping-strategies .split-layout {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: start;
}

.coping-strategies .split-left h3 {
font-size: 2rem;
color: #1a4d4a;
margin-top: 0;
margin-bottom: 15px;
}

.coping-strategies .split-left p {
font-size: 1.1rem;
line-height: 1.6;
color: #555;
}

.coping-strategies .split-right {
display: flex;
flex-direction: column;
gap: 20px;
}

.coping-strategies .strategy-list-item {
background-color: #ffffff;
padding: 20px;
border-left: 4px solid #1a4d4a; /* Accent bar on the left */
border-radius: 0 8px 8px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.coping-strategies .strategy-list-item p {
margin: 0;
line-height: 1.5;
}

.coping-strategies .strategy-list-item strong {
color: #1a4d4a;
display: block;
margin-bottom: 5px;
font-size: 1.1rem;
}

@media (min-width: 768px) {
.coping-strategies .split-layout {
grid-template-columns: 1fr 1.2fr;
}

.calm-card {
background: rgba(255, 255, 255, 0.98);
padding: 50px 40px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
max-width: 850px;
margin: 0 auto;
border-bottom: 5px solid #0d9488;
text-align: center;
}

.calm-badge {
background-color: #ccfbf1;
color: #115e59;
display: inline-block;
padding: 8px 20px;
border-radius: 30px;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 25px;
box-shadow: 0 4px 10px rgba(17, 94, 89, 0.1);
}

.calm-card h2 {
font-size: 2.6rem;
color: #0f172a;
margin-bottom: 20px;
font-weight: 800;
text-align: center;
}

.calm-main-text {
font-size: 1.2rem;
color: #334155;
line-height: 1.8;
text-align: center;
}

.calm-main-text strong {
color: #b91c1c;
}

.steps-section {
padding: 80px 0;
}

.calm-steps-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-bottom: 50px;
}

.step-box {
background: #ffffff;
padding: 40px 30px;
border-radius: 16px;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
text-align: center;
}

.step-box:hover {
transform: translateY(-8px);
box-shadow: 0 20px 35px rgba(15, 23, 42, 0.08);
}

.step-box h5 {
font-size: 1.3rem;
margin-bottom: 15px;
font-weight: 700;
text-align: center;
}

.step-box p {
text-align: center;
}

.threat-style {
border-top: 5px solid #ef4444;
background: linear-gradient(to bottom, #fff5f5, #ffffff 40%);
}
.threat-style h5 { color: #991b1b; }

.safety-style {
border-top: 5px solid #10b981;
background: linear-gradient(to bottom, #f0fdf4, #ffffff 40%);
}
.safety-style h5 { color: #166534; }

.app-style {
border-top: 5px solid #3b82f6;
background: linear-gradient(to bottom, #eff6ff, #ffffff 40%);
}
.app-style h5 { color: #1e40af; }

.reminder-bar {
background-color: #fff9db;
border-left: 6px solid #eab308;
padding: 25px 30px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(234, 179, 8, 0.05);
color: #713f12;
font-size: 1.05rem;
text-align: center;
}

.grounding-section {
background-color: #1a2a3a;
color: white;
padding: 60px 0;
text-align: center;
}

.grounding-section h3 { font-size: 1.8rem; margin-bottom: 10px; text-align: center; }
.grounding-section p { color: #94a3b8; margin-bottom: 30px; text-align: center; }

.grounding-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
}

.ground-item {
background-color: rgba(255,255,255,0.05);
padding: 15px 25px;
border-radius: 8px;
border: 1px solid rgba(255,255,255,0.1);
font-size: 0.95rem;
text-align: center;
}

.ground-item span {
display: block;
font-size: 1.8rem;
font-weight: bold;
color: #52b788;
margin-bottom: 5px;
text-align: center;
}

.comfort-features {
padding: 90px 0;
background-color: #ffffff;
background-image: radial-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px);
background-size: 16px 16px;
text-align: center;
}

.comfort-features h3 {
font-size: 2.2rem;
color: #0f172a;
font-weight: 800;
text-align: center;
}

.section-subtitle {
color: #64748b;
font-size: 1.1rem;
margin-bottom: 50px;
text-align: center;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}

.feature-card {
background-color: rgba(248, 250, 252, 0.9);
padding: 35px 30px;
border-radius: 16px;
border: 1px solid #e2e8f0;
backdrop-filter: blur(2px);
transition: all 0.3s ease;
text-align: center; /* Centers block texts */
}

.feature-card:hover {
transform: translateY(-5px);
background-color: #f0fdfa;
border-color: #99f6e4;
}

.feature-card h4 {
color: #115e59;
font-size: 1.3rem;
margin-bottom: 12px;
font-weight: 700;
text-align: center;
}

.feature-card p {
color: #475569;
font-size: 0.95rem;
text-align: center;
}

.faq-section {
padding: 80px 0;
background-color: #f1f5f9;
text-align: center;
}

.faq-section h3 {
margin-bottom: 50px;
font-size: 2.2rem;
color: #0f172a;
font-weight: 800;
text-align: center;
}

.faq-item {
background: #ffffff;
max-width: 850px;
margin: 0 auto 20px auto;
padding: 25px 30px;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02);
border-left: 5px solid #3b82f6;
text-align: center;
}

.faq-question {
font-weight: 700;
color: #1e3a8a;
font-size: 1.1rem;
margin-bottom: 10px;
text-align: center;
}

.faq-answer {
color: #475569;
font-size: 1rem;
line-height: 1.6;
text-align: center;
}



.facts-section {
  width:100%;
  max-width:50%;
  margin-right:10px;
  background-color: #ffffff;
  border-radius: 12px;
  border-color:#567C8D;
  border-style:dotted;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  padding: 30px;
  height:auto;
  float:right;
}

.facts-header {
  text-align: center;
  border-bottom: 2px solid #e0e7ff;
}

.facts-header h2 {
  color: #007bff;
  margin: 0 0 8px 0;
  font-size: 26px;
}

.facts-header p {
  color: #666666;
  margin: 0;
  font-size: 10px;
}

.facts-container {
  max-height:400px;
  overflow-y: auto;
  padding-right: 12px;
}

.facts-list {
  padding-left: 25px;
  margin: 0;
}

.facts-list li {
  font-size: 15px;
  line-height: 1.6;
  padding: 5px 15px;
  padding-left:20px;
  margin-bottom: 8px;
  background-color: #f8fafc;
  border-left: 4px solid #007bff;
  border-radius: 0 6px 6px 0;
  transition: background-color 0.2s ease;
}

.facts-list li:hover {
  background-color: #eef5ff;
}

.facts-container::-webkit-scrollbar {
  width: 8px;
}

.facts-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.facts-container::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 4px;
}


footer{
  width:100%;
  padding:40px
  margin-top:20px;
  background-color:black;
  text-align:center;
  color:#808080;
  display:flex;
  flex-direction:column;
  font-size:15px;
  font-weight:100;
  font-family:consolas;
}

.footer-container p b{
  color:#4d4d4d;
  font-size:17px;
  font-family:"Arial Black", gadget, sans-serif;
}

.footer-container small{
  font-size:16px;
}

.tips {
max-width: 900px;
margin: 60px auto;
padding: 0 20px;
text-align: center;
}

.tips h1 {
font-size: 2.6rem;
font-weight: 800;
color: #1a2a3a;
margin-bottom: 25px;
line-height: 1.3;
text-transform: uppercase;
}

.tips h2 {
font-size: 1.6rem;
color: #115e59;
margin-top: 50px;
margin-bottom: 30px;
font-weight: 700;
border-bottom: 2px solid #52b788;
padding-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.tips h3 {
font-size: 1.25rem;
color: #1e3a8a;
margin-top: 40px;
margin-bottom: 20px;
font-weight: 700;
background-color: #ccfbf1;
display: inline-block;
padding: 6px 22px;
border-radius: 20px;
border: 1px solid #99f6e4;
}

.tips h4 {
font-size: 1.15rem;
color: #b91c1c;
margin-top: 25px;
margin-bottom: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
}

.tips p {
font-size: 1.05rem;
color: #334155;
line-height: 1.8;
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.96) !important;
border: 1px solid #cbd5e1 !important;
padding: 25px 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02);
}

.tips b {
color: #115e59;
font-weight: 700;
}

.tips br {
display: block;
content: "";
margin-top: 15px;
}

.tips-layout-wrapper {
display: grid !important;
grid-template-columns: 200px 1fr 200px !important; /* Left: 200px | Center: Auto | Right: 200px */
gap: 40px !important; /* Forces strict separation between text and your images */
align-items: start !important;
max-width: 1450px !important;
margin: 50px auto !important;
padding: 0 30px !important;
box-sizing: border-box !important;
}

/* 2. THE CENTRAL TEXT BOX (.tips container from line 36) */
.tips {
grid-column: 2 !important; /* Forces the text box strictly into the middle column */
max-width: 800px !important; /* Keeps text box perfectly sized */
margin: 0 auto !important;
width: 100% !important;
box-sizing: border-box !important;
}

/* 3. IMAGE SIDEBAR CONTAINERS (Stops images from stacking horizontally or inside text) */
.gallery-column-left,
.gallery-column-right {
display: flex !important;
flex-direction: column !important; /* Forces all 13 images into a straight vertical column */
gap:250px !important; /* Spacing between each individual image */
width: 200px !important; /* Matches layout column width exactly */
flex-shrink: 0 !important;
box-sizing: border-box !important;
}

.gallery-column-left {
grid-column: 1 !important; /* Locks left 13 photos to the absolute left side */
}

.gallery-column-right {
grid-column: 3 !important; /* Locks right 13 photos to the absolute right side */
}

/* 4. FORCE IMAGES TO DISPLAY AT SOLID VISIBLE SIZES */
.gallery-column-left img,
.gallery-column-right img {
display: block !important;
width: 100% !important;
max-width: 200px !important;
height: auto !important;
min-height: 120px !important; /* Hard-forces space for the images so they don't collapse */
background-color: #eaeaea !important; /* Adds a clean placeholder background if paths stay broken */
border-radius: 8px !important;
object-fit: cover !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 5. RESPONSIVE LAYER (Stacks cleanly on tablets and mobile screens) */
@media (max-width: 1100px) {
.tips-layout-wrapper {
grid-template-columns: 1fr !important; /* Switches to single column layout on small devices */
gap: 50px !important;
}
.tips {
grid-column: 1 !important;
}
.gallery-column-left,
.gallery-column-right {
grid-column: 1 !important;
width: 100% !important;
flex-direction: row !important; /* Rows out the images horizontally on mobile views */
flex-wrap: wrap !important;
justify-content: center !important;
}
.gallery-column-left img,
.gallery-column-right img {
width: 100px !important;
min-height: 80px !important;
}
}

header {
    margin-bottom: 30px;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

header nav li {
    display: inline-block;
    margin-left: 35px;
}