@font-face {
    font-family: 'Wendy One';
    src: url(../fonts/WendyOne-Regular.ttf?63e47643d58b20318804173bf471a858) format(truetype);
    font-weight: 400;
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter-Regular.ttf?86c330c66f7333ff6202209becd04687) format(truetype);
    font-weight: 400;
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter-SemiBold.ttf?d52a01d17b566af4e09658f7a0afd6f7) format(truetype);
    font-weight: 600;
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter-Bold.ttf?f0be7d273c3543fe4c4ab44c1432a0ba) format(truetype);
    font-weight: 700;
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter-ExtraBold.ttf?c9a0d06db60f5cd270d4b669b1dd717f) format(truetype);
    font-weight: 800;
}

@font-face {
    font-family: 'Inter';
    src: url(../fonts/Inter-Black.ttf?2615b19ab6fb503e6bb74afde40536fc) format(truetype);
    font-weight: 900;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400; 
    line-height: 1.2;
    background-color: #faf8ef;
}

h1 {
    font-size: 48px;
    color: #1d293d;
    font-weight: 800;
    margin-bottom: 16px;
}

h3 {
    font-size: 18px;
    color: #1d293d;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.5;
}

img {
    width: 100%;
    height: 100%;
}

.site {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-content {
    padding-bottom: 48px;
    flex-grow: 1;
}

.container{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

@media screen and (max-width: 375px) {
    h1 {
        font-size: 38px;
    }
}

@media screen and (max-width: 320px) {
    h1 {
        font-size: 32px;
    }
}

header {
    padding: 10px 0;
}

header .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

header .logo-text {
        font-family: 'Wendy One', sans-serif;
        font-size: 32px;
        line-height: 1.5;
        font-weight: 400;
        color: #294648;
        text-transform: uppercase;
    }

header .custom-logo-link {
        height: 88px;
        width: auto;
    }

footer {
    background-color: #fff;
    padding: 48px 0;
    border-top: 1px solid #e2e8f0;
}

footer .footer-columns {
        margin-bottom: 32px;
        display: grid;
        gap: 32px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

@media screen and (max-width: 470px) {

footer .footer-columns {
            grid-template-columns: repeat(1, minmax(0, 1fr))
    }
        }

footer p {
        color: #45556c;
        font-size: 14px;
        line-height: 1.5;
    }

footer .copyright {
        font-size: 12px;
        color: #62748e;
        line-height: 1.5;
        text-align: center;
        padding-top: 32px;
        border-top: 1px solid #e2e8f0;
    }

.offer-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 24px;
    margin-top: 48px;
}

.offer-list .wrap-content {
        background-color: #fff;
        border-radius: 16px;
        overflow: hidden;
    }

.offer-list .main-offer {
        padding: 24px 24px 18px 24px;
    }

.offer-list .highlight-box {
        font-size: 16px;
        font-weight: 700;
        line-height: 21px;
        color: #fff;
        background-color: #D427FF;
        display: inline-flex;
        padding: 4px 14px;
        border-radius: 10px 10px 0 0;
        align-items: center;
        justify-content: center;
        position: absolute;
        left: 17px;
        top: -35px;
    }

.offer-list .offer-item {
        border: 2px solid #F1F5F9;
        border-radius: 16px;
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        height: -moz-max-content;
        height: max-content;
        
    }

.offer-list .offer-item:hover {
            transform: translate(0px, -4px);
            box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 25px -5px, 
            rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
        }

.offer-list .offer-item.is-highlight {
            border: none;
            box-shadow: none;
        }

.offer-list .offer-item.is-highlight::before {
                content: "";
                position: absolute;
                top: -10px; 
                left: -10px;
                width: calc(100% + 20px); 
                height: calc(100% + 20px);
                background: linear-gradient(to bottom in oklab, #D426FF 7%, #019B65 97%);
                z-index: -1;
                border-radius: 26px;
            }

.offer-list .offer-item:hover {
            transform: translate(0px, -4px);
        }

.offer-list .offer-logo {
        margin-bottom: 24px;
        border-radius: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
    }

.offer-list .offer-logo img {
            aspect-ratio: 190 / 54;
            -o-object-fit: contain;
               object-fit: contain;
            width: 190px;
            height: auto;
        }

.offer-list .offer-title {
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 16px;
        color: #0f172b;
        font-weight: 800;
        text-align: center;
    }

.offer-list .offer-description {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 24px;
        color: #45556c;
        text-align: center;
    }

.offer-list .offer-button {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        border-radius: 14px;
        color: #fff;
        font-size: 18px;
        font-weight: 900;
        line-height: 1.2;
        text-decoration: none;
        background-image: linear-gradient(to right in oklab, #00c950 0%, #009966 100%);
        box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, 
        rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

.offer-list .offer-button:hover {
            background-image: linear-gradient(to right in oklab, #00b048 0%, #008858 100%);
            scale: 1.02;
            box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 20px -3px;
        }

.offer-list .offer-label {
        border: 2px solid #fff;
        border-radius: 99px;
        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
        background-image: linear-gradient(to right in oklab, attr(data-from type(<color>)) 0%, attr(data-to type(<color>)) 100%);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        text-transform: uppercase;
        font-weight: 900;
        font-size: 14px;
        color: #fff;
        line-height: 32px;
        padding: 0 16px;
        position: absolute;
        top: 18px;
        right: 18px;
    }

.offer-list .offer-label:hover {
            scale: 1.1;
        }

.offer-list .detail-offer {
        text-align: center;
    }

.offer-list .btn-expand-detail {
        font-size: 16px;
        font-weight: 600;
        line-height: 30px;
        color: #01A162;
        display: inline-block;
        position: relative;
        cursor: pointer;
        margin-bottom: 7px;
    }

.offer-list .btn-expand-detail::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            background-image: url(../images/expand.png?e64852e679cc2761cb113bc0454212af);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            right: -22px;
            top: 50%;
            transform: translateY(-50%) rotate(180deg);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

.offer-list .btn-expand-detail.expanded::after {
                transform: translateY(-50%) rotate(0deg);
            }

.offer-list .detail-content {
        background-color: #f6f6f6;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

.offer-list .detail-content.expanded {
            max-height: 1000px;
            
        }

.offer-list .detail-item {
        display: grid;
        grid-template-columns: 2fr 1fr;
        text-align: left;
        padding-bottom: 23px;
        padding-left: 28px;
        padding-right: 28px;
        font-weight: 600;
        line-height: 1;
        color: #1D293D;
        align-items: center;
    }

/* only select item 3th, 6th */

.offer-list .detail-item:nth-child(3n):not(:last-child) { 
            margin-bottom: 25px;
            border-bottom: 1px solid #019B65;
        }

.offer-list .detail-item:first-child {
            padding-top: 20px;
        }

.offer-list .detail-item:last-child {
            padding-bottom: 20px;
        }

.offer-list .detail-label {
        font-size: 14px;
    }

.offer-list .detail-value {
        font-size: 24px;
    }

@media screen and (max-width: 768px) {
    .offer-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 470px) {
    .offer-list {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.wp-block-contact-form-7-contact-form-selector {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.wp-block-contact-form-7-contact-form-selector .heading-form {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
        color: #000;
        margin-bottom: 20px;
    }

.wp-block-contact-form-7-contact-form-selector .wpcf7-form {
        padding: 15px;
        border-radius: 15px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
        max-width: 100%;
        width: 400px;
    }

.wp-block-contact-form-7-contact-form-selector .wpcf7-form-control-wrap {
       margin-top: 5px;
       display: block;
    }

.wp-block-contact-form-7-contact-form-selector label {
        color: #45556c;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 10px;
        display: block;
    }

.wp-block-contact-form-7-contact-form-selector input {
        font-size: 16px;
        line-height: 1.2;
        padding: 5px;
    }

.wp-block-contact-form-7-contact-form-selector .wpcf7-submit {
        background: linear-gradient(to right in oklab, #00c950 0%, #009966 100%);
        border-radius: 14px;
        color: #fff;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
        margin-top: 30px;
    }

.wp-block-contact-form-7-contact-form-selector .wpcf7-not-valid-tip {
        font-size: 14px;
        margin-top: 5px;
    }

.wp-block-contact-form-7-contact-form-selector .wpcf7-response-output {
        color: #45556c;
    }