.header { background: url(/web/public/images/img1.png) no-repeat center center; background-size: cover; height: 800px; transition: background-image 1s ease-in-out; }
.header-content { margin-left: 8.85vw; padding-block: 8.07vw; display: flex; flex-direction: column; align-items: center; width: max-content; }
.title { font-family: Source Sans Pro; font-size: 72px; font-weight: bold; line-height: 100.8px; text-align: center; letter-spacing: 0px; color: #ffffff; }
.subtitle { margin-block: 0.41vw 3.33vw; font-family: Roboto; font-size: 22px; font-weight: 500; line-height: 35.2px; text-align: center; letter-spacing: 0.22px; color: rgba(255, 255, 255, 0.8); }
.more { padding: 24px 35px; cursor: pointer; border: none; border-radius: 8px; background: #ffffff; font-family: Source Sans Pro; font-size: 21.33px; line-height: 32px; letter-spacing: 0.53px; color: #2e86de; }
.more:hover { background: #2e86de; color: #ffffff; }
.info { width: 84.375%; margin: 4.16vw auto; max-width: 1200px; border-radius:20px; background: #ffffff; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1); }
.box { width: 74.07%; margin-inline: auto; padding-block: 7.39vw; }
.box1 { display: flex; align-items: center; }
.left .subtitle { margin-top: 4px; }
.box1 img { margin-left: 3.59vw; width: 52.58%; }
.box2 { display: flex; margin-block: 6.25vw; }
.box2 .left .subtitle { margin-block: 2.5vw; }
.box2 .left ul { margin: 0; padding: 0; }
.box2 img { margin-left: 5.1vw; width: 38.48%; height: 382px; min-width: 500px; }
.box3 { display: flex; align-items: center; justify-content: space-around; }
.box3 img { width: 33.33%; height: 15.625vw; width: 251px; height: 171px; }
.product .title { font-family: Source Sans Pro; font-size: 48px; font-weight: 600; line-height: 67.2px; text-align: center; letter-spacing: 0.96px; color: #3a3a3c; }
.product .subtitle { margin-block: 4px 3.85vw; font-family: Roboto; font-size: 24px; font-weight: normal; line-height: 33.6px; text-align: center; letter-spacing: 1.2px; color: #616163; }
.product .detail { width: 76.5%; max-width: 1200px; margin-inline: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.45vw; }
.item_box { display: flex; border-radius: 12px; background: #ffffff; box-shadow: 0px 4px 10px 0px #a5d2f9; }
.item_box img { width: 30.72%; border-radius: 12px 12px 12px 12px; }
.right { flex: 1; padding-block: 1.66vw; padding-right: 2.08vw; display: flex; flex-direction: column; }
.product_name { font-family: Source Sans Pro; font-size: 28px; font-weight: 600; line-height: 39.2px; letter-spacing: 0px; color: #3a3a3c; }
.text { margin-top: 12px; flex: 1; font-family: Abhaya Libre; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0px; color: #3a3a3c; }
.btn_about { margin-top: 0.83vw; width: 100%; height: 23.75%; cursor: pointer; border-radius: 12px; background: #ffffff; border: 1px solid #2e86de; font-family: Source Sans Pro; font-size: 20px; font-weight: normal; line-height: 28px; letter-spacing: 0.2px; color: #2e86de; }
.btn_about:hover { background: #2e86de; color: #ffffff; }
.solution-box3 { width:76.5%; border-radius: 10px; max-width: 1080px; margin-inline: auto; margin-block: 2.5vw; padding: 2.5vw 3.98vw; background: #ffffff; }
.solution-box3 table { border-collapse: collapse; width: 100%; text-align: center; }
.solution-box3 th, .solution-box3 td { border: 1px solid #e2e8f0; padding-block: 0.83vw; }
.solution-box3 thead { background: #f8fafc; font-family: Roboto; font-size: 16px; font-weight: bold; line-height: 24px; letter-spacing: 0px; color: #000000; }
.solution-box3 tbody { font-family: Roboto; font-size: 16px; font-weight: normal; line-height: 24px; letter-spacing: 0px; color: #000000; }
.solution-box3 .flex-column { display: flex; flex-direction: column; align-items: center; gap: 0.83vw; }
.solution-box4 { width: 76.5%; border-radius: 10px; max-width: 1080px; margin-inline: auto; padding: 4.16vw; background: #ffffff; }
.solution-box4 .box-title { font-family: Roboto; font-size: 30px; font-weight: bold; line-height: 36px; text-align: center; letter-spacing: 0px; color: #3a3a3c; }
.solution-box4 .subtitle { margin-top: 0.83vw; font-family: Roboto; font-size: 16px; font-weight: normal; line-height: 24px; text-align: center; letter-spacing: 0px; color: #37474f; }
.solution-box4 .box { margin-top: 3.33vw; display: flex; gap: 1.66vw; }
.solution-box4 .item { flex: 1; display: flex; flex-direction: column; align-items: center; transition: opacity 0.6s ease, transform 1s; }
.solution-box4 .item .title { margin-top: 0.83vw; font-family: Roboto; font-size: 18px; font-weight: bold; line-height: 28px; text-align: center; letter-spacing: 0px; color: #000000; }
.solution-box4 .item .description { margin-top: 0.41vw; font-family: Roboto; font-size: 14px; font-weight: normal; line-height: 24px; text-align: center; letter-spacing: 0px; color: #4b5563; }