/* ============================================================
   ABOUT PAGE — Neuro Solutions
   Professional layout for startups & founders
   File: /main/static/css/about.css
============================================================ */

/* ------------------- GLOBAL ------------------- */
:root {
  --green: #00c49a;
  --blue: #2563eb;
  --yellow: #fcb900;
  --dark: #0f172a;
  --gray: #64748b;
  --light: #f9fafb;
  --white: #ffffff;
}
/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--light);
  color: var(--text);
  overflow-x: hidden;
}

/* section {
  position: relative;
  padding: 90px 20px;
}

.container {
  max-width: 1200px;
  margin: auto;
} */
.navbar {
  background: rgba(225, 225, 225, 0.25);
}
/* ============================================================
   ABOUT PAGE — HERO SECTION (PREMIUM VERSION)
============================================================ */
.about-hero {
  position: relative;
  overflow: hidden;
  color: #0f172a;
  padding: 140px 20px 100px;
  text-align: center;
  background: linear-gradient(145deg, #f8fafc 0%, #eef2ff 40%, #dbeafe 100%);
}

/* Subtle gradient animation layer */
.about-hero-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 20%, rgba(193, 193, 193, 0.25), transparent 60%),
              radial-gradient(circle at 80% 70%, rgba(167, 167, 167, 0.25), transparent 60%);
  animation: bgFloat 20s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes bgFloat {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(25px);
  }
}

.about-hero-container {
  position: relative;
  z-index: 2;
  max-width: 1450px;
  margin: 0 auto;
}

.about-hero-text h1 {
  font-size: 3.3rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  line-height: 1.2;
  background: #1e3363;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.about-hero-text .abouthighlight{
color: red;
}
.about-hero-text p {
  font-size: 1.15rem;
  color: #475569;
  max-width: 1000px;
  margin: 0 auto 2.5rem;
  line-height: 1.8;
}

/* Button */
.hero-btn {
  display: inline-block;
  padding: 1rem 2.6rem;
  background: linear-gradient(90deg, #2563eb, #00c49a);
  color: #fff;
  font-weight: 600;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.35s ease;
  font-size: 1rem;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.25);
}
/* .hero-btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 196, 154, 0.35);
} */

/* Glow accents */
.about-hero::before,
.about-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  z-index: 1;
}
.about-hero::before {
  width: 280px;
  height: 280px;
  background: #a7f3d0;
  top: -90px;
  left: -100px;
}
.about-hero::after {
  width: 320px;
  height: 320px;
  background: #bfdbfe;
  bottom: -80px;
  right: -60px;
}

/* Decorative wave bottom */
.about-hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
}
.about-hero-wave svg {
  display: block;
  width: 100%;
  height: 130px;
}

/* Responsive */
@media (max-width: 992px) {
  .about-hero {
    padding: 140px 20px 160px;
  }
  .about-hero-text h1 {
    font-size: 2.6rem;
  }
  .about-hero-text p {
    font-size: 1.05rem;
  }
}
@media (max-width: 576px) {
  .about-hero-text h1 {
    font-size: 2.1rem;
  }
  .hero-btn {
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
  }
}


/* ============================================================
   OUR STORY SECTION (STYLISH MODERN LAYOUT)
============================================================ */
.about-story {
  position: relative;
  overflow: hidden;
  padding: 4rem 2rem;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafc 100%);
}

/* Layout Wrapper */
.story-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1300px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 3rem;
}

/* Text Section */
.story-text {
  flex: 1;
  min-width: 300px;
  max-width: 750px;
  z-index: 2;
}

.story-text h2 {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  background: linear-gradient(90deg, #00c49a, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.story-text p {
  color: #334155;
  font-size: 1.1rem;
  line-height: 1.9;
  margin-bottom: 1.6rem;
  text-align: justify;
}

.story-text strong {
  color: #0f172a;
  font-weight: 600;
}

/* Visual Section */
.story-visual {
  position: relative;
  flex: 1;
  min-width: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.story-visual .story-img {
  max-width: 100%;
  width: 700px;
  border-radius: 20px;
  /* box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1); */
  position: relative;
  z-index: 3;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* .story-visual .story-img:hover {
  transform: scale(1.03);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
} */

/* Decorative Gradient Background Behind Image */
.visual-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(0, 196, 154, 0.08), rgba(37, 99, 235, 0.08));
  border-radius: 50%;
  filter: blur(120px);
  z-index: 1;
}

/* Floating Glow Effects */
.floating-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.5;
  z-index: 0;
  animation: floatGlow 10s ease-in-out infinite alternate;
}

.glow-green {
  /* background: rgba(0, 196, 154, 0.25); */
  top: -50px;
  left: 40px;
}

.glow-blue {
  /* background: rgba(37, 99, 235, 0.25); */
  bottom: -40px;
  right: 60px;
}

@keyframes floatGlow {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-30px);
  }
}

/* Responsive */
@media (max-width: 992px) {
  .story-wrapper {
    flex-direction: column-reverse;
    text-align: center;
  }
  .story-text {
    max-width: 700px;
  }
  .story-text h2 {
    font-size: 2.4rem;
  }
  .story-visual .story-img {
    width: 360px;
  }
}
@media (max-width: 576px) {
  .about-story {
    padding: 6rem 1.5rem;
  }
  .story-text h2 {
    font-size: 2rem;
  }
  .story-text p {
    font-size: 1rem;
  }
}

/* ============================================================
   MISSION & VISION (SIDE-BY-SIDE MODERN DESIGN)
============================================================ */
.mission-vision {
  /* background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); */
  padding: 1.5rem 0.5rem 6rem;
  position: relative;
  overflow: hidden;
}

/* Light decorative glow in background */
.mission-vision::before,
.mission-vision::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(100px);
  z-index: 0;
}
/* .mission-vision::before {
  background: rgba(0, 196, 154, 0.15);
  top: -100px;
  left: -100px;
}
.mission-vision::after {
  background: rgba(37, 99, 235, 0.15);
  bottom: -100px;
  right: -100px;
} */

/* Header */
.mv-header {
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}
.mv-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00c49a, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0.3rem;
}
.mv-header p {
  color: #475569;
  font-size: 1.1rem;
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Content Layout */
.mv-content {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Cards */
.mv-card {
  flex: 1 1 45%;
  /* background: #ffffff; */
  border-radius: 18px;
  padding: 2.5rem 0.7rem;
  text-align: center;
  /* border: 1px solid rgba(226, 232, 240, 0.8); */
  /* box-shadow: 0 6px 24px rgba(15, 23, 42, 0.06); */
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* .mv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.1);
} */

/* Gradient corner glow */
.mv-card::before {
  content: "";
  position: absolute;
  top: -20px;
  right: -20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* background: linear-gradient(135deg, rgba(0, 196, 154, 0.2), rgba(37, 99, 235, 0.2)); */
  /* filter: blur(40px); */
  z-index: 0;
}

/* Icons */
.mv-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  /* background: linear-gradient(135deg, #00c49a, #14b8a6); */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  color: #14b8a6;
  /* box-shadow: 0 6px 20px rgba(0, 196, 154, 0.3); */
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}

.mv-icon.vision-icon {
  color: #3b82f6;
  /* box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3); */
}

.mv-card:hover .mv-icon {
  transform: scale(1.1) rotate(6deg);
}

/* Text */
.mv-card h3 {
  font-size: 1.6rem;
  color: #0f172a;
  margin-bottom: 1rem;
  font-weight: 700;
}

.mv-card p {
  color: #334155;
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 580px;
  margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 992px) {
  .mv-content {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
  .mv-card {
    flex: 1 1 100%;
    max-width: 650px;
  }
  .mv-header h2 {
    font-size: 2rem;
  }
}

.aboutproducts {
  /* background: linear-gradient(180deg, #f8fafc 0%, #eef3ff 100%); */
  text-align: center;
  padding: 2rem 2rem 5rem;
  position: relative;
  overflow: hidden;
}

/* Background Glow Effects */
.aboutproducts::before,
.aboutproducts::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  z-index: 0;
}
.aboutproducts::before {
  width: 300px;
  height: 300px;
  top: -100px;
  /* background: #00c49a; */
  left: -80px;

}
.aboutproducts::after {
  width: 350px;
  height: 350px;
  /* background: #2563eb; */
  right: -100px;

  bottom: -120px;
}

/* Header */
.aboutproducts-header {
  position: relative;
  z-index: 2;
  margin-bottom: 1rem;
}
.aboutproducts-header h2 {
  font-size: 2.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00c49a, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0rem;
}
.aboutproducts-header p {
  color: #475569;
  font-size: 1.15rem;
  line-height: 1.8;
  max-width: 1000px;
  margin: 2rem auto;
}

/* Divisions Layout */
.divisions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 2;
}

/* Division Card */
.division {
  /* background: rgba(255, 255, 255, 0.9); */
  border-radius: 18px;
  /* box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08); */
  padding: 3rem 2rem 2.5rem;
  text-align: center;
  backdrop-filter: blur(8px);
  transition: all 0.35s ease;
  /* border: 1px solid rgba(226, 232, 240, 0.5); */
  position: relative;
  overflow: hidden;
}
/* .division:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 45px rgba(15, 23, 42, 0.12);
} */

/* Animated Glow Border */
/* .division::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(0, 196, 154, 0.5), rgba(37, 99, 235, 0.5)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.division:hover::before {
  opacity: 1;
} */

/* Icons */
.icon-wrapper {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  transition: transform 0.4s ease;
}

/* Custom Colors per Division */
.connect .icon-wrapper {
  color: #10b981;
  /* box-shadow: 0 6px 18px rgba(34, 197, 94, 0.3); */
}
.build .icon-wrapper {
  color: #3b82f6;
  /* box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3); */
}
.scale .icon-wrapper {
  color: #f59e0b;
  /* box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3); */
}
.electronics .icon-wrapper {
  color: #ea4335;
  /* box-shadow: 0 6px 18px rgba(245, 158, 11, 0.3); */
}
.division:hover .icon-wrapper {
  transform: scale(1.1) rotate(8deg);
}

/* Text Styles */
.division h4 {
  font-size: 1.35rem;
  color: #0f172a;
  font-weight: 700;
  margin-bottom: 0.9rem;
}
.division p {
  color: #475569;
  font-size: 1rem;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .aboutproducts-header h2 {
    font-size: 2.2rem;
  }
  .division {
    padding: 2.5rem 1.8rem;
  }
}

/* ============================================================
   APPROACH SECTION (PREMIUM STYLE)
============================================================ */
.approach {
  padding: 3rem 2rem 7rem;
  /* background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%); */
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Background Glow Effects */
.approach::before,
.approach::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.25;
  z-index: 0;
}
/* Subtle gradient overlay */
/* .approach::before {
  width: 300px;
  height: 300px;
  top: -100px;
  background: #2563eb;
  right: -100px;

}
.approach::after {
  width: 350px;
  height: 350px;
  background: #00c49a;
  left: -80px;

  bottom: -120px;
} */


.approach h2 {
  font-size: 2.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, #00c49a, #2563eb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.approach .section-subtitle {
  margin: 0 auto 70px auto;
  color: #475569;
  font-size: 1.15rem;
  max-width: 900px;
  line-height: 1.8;
}


/* Grid Layout */
.approach-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  justify-content: center;
  position: relative;
  z-index: 1;
}

/* Step Card */
.step {
  /* background: rgba(255, 255, 255, 0.85); */
  padding: 1.5rem 2rem 1.5rem;
  /* border-radius: 20px; */
  /* box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08); */
  /* backdrop-filter: blur(10px); */
  text-align: center;
  position: relative;
  transition: all 0.35s ease;
  overflow: hidden;
  /* border: 1px solid rgba(226, 232, 240, 0.6); */
}

/* .step:hover {
  transform: translateY(-12px);
  box-shadow: 0 18px 45px rgba(37, 99, 235, 0.15);
} */

/* Step Number Watermark */
.step-number {
  position: absolute;
  top: 20px;
  left: 25px;
  font-size: 3.5rem;
  font-weight: 800;
  color: rgba(255, 86, 86, 0.1);
  z-index: 0;
}

/* Step Icon */
.step i {
  font-size: 2.6rem;
  background: #f74343;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 20px;
  z-index: 1;
  position: relative;
}

/* Step Title */
.step h3 {
  font-size: 1.3rem;
  color: #1e3a8a;
  font-weight: 600;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

/* Step Text */
.step p {
  font-size: 0.96rem;
  color: #555;
  position: relative;
  z-index: 1;
  line-height: 1.65;
}

/* Glow border effect */
/* .step::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(0,207,193,0.25), rgba(37,99,235,0.25)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.step:hover::after {
  opacity: 1;
} */

/* Responsive */
@media (max-width: 992px) {
  .approach-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
}
@media (max-width: 600px) {
  .approach-steps {
    grid-template-columns: 1fr;
  }
  .step {
    padding: 40px 25px;
  }
}

/* ============================================================
   CTA SECTION — PREMIUM STARTUP STYLE
============================================================ */
.cta-section {
  position: relative;
  padding: 140px 20px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* ✨ Animated Gradient Background */
.gradient-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, #2563eb, #00cfc1, #1e3a8a, #00b8a3);
  background-size: 600% 600%;
  animation: gradientFlow 15s ease infinite;
  z-index: -3;
  filter: brightness(1.05);
}

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

/* 🌌 Floating Particles Layer */
.particles::before, .particles::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(50px);
  animation: floatParticle 12s ease-in-out infinite alternate;
}

.particles::before {
  top: 15%;
  left: 10%;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.3);
}

.particles::after {
  bottom: 10%;
  right: 15%;
  width: 250px;
  height: 250px;
  background: rgba(0, 207, 193, 0.35);
  animation-delay: 4s;
}

@keyframes floatParticle {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-25px) scale(1.1); }
}

/* 🔥 Heading and Text */
.cta-section h2 {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  text-shadow: 0 4px 25px rgba(0,0,0,0.2);
}

.cta-section p {
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 1400px;
  margin: 0 auto 50px;
  opacity: 0.95;
}

/* 💎 CTA Button — glass + shine effect */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 16px 42px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Shine animation */
.cta-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 70%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: skewX(-25deg);
  transition: 0.5s;
}

.cta-btn:hover::before {
  left: 130%;
}

.cta-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-5px);
  box-shadow: 0 15px 45px rgba(0,0,0,0.25);
}

.cta-btn i {
  transition: transform 0.3s ease;
}

.cta-btn:hover i {
  transform: translateX(6px);
}

/* 📱 Responsive */
@media (max-width: 992px) {
  .cta-section h2 {
    font-size: 2.2rem;
  }
  .cta-section p {
    font-size: 1rem;
    margin-bottom: 40px;
  }
  .cta-btn {
    padding: 14px 35px;
    font-size: 0.95rem;
  }
}

/* ============================================================
   RESPONSIVE DESIGN
============================================================ */
@media (max-width: 992px) {
  .hero h1 {
    font-size: 2.5rem;
  }

  .mv-container {
    flex-direction: column;
  }

  .mv-box {
    flex: 1 1 100%;
  }
}

@media (max-width: 600px) {
  .hero {
    padding: 100px 20px 80px;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .about-story h2,
  .why-neuro h2,
  .aboutproducts h2,
  .approach h2 {
    font-size: 2rem;
  }

  section {
    padding: 70px 20px;
  }

  .cta-section h2 {
    font-size: 1.8rem;
  }
}
/* ==============================
   OVERVIEW — PREMIUM
   ============================== */
.homeoverview {
  position: relative;
  overflow: hidden;
  padding: 10rem 2rem;
  background: radial-gradient(circle at top left, #f8fafc 0%, #ffffff 100%);
}

/* Floating gradient glow background */
.homeoverview::before,
.homeoverview::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  filter: blur(180px);
  opacity: 0.5;
  z-index: 0;
  animation: floatGlow 14s ease-in-out infinite;
}
.homeoverview::before {
  top: -250px;
  left: -250px;
  background: radial-gradient(circle, rgba(0, 196, 154, 0.35), transparent 70%);
}
.homeoverview::after {
  bottom: -250px;
  right: -250px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.35), transparent 70%);
  animation-delay: 6s;
}
@keyframes floatGlow {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.1) translateY(-25px); }
}

/* Section Header */
.section-header {
  text-align: center;
  margin-bottom: 6rem;
  position: relative;
  z-index: 5;
}
.section-header h2 {
  font-size: 3rem;
  font-weight: 800;
  background: #202020;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  margin-bottom: 0.7rem;
}
.section-header p {
  color: #515151;
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
}

.note{
  color: #a5a5a5;
  font-size: 14px;
}