/* ================= SERVICE COMMON ================= */
.service-banner{
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    color: #fff;
}
.service-banner h1{
    font-size: 36px;
    font-weight: 700;
}
.service-banner p{
    max-width: 720px;
    margin: 10px auto 0;
    font-size: 16px;
    opacity: 0.95;
}

.service-section{
    padding: 70px 0;
}
.service-section h2{
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}
.service-section h2 span{
    color: #ff764a;
}
.service-section p{
    font-size: 15px;
    line-height: 1.7;
    color: #555;
}

.service-list{
    margin-top: 25px;
}
.service-list li{
    list-style: none;
    margin-bottom: 10px;
    font-weight: 500;
}
.service-list li::before{
    content: "✔";
    color: #ff764a;
    margin-right: 8px;
    font-weight: bold;
}

/* ================= BOXES ================= */
.tech-box,
.template-box{
    background: #ffffff;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    height: 100%;
}
.tech-box h5,
.template-box h5{
    font-weight: 700;
    margin-bottom: 10px;
}

/* ================= TEMPLATE BUY ================= */
.template-box img{
    max-width: 100%;
    border-radius: 6px;
    margin-bottom: 15px;
}
.template-price{
    font-size: 20px;
    font-weight: 700;
    color: #0d1b3d;
}
.btn-buy{
    background: #ff764a;
    color: #fff;
    font-weight: 600;
}
.btn-buy:hover{
    background: #e65c32;
    color: #fff;
}
/* ================= SVG ANIMATION ================= */
svg path, svg circle, svg rect {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: drawLine 1.4s ease forwards;
}

.value-box:hover svg path,
.value-box:hover svg circle,
.value-box:hover svg rect{
    animation: drawLineHover 0.9s ease forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes drawLineHover {
    from {
        stroke-dashoffset: 120;
    }
    to {
        stroke-dashoffset: 0;
    }
}