/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

.modal-survey {
  display: flex;
  background: #b4b4b4;
  padding-top: 50px;
  padding-bottom: 50px;
  max-width: 100vw;
  justify-content: center;
}

.image-1 {
  width: 500px;    /* 원하는 픽셀 값으로 조정 */
  /* 또는 width: 50%; */    /* 부모 요소 대비 50% 크기 */
  height: auto;    /* 비율을 유지하며 높이 자동 조정 */
  display: block;  /* inline img라면 block으로 바꿔주는 게 margin centering 등에 편리 */
  margin-right: 100px;
}

.image-2 {
  width: 90vw;    /* 원하는 픽셀 값으로 조정 */
  /* 또는 width: 50%; */    /* 부모 요소 대비 50% 크기 */
  height: auto;    /* 비율을 유지하며 높이 자동 조정 */
  display: block;  /* inline img라면 block으로 바꿔주는 게 margin centering 등에 편리 */
  border-radius: 120px;
  margin-top: 50px;
  margin-bottom: 30px;
}

.image-3 {
  width: 16vw;    /* 원하는 픽셀 값으로 조정 */
  /* 또는 width: 50%; */    /* 부모 요소 대비 50% 크기 */
  height: auto;    /* 비율을 유지하며 높이 자동 조정 */
  display: block;  /* inline img라면 block으로 바꿔주는 게 margin centering 등에 편리 */
  border-radius: 22px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.image-4 {
  width: 70vw;    
  height: auto;
  display: block;  /* inline img라면 block으로 바꿔주는 게 margin centering 등에 편리 */
  border-radius: 30px;
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.image-5 {
  width: 97%;    
  height: auto;
  display: block;  /* inline img라면 block으로 바꿔주는 게 margin centering 등에 편리 */
  border-radius: 30px;
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 30px;
  box-shadow: 0 7px 11px rgba(0, 0, 0, 0.5);
}

.image-6 {
  width: 100%;    
  height: auto;
  display: block;  /* inline img라면 block으로 바꿔주는 게 margin centering 등에 편리 */
  border-radius: 30px;
}

/* Container */
.container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.top-container {
  width: 100%;
  height: 25px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 1rem;
  background-color: #2e54ff;
  color: #f9fafb;
  font-size: 18px;
  font-weight: 500;
}

/* Navbar */
.navbar {
  position: sticky;
  top: 0;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}
.logo {
  font-size: 1.25rem;
  font-weight: bold;
  color: #1f2937;
}

/* Desktop Menu */
.nav-links {
  display: none;
  gap: 2rem;
}
.nav-links a {
  color: #6b7280;
  text-decoration: none;
  transition: color 0.3s;
  cursor: pointer;
}
.nav-links a:hover {
  color: #1f2937;
}

/* Mobile Toggle */
.mobile-toggle {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: #6b7280;
  cursor: pointer;
}

/* Mobile Menu */
.mobile-menu {
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: 1rem;
}
.mobile-menu.hidden {
  display: none;
}
.mobile-menu a {
  display: block;
  padding: 0.5rem 0;
  color: #6b7280;
  text-decoration: none;
}
.mobile-menu a:hover {
  color: #1f2937;
}

.content-2 {
  padding-top: 50px;
  padding-bottom: 50px;
  max-width: 100vw;
  text-align: center;
  font-size: 2.25rem;
}

.content-3 {
  padding-top: 50px;
  padding-bottom: 50px;
  max-width: 100vw;
  text-align: center;
  font-size: 2.25rem;
}

.content-4 {
  padding-top: 5px;
  padding-bottom: 5px;
  max-width: 100vw;
  text-align: center;
}

/* Sections */
.section {
  min-height: 100vh;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-1 { background: #ffffff; }
.section-2 { background: #ebebeb; color: #000000; }
.section-3 { background: #ffffff; }
.section-4 { background: #1f2937; color: #fff; }
.section-5 { background: rgb(25, 0, 255); color: rgb(209, 209, 209)}

/* Typography */
.section-1 h1,
.section-2 h2,
.section-3 h2,
.section-4 h2 {
  font-weight: bold;
  margin-bottom: 1.5rem;
}
.section-1 h1 { font-size: 2.25rem; }
.section-2 h2 ,
.section-3 h2,
.section-4 h2 { font-size: 2rem; }

.section-1 p,
.section-2 p,
.section-3 p,
.section-4 p {
  color: #3b414b;
  margin-bottom: 2rem;
}

/* Button */
.cta {
  background: #2563eb;
  color: #fff;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}
.cta:hover {
  background: #1d4ed8;
}

/* Features Grid */
.features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
}
.feature {
  background: #f0f0f0;
  color: #000000;
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: left;
}
.feature .icon {
  font-size: 3rem;
  color: #2563eb;
  margin-bottom: 1rem;
}
.feature h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.prompt-example {
  background: white;
  border-radius: 10px;
  box-shadow: 0 7px 11px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

/* Testimonial */
blockquote {
  font-style: italic;
  color: #374151;
  margin-bottom: 1rem;
}
.testimonial {
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonial .avatar {
  width: 3rem;
  height: 3rem;
  background: #d1d5db;
  border-radius: 50%;
  margin-right: 1rem;
}
.testimonial .name {
  font-weight: 600;
  color: #1f2937;
}
.testimonial .title {
  color: #6b7280;
}

/* Contact & Social Grid */
.grid {
  display: grid;
  gap: 2rem;
  margin-top: 3rem;
}
.contact p,
.social a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.social .icons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* From Uiverse.io by zanina-yassine */ 
.form_container {
  width: 80vw;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 50px 40px 20px 40px;
  background-color: #ffffff;
  box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
    0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
  font-family: "Inter", sans-serif;
}

.logo_container {
  box-sizing: border-box;
  width: 80px;
  background: linear-gradient(180deg, rgba(248, 248, 248, 0) 50%, #F8F8F888 100%);
  border: 1px solid #F7F7F8;
  filter: drop-shadow(0px 0.5px 0.5px #EFEFEF) drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  border-radius: 11px;
}

.title_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #212121;
}

.subtitle {
  font-size: 0.725rem;
  max-width: 80%;
  text-align: center;
  line-height: 1.1rem;
  color: #8B8E98
}

.input_container {
  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.checkbox-container {
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 5px;
}

.input_label {
  font-size: 0.75rem;
  color: #8B8E98;
  font-weight: 600;
}

.input_field {
  width: auto;
  height: 40px;
  padding: 0 0 0 10px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field_large {
  width: auto;
  height: 150px;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.input_field_checkbox {
  width: auto;
  height: 20px;
  padding: 0 0 0 10px;
  outline: none;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);
  transform: scale(2);
  transform-origin: center;
  margin: 0.25em;
}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #242424;
  background-color: transparent;
}

.terms-of-use {
  width: auto;
  height: 200px;
  overflow: scroll;
  padding: 10px 10px 10px 10px;
  border-radius: 7px;
  outline: none;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  font-size: small;
}

.sign-in_btn {
  width: 100%;
  height: 40px;
  border: 0;
  background: #115DFC;
  border-radius: 7px;
  outline: none;
  color: #ffffff;
  cursor: pointer;
}

.submitted {
  width: 100%;
  height: 40px;
  border: 1px solid #115DFC;  
  background: #ffffff;
  border-radius: 7px;
  outline: none;
  color: #000000;
}

.sign-in_ggl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  border-radius: 7px;
  outline: none;
  color: #242424;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));
  cursor: pointer;
}

.sign-in_apl {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #212121;
  border-radius: 7px;
  outline: none;
  color: #ffffff;
  border: 1px solid #e5e5e5;
  filter: drop-shadow(0px 1px 0px #efefef)
    drop-shadow(0px 1px 0.5px rgba(0, 0, 0, 0.5));
  cursor: pointer;
}

.note {
  font-size: 0.75rem;
  color: #8B8E98;
  text-decoration: underline;
}


/* Responsive Breakpoints */
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .mobile-toggle { display: none; }
  .mobile-menu { display: none !important; }

  .section-1 h1 { font-size: 3.75rem; }
  .section-2 h2,
  .section-3 h2,
  .section-4 h2 { font-size: 3rem; }
  .section-1 p,
  .section-2 p,
  .section-3 p { font-size: 1.25rem; }
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}