/* ====== Font Import (แยกตามน้ำหนัก) ====== */
@font-face {
  font-family: "Sukhumvit Set";
  src: url("/static/assets/SukhumvitSet-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("/static/assets/SukhumvitSet-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("/static/assets/SukhumvitSet-Text.ttf") format("truetype");
  font-weight: 400; /* regular */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("/static/assets/SukhumvitSet-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("/static/assets/SukhumvitSet-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sukhumvit Set";
  src: url("/static/assets/SukhumvitSet-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Base reset เบา ๆ ===== */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* ป้องกัน scrollbar แนวนอน เมื่อ previews เลยออกมานอกขอบ */
}

/* h1 ฟลูอิด: ย่อ-ขยายตามความกว้างจอ */
.heading-fluid {
  font-size: clamp(1.375rem, 1.2rem + 2.2vw, 2.25rem); /* ~22px → ~36px */
  line-height: 1.25;
  word-break: keep-all; /* ภาษาไทยไม่ตัดคำแปลกๆ */
}

/* จอใหญ่กว่าก็ขยับนิดหน่อย */
@media (min-width: 992px) {
  .heading-fluid {
    font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); /* ~32px → ~48px */
  }
}

/* ฺีButton Element */
/* --- 1. กำหนดตัวแปรสีหลัก --- */
:root {
  --custom-orange: #f98513;
  --custom-white: #ffffff;
}

.img-hover {
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.img-hover:hover {
  transform: translateY(-10px);
  opacity: 1;
}

@media (max-width: 1300px) {
  .img-hover {
    width: 100px;
    height: 135px;
  }
}

/* --- 2. สไตล์ของวงกลมไอคอน (ใช้ร่วมกัน) --- */
.btn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  /* เพิ่ม transition ให้การเปลี่ยนแปลงนุ่มนวล */
  transition: all 0.2s ease-in-out;
}
.btn-icon-circle i {
  transition: all 0.2s ease-in-out;
}

.icon-nudge {
  position: relative;
  top: 1px;
}

/* ============================================== */
/* === 🧡 ปุ่มที่ 1 (ส้มทึบ -> ขอบส้ม) === */
/* ============================================== */

/* -- 1.1) สไตล์ปกติ (Normal) -- */
.btn-custom-primary {
  background-color: var(--custom-orange);
  border: 2px solid var(--custom-orange); /* ใส่ขอบเตรียมไว้ */
  color: var(--custom-white);
  transition: all 0.2s ease-in-out;
}
.btn-custom-primary .btn-icon-circle {
  background-color: var(--custom-white);
}
.btn-custom-primary .btn-icon-circle i {
  color: var(--custom-orange);
}

/* -- 1.2) สไตล์เมื่อ Hover (สลับสี) -- */
.btn-custom-primary:hover,
.btn-custom-primary:focus {
  background-color: var(--custom-white); /* พื้นหลังเป็นขาว */
  color: var(--custom-orange); /* ตัวหนังสือเป็นส้ม */
}
.btn-custom-primary:hover .btn-icon-circle {
  background-color: var(--custom-orange); /* วงกลมเป็นส้ม */
}
.btn-custom-primary:hover .btn-icon-circle i {
  color: var(--custom-white); /* ไอคอนเป็นขาว */
}

/* ============================================== */
/* === 🤍 ปุ่มที่ 2 (ขอบขาว -> ส้มทึบ) === */
/* ============================================== */

/* -- 2.1) สไตล์ปกติ (Normal) -- */
.btn-custom-secondary {
  background-color: white;
  color: #3c3c3c;
  transition: all 0.2s ease-in-out;
}
.btn-custom-secondary .btn-icon-circle {
  background-color: var(--custom-orange);
}
.btn-custom-secondary .btn-icon-circle i {
  color: var(--custom-white);
}

/* -- 2.2) สไตล์เมื่อ Hover (สลับสี) -- */
.btn-custom-secondary:hover,
.btn-custom-secondary:focus {
  background-color: #cdc8c8; /* พื้นหลังเป็นส้ม */
  color: #3c3c3c;
}
.btn-custom-secondary:hover .btn-icon-circle {
  background-color: white; /* วงกลมเป็นขาว */
}
.btn-custom-secondary:hover .btn-icon-circle i {
  color: var(--custom-orange); /* ไอคอนเป็นส้ม */
}
.bg-footer {
  background-color: #111143;
}

/* ===== Namespace (กันชนระบบหลัก) ===== */
.gc-widget {
  font-family: "Sukhumvit Set", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans Thai", "Noto Sans", sans-serif;
  color: var(--bs-body-color);
  line-height: 1.5;
}

/* ===== HERO Section ===== */
.gc-hero {
  position: relative;
  display: block;
  width: 100%;
  /* ต้องให้มองเห็นการ “ล้น” ของรูป phone */
  overflow: visible;
  z-index: 2; /* เพื่อวางทับ section ถัดไป (แล้วไปตั้ง z-0 ที่ section ต่อไป) */
}

/* แถว/คอลัมน์ใน hero ก็ไม่ควรตัดของที่ล้น */
.gc-hero .row,
.gc-hero .col-12,
.gc-hero .col-lg-4,
.gc-hero .col-lg-8 {
  overflow: visible;
}

.gc-hero .row {
  min-height: 70vh;
}

/* * หมายเหตุ: เราย้าย .h-100 ไปใส่ใน HTML (class="... h-100") 
 * เพื่อให้ .card (.hero-img) ยืดเต็ม .col-lg-8 บนจอใหญ่
 * เราจึงต้องแก้ .gc-hero .row บนจอใหญ่ให้ยืดเต็ม 100% ด้วย
*/
@media (min-width: 992px) {
  .gc-hero .row {
    height: 100%;
    min-height: 0; /* reset min-height */
  }
}

.gc-hero img {
  max-width: 100%;
}

/* เนื้อหาใน hero ให้อยู่เหนือ decoration */
.gc-hero > * {
  position: relative;
  z-index: 2;
}

/* ===== Phone image (ย้ายพิกัดจาก inline มาไว้ที่นี่) ===== */
.hero-phone {
  width: clamp(160px, 22vw, 340px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
  pointer-events: none;
  position: absolute;
  right: -10%;
  bottom: -20%; /* ล้นลงไปยัง section ถัดไป */
  z-index: 3;
}

/* มือถือ (≤ 992px): ลดขนาด/ขยับตำแหน่ง */
@media (max-width: 991.98px) {
  .hero-phone {
    width: clamp(140px, 40vw, 260px);
    right: -6%;
    bottom: -10%;
  }
}

/* ================================================== */
/* === จุดที่แก้ไข (The Fix) === */
/* ================================================== */

/* ตอนนี้ .hero-img คือ .card (ไม่ใช่ <img>) */
.hero-img {
  /* 1. ใช้เป็น background-image แทน */
  background-image: url("/static/assets/decorations/hero/hero-bg-2.png"); /* <<< ใส่ path รูปสีฟ้าของคุณที่นี่ */
  background-size: cover;
  background-position: center;

  /* 2. ลบ height: 56vh ที่เป็นปัญหาออก */
  /* height: 56vh; */

  /* 3. ให้ยืดหยุ่นตามเนื้อหา แต่ยังคงความสูงขั้นต่ำไว้ */
  min-height: 360px;

  /* 4. ลบคุณสมบัติของ <img> ที่ไม่เกี่ยวข้องออก */
  /* object-fit: cover; */
  /* object-position: center; */
}

/* จอใหญ่: ให้การ์ด/รูปยืดเต็มความสูง (อันนี้ยังคงเดิม แต่ตอนนี้มันหมายถึง .card) */
@media (min-width: 992px) {
  .hero-img {
    height: 100%; /* ทำให้ .card (ที่มี .hero-img) ยืดเต็ม 100% */
    min-height: 0;
  }
}

/* ====== Phone stage & previews (ส่วนนี้ไม่ได้แก้ไข) ====== */
.phone-stage {
  width: 359px;
  height: 743px;
  margin: 24px auto;
  position: relative;
  overflow: visible;
  pointer-events: none;
}

.phone-stage img {
  display: block;
  pointer-events: auto;
}

.phone-stage .phone-bg {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 140%;
  height: 140%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.95;
}

.phone-stage .phone-main {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 359px;
  height: 743px;
  object-fit: cover;
  z-index: 3;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(8, 22, 50, 0.25);
}

.phone-stage .preview {
  position: absolute;
  width: 243px;
  height: 423px;
  object-fit: cover;
  z-index: 2;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(8, 22, 50, 0.18);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

/* Left previews (stacked) */
.phone-stage .preview.left.first {
  left: -64px;
  top: -14px;
  transform: rotate(-3deg) scale(1);
}
.phone-stage .preview.left.second {
  left: -104px;
  top: 240px;
  transform: rotate(-6deg) scale(1);
}

/* Right previews (stacked) */
.phone-stage .preview.right.first {
  right: -64px;
  top: -14px;
  transform: rotate(3deg) scale(1);
}
.phone-stage .preview.right.second {
  right: -104px;
  top: 240px;
  transform: rotate(6deg) scale(1);
}

/* Small screens: scale everything down so it fits */
@media (max-width: 991.98px) {
  .phone-stage {
    width: 280px;
    height: 579px;
    margin: 18px auto;
  }
  .phone-stage .phone-main {
    width: 280px;
    height: 579px;
  }
  .phone-stage .preview {
    width: 190px;
    height: 330px;
  }
  .phone-stage .preview.left.first {
    left: -44px;
    top: -10px;
  }
  .phone-stage .preview.left.second {
    left: -74px;
    top: 190px;
  }
  .phone-stage .preview.right.first {
    right: -44px;
    top: -10px;
  }
  .phone-stage .preview.right.second {
    right: -74px;
    top: 190px;
  }
}

/* Utility: if you need previews behind the phone, lower z-index */
.phone-stage.is-behind .preview {
  z-index: 1;
}

/* ===== Theme (dark) (ส่วนนี้ไม่ได้แก้ไข) ===== */
.gc-widget[data-theme="dark"] {
  background: #0b1220;
  color: #e5e7eb;
}
.gc-widget[data-theme="dark"] .gc-hero {
  background: #0f172a !important;
  box-shadow: none;
}
.gc-widget[data-theme="dark"] .text-secondary {
  color: #cbd5e1 !important;
}
.gc-widget[data-theme="dark"] .card {
  background: #111827;
  color: #e5e7eb;
}

/* ===== Responsive : ลดเอฟเฟกต์ decoration บนจอเล็ก (ส่วนนี้ไม่ได้แก้ไข) ===== */
@media (max-width: 767.98px) {
  .gc-hero::before {
    width: 160px;
    height: 160px;
    opacity: 0.12;
    transform: translate(-28px, -28px);
  }
  .gc-hero::after {
    width: 260px;
    height: 260px;
    opacity: 0.16;
    transform: translate(42px, 42px);
  }
}
/* ===== helper เผื่อใช้งาน (padding มากกว่า pt-5) ===== */
.pt-6 {
  padding-top: 4.5rem !important;
}
.pt-8 {
  padding-top: 7rem !important;
}
@media (min-width: 992px) {
  .pt-lg-8 {
    padding-top: 7rem !important;
  }
}

/* Badge Styles */
.badge-soft-primary {
  background-color: #edf2ff !important;
  border: 1px solid #d5ddff !important;
  color: #223381 !important;
}

.badge-soft-secondary {
  background: linear-gradient(135deg, #2c43aa 0%, #1e3392 100%);
  border: 1px solid #495aa9 !important;
  color: #ffffff !important;
}

/* 
Techstack section */

/* สีพื้นหลัง section */
.bg-brand-ink {
  background: #1e2d68;
}
:root {
  --diamond: 72px; /* ขนาดเพชร */
  --head-gap: 12px; /* เว้นจากเพชรถึงเส้น */
}

/* เพชรเดิม */
.feature-diamond {
  width: var(--diamond);
  height: var(--diamond);
  border-radius: 12px;
  background: #fff;
  color: #223382;
  transform: rotate(45deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.feature-icon {
  width: 34px;
  height: 34px;
  transform: rotate(-45deg);
}

/* ครอบหัว (ใช้เป็น reference วาดเส้น) */
.feature-head {
  height: var(--diamond);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* ให้อยู่หน้าเส้น */
}

/* เส้นแนวนอน — เฉพาะจอ >= lg */
@media (min-width: 992px) {
  .feature-item {
    position: relative;
  }

  .feature-head::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* เริ่มจากกึ่งกลางเพชร + เผื่อระยะ */
    left: calc(50% + (var(--diamond) / 2) + var(--head-gap));
    /* ไปจนเลยขอบขวาคอลัมน์นิดหน่อยให้เนียน */
    right: -12px;
    height: 2px;
    background: rgba(255, 255, 255, 0.35);
    z-index: 0; /* อยู่หลังเพชร */
    pointer-events: none;
  }

  /* คอลัมน์สุดท้ายไม่วาดเส้น */
  .row > .feature-item:last-child .feature-head::after {
    display: none;
  }
}

/* benefits style */
.benefits-list {
  font-size: 30px;
  font-weight: bold;
  color: #c0c9f5;
}

/* Splide: center slide large + neighbor previews small */
#image-carousel {
  --center-w: 359px;
  --center-h: 743px;
  --preview-w: 243px;
  --preview-h: 423px;
}

#image-carousel .splide__list {
  align-items: center; /* center vertical alignment */
}

#image-carousel .splide__slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Center slide: phone-stage fixed size (use Splide's is-active to work with loop clones) */
#image-carousel .splide__slide.is-active .phone-stage {
  width: var(--center-w);
  height: var(--center-h);
}

/* Ensure phone-main keeps its natural size inside active (center) slide */
#image-carousel .splide__slide.is-active .phone-main {
  width: var(--center-w) !important;
  height: var(--center-h) !important;
  object-fit: cover;
}

/* Non-center slides: target direct child img (these are the preview slides) */
#image-carousel .splide__slide:not(.is-active) > img {
  width: var(--preview-w);
  height: var(--preview-h);
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(8, 22, 50, 0.12);
  transition: transform 220ms ease, opacity 220ms ease;
  opacity: 0.95;
}

/* Slight scale difference for the immediate neighbors to emphasize center */
#image-carousel .splide__slide:not(.is-active).splide__slide--prev,
#image-carousel .splide__slide:not(.is-active).splide__slide--next,
#image-carousel .splide__slide:not(.is-active) + .splide__slide,
#image-carousel .splide__slide:not(.is-active) ~ .splide__slide {
  transform-origin: center center;
}

/* Responsive fallback */
@media (max-width: 991.98px) {
  #image-carousel {
    --center-w: 280px;
    --center-h: 579px;
    --preview-w: 190px;
    --preview-h: 330px;
  }
  #image-carousel .splide__slide:not(.is-active) > img {
    opacity: 0.95;
  }
}

/* ขนาดสไลด์ + เอฟเฟกต์ขยายสไลด์กลาง */
.mySwiper {
  width: 100%;
  max-width: 1460px;
  height: 490px; /* เผื่อความสูงกรอบ */
  padding: 40px 0; /* ให้เห็นสไลด์ข้างๆ */
}
.mySwiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.85);
  opacity: 0.6;
  transition: transform 0.35s, opacity 0.35s, filter 0.35s;
}
.mySwiper .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}

/* โครงอุปกรณ์ */
.device {
  --device-w: 260px; /* ความกว้างกรอบ */
  --ratio: 20/37; /* อัตราส่วนกรอบ (กว้าง/สูง) ลองปรับตามไฟล์จริง */
  --screen-inset-top: -10px; /* ขอบช่องจอด้านบน */
  --screen-inset-right: 10px; /* ขอบช่องจอด้านขวา */
  --screen-inset-bottom: 10px; /* ขอบช่องจอด้านล่าง */
  --screen-inset-left: 10px; /* ขอบช่องจอด้านซ้าย */

  position: relative;
  width: var(--device-w);
  aspect-ratio: var(--ratio);
  padding: 0;
}

/* รูป “จอจริง” จะถูกวางให้อยู่ในช่องจอของกรอบ */
.device__screen {
  position: absolute;
  top: var(--screen-inset-top);
  right: var(--screen-inset-right);
  bottom: var(--screen-inset-bottom);
  left: var(--screen-inset-left);
  width: 230px;
  height: auto;
  object-fit: cover; /* ให้เต็มช่องจอแบบสวย */
  border-radius: 15px; /* ถ้ากรอบมีมุมโค้ง */
  z-index: 1;
  padding-left: 10px;
  padding-top: 20px;
}

/* กรอบโทรศัพท์ PNG วางทับด้านบน */
.device__frame {
  position: absolute;
  inset: 0;
  background: center / contain no-repeat url("/static/assets/images/phone-frame.png"); /* ใส่ path กรอบ PNG */
  height: 475px;
  z-index: 2;
  pointer-events: none;
  opacity: 0; /* เริ่มต้นซ่อนกรอบ */
  transform: translateY(6px); /* ให้มี motion นิดหน่อย */
  transition: opacity 0.35s, transform 0.35s;
  overflow: hidden !important;
}

/* โชว์กรอบเฉพาะสไลด์ที่ active */
.swiper-slide-active .device__frame {
  opacity: 1;
  transform: translateY(0);
}
.swiper-slide-active .device__screen {
  border-radius: 35px;
}

/* ปุ่มนำทาง */
.swiper-button-next,
.swiper-button-prev {
  color: #b0b0b0;
  opacity: 0.8;
  transition: opacity 0.25s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* รองรับจอเล็ก */
@media (max-width: 575.98px) {
  .mySwiper {
    height: 420px;
  }
  .device {
    --device-w: 220px;
  }
  .device__screen {
    padding-top: 15px;
    padding-left: 10px;
    height: 400px;
    width: 190px;
    border-radius: 15px !important;
    border-top-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
  }
  .device__frame {
    height: 400px;
  }
}

/* 5. ลบ @media ที่เป็นปัญหาทิ้ง */
/*
@media (max-width: 575.98px) {
  .swiper-img {
    width: 200px; 
    height: 350px;
  }
}
*/
/* ความกว้างสไลด์แบบการ์ด */
.target-swiper .swiper-slide {
  width: 320px;
}
@media (max-width: 576px) {
  .target-swiper .swiper-slide {
    width: 260px;
  }
}

/* ให้เห็นการ์ดซ้าย-ขวา */
.target-swiper .swiper {
  overflow: visible;
} /* ไม่จำเป็นถ้า container ครอบ */

.target-card--muted {
  filter: grayscale(100%);
  opacity: 0.5;
}

/* การ์ดใบกลางเด่น */
.target-swiper .swiper-slide-active .card {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
  transition: transform 0.25s ease;
}

.targets-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

.target-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  border: 1px solid #f1f1f1;
  width: 206px;
  max-height: 500px;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: width 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease,
    filter 0.2s ease, opacity 0.2s ease;
}

.target-card:hover {
  transform: translateY(-4px);
  filter: none;
  opacity: 1;
}

.target-card.active {
  width: 306px;
  opacity: 1;
  filter: none;
  border-color: #eeeeee;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.08);
}

/* show details only when active */
.target-details {
  display: none;
}
.target-card.active .target-details {
  display: block;
}

.target-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

@media (max-width: 767.98px) {
  .target-card,
  .target-card.active {
    width: 100%;
    height: 300px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .target-image {
    width: 120px !important;
    height: 120px !important;
    object-fit: fill !important;
    align-self: center;
  }

  .target-image.active {
    width: 70px !important;
    height: 70px !important;
  }
}

/* ===== Final CTA ===== */
.final-cta .card-img {
  width: 100%;
  height: min(70vh, 720px); /* สูงตามจอแต่ไม่เกิน 720px */
  min-height: 360px; /* กันเตี้ยเกินไป */
  object-fit: fill; /* ครอบเต็ม */
  object-position: center; /* จัดตำแหน่งจุดสนใจ */
}

/* ขนาดโลโก้ยืดหยุ่น */
.final-cta__logo {
  width: clamp(120px, 22vw, 220px);
  height: auto;
}

/* ข้อความหัวใหญ่แบบ responsive ด้วย clamp() */
.final-cta__title {
  /* min 18px, ไหลด้วย 4.2vw, max 40px (ปรับได้) */
  font-size: clamp(18px, 4.2vw, 40px);
  line-height: 1.25;
  font-weight: 600;
  text-wrap: balance; /* ช่วยตัดบรรทัดสวยขึ้น (รองรับบราวเซอร์ใหม่) */
  max-width: 900px; /* ไม่ให้กว้างเกิน */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); /* ให้อ่านชัดบนภาพ */
}

/* ปรับบนจอเล็กมาก */
@media (max-width: 575.98px) {
  .final-cta .card-img {
    height: 68vh; /* ให้สูงขึ้นนิด เพื่อมีพื้นที่ข้อความ */
    min-height: 420px;
    object-position: center 35%; /* ขยับเฟรมขึ้นเล็กน้อยถ้าส่วนสำคัญอยู่บน */
    object-fit: cover;
  }
  .final-cta__title {
    font-size: clamp(18px, 5.2vw, 28px); /* ลดเพดานบนมือถือ */
  }
}

@media (max-width: 991.98px) {
  .final-cta .card-img {
    object-fit: cover;
  }
}

/* ปรับบนจอใหญ่ */
@media (min-width: 992px) {
  .final-cta .card-img {
    height: 60vh;
    min-height: 520px;
  }
  .final-cta__title {
    font-size: clamp(24px, 3.2vw, 48px);
  }
}

/* FORM */
.underline-input {
  border: none;
  border-bottom: 1px solid #ced4da;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
}

.underline-input:focus {
  box-shadow: none;
  border-bottom: 2px solid #3bb9e4;
  background: transparent;
  color: white;
}

.underline-input::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-group:focus-within .form-label {
  color: #3bb9e4 !important;
}

/* Our target */
.target-section {
  bottom: 60px;
}

@media (max-width: 991.98px) {
  .target-section {
    bottom: 0px;
  }
}