/* การ์ดหมวดหมู่สินค้า/บริการ
   ใช้ที่: หน้าแรก, สินค้าของเรา, ผลงานของเรา */

/* "สินค้าของเรา" - modern treatment.
               Scoped to .services-modern; palette #062452 / #0a4091 / #fff / #ccc */
            .services-one.services-modern {
                background-color: #f5f8fc;
                padding: 66px 0 60px;
            }

            /* the theme reserves a 459px strip here for a background image that
               was commented out and no longer ships - reclaim the space */
            .services-one.services-modern.services-one--has-top-bg::before {
                display: none;
            }

            .services-one.services-modern .sec-title {
                margin-bottom: 46px;
            }

            .services-one.services-modern .intro-eyebrow {
                align-items: center;
                color: #0a4091;
                display: inline-flex;
                font-family: 'promptregular';
                font-size: 15px;
                font-weight: 600;
                letter-spacing: .3px;
                margin-bottom: 12px;
            }

            /* ---- card ---- */
            .services-one.services-modern .services-one__single {
                background-color: #ffffff;
                border: 1px solid #cccccc;
                border-radius: 18px;
                box-shadow: 0 2px 4px rgba(6, 36, 82, .03), 0 14px 32px -20px rgba(6, 36, 82, .28);
                margin-bottom: 30px;
                overflow: hidden;
                transition: transform .35s cubic-bezier(.22, .61, .36, 1),
                            box-shadow .35s ease,
                            border-color .35s ease;
            }

            .services-one.services-modern .services-one__single:hover {
                border-color: #0a4091;
                box-shadow: 0 4px 8px rgba(6, 36, 82, .05), 0 24px 46px -22px rgba(10, 64, 145, .45);
                transform: translateY(-4px);
            }

            /* ---- image ---- */
            .services-one.services-modern .services-one__single-img,
            .services-one.services-modern .services-one__single-img-inner {
                border-radius: 0;
                margin: 0;
                overflow: hidden;
            }

            .services-one.services-modern .services-one__single-img::before,
            .services-one.services-modern .services-one__single-img-inner::before {
                display: none;
            }

            .services-one.services-modern .services-one__single-img-inner img {
                aspect-ratio: 4 / 3;
                display: block;
                height: auto;
                object-fit: cover;
                transform: none;
                transition: transform .45s ease;
                width: 100%;
            }

            .services-one.services-modern .services-one__single:hover .services-one__single-img-inner img {
                transform: scale(1.06);
            }

            /* the theme drops a farming glyph on each card - not suntec's subject matter */
            .services-one.services-modern .services-one__single-img-icon {
                display: none;
            }

            /* ---- content ---- */
            .services-one.services-modern .services-one__single-content {
                background-color: #ffffff;
                border-radius: 0;
                padding: 22px 18px 26px;
            }

            .services-one.services-modern .services-one__single-content h3 {
                font-family: 'promptregular';
                font-size: 18px;
                font-weight: 600;
                line-height: 1.55;
                margin: 0;
            }

            .services-one.services-modern .services-one__single-content h3 a {
                color: #062452;
                transition: color .3s ease;
            }

            .services-one.services-modern .services-one__single:hover .services-one__single-content h3 a,
            .services-one.services-modern .services-one__single-content h3 a:hover {
                color: #0a4091;
            }

            /* idle: solid blue */
            .services-one.services-modern .services-one__single-content .read-more-btn {
                background: #0a4091;
                height: 44px;
                margin-top: 16px;
                transition: background-color .3s ease, transform .35s ease;
                width: 44px;
            }

            /* the theme grows a pseudo-element behind the button on hover - not needed here */
            .services-one.services-modern .services-one__single-content .read-more-btn::before {
                display: none;
            }

            .services-one.services-modern .services-one__single-content .read-more-btn span,
            .services-one.services-modern .services-one__single-content .read-more-btn span::before {
                color: #ffffff;
                transition: color .3s ease;
            }

            /* hover: light blue */
            .services-one.services-modern .services-one__single:hover .read-more-btn,
            .services-one.services-modern .services-one__single-content .read-more-btn:hover {
                background: rgba(10, 64, 145, .1);
                transform: translateX(4px);
            }

            .services-one.services-modern .services-one__single:hover .read-more-btn span,
            .services-one.services-modern .services-one__single:hover .read-more-btn span::before,
            .services-one.services-modern .services-one__single-content .read-more-btn:hover span,
            .services-one.services-modern .services-one__single-content .read-more-btn:hover span::before {
                color: #0a4091;
            }

            @media (max-width: 767px) {
                .services-one.services-modern {
                    padding: 64px 0 40px;
                }

                .services-one.services-modern .sec-title__title {
                    font-size: 23px;
                }

                .services-one.services-modern .services-one__single {
                    border-radius: 16px;
                    margin-bottom: 24px;
                }
            }

            @media (prefers-reduced-motion: reduce) {
                .services-one.services-modern .services-one__single,
                .services-one.services-modern .services-one__single-img-inner img,
                .services-one.services-modern .read-more-btn {
                    transition: none;
                }

                .services-one.services-modern .services-one__single:hover {
                    transform: none;
                }

                .services-one.services-modern .services-one__single:hover .services-one__single-img-inner img {
                    transform: none;
                }
            }