body{background:#f8f9fa;}
a{text-decoration:none;color:#0d6efd;transition:color 0.2s;}
a:hover{color:#0a58ca;}
.card{border-radius:10px;transition:transform 0.2s,box-shadow 0.2s;}
.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.card-img-top{object-fit:cover;height:250px;}
@media(max-width:576px){.card-img-top{height:180px;}}
.badge{font-size:0.75rem;margin-right:3px;}

.post-header{margin-bottom:20px;}
.post-header img{max-height:400px;object-fit:cover;border-radius:10px;}
@media(max-width:576px){.post-header img{max-height:250px;}}
.badge{font-size:0.75rem;margin-right:3px;}
.related-posts h4{margin-bottom:20px;font-weight:600;}
.related-posts .card{border-radius:10px;transition:transform 0.2s,box-shadow 0.2s;}
.related-posts .card:hover{transform:translateY(-5px);box-shadow:0 10px 20px rgba(0,0,0,0.15);}
.related-posts a{text-decoration:none;color:#0d6efd;transition:color 0.2s;}
.related-posts a:hover{color:#0a58ca;}

.related-posts .btn-primary {
    color: #fff !important;
}
.related-posts .btn-primary:hover {
    color: #fff !important;
}


/* Home button - bright blue gradient */
.btn-color-home {
    background: linear-gradient(45deg, #1e90ff, #00b0ff); /* 更亮的蓝色 */
    color: #fff;
    border: none;
    transition: all 0.3s;
}
.btn-color-home:hover {
    background: linear-gradient(45deg, #00b0ff, #1e90ff);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

/* Support button - vivid green gradient */
.btn-color-support {
    background: linear-gradient(45deg, #28a745, #00ff66); /* 更鲜绿 */
    color: #fff;
    border: none;
    transition: all 0.3s;
}
.btn-color-support:hover {
    background: linear-gradient(45deg, #00ff66, #28a745);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

/* Blog button - bright orange gradient */
.btn-color-blog {
    background: linear-gradient(45deg, #ff5500, #ffcc33); /* 更亮橙色 */
    color: #fff;
    border: none;
    transition: all 0.3s;
}
.btn-color-blog:hover {
    background: linear-gradient(45deg, #ffcc33, #ff5500);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

/* Pricing button - vivid purple gradient */
.btn-color-pricing {
    background: linear-gradient(45deg, #6a0dad, #a64ca6); /* 更鲜紫色 */
    color: #fff;
    border: none;
    transition: all 0.3s;
}
.btn-color-pricing:hover {
    background: linear-gradient(45deg, #a64ca6, #6a0dad);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

/* Services button - bright blue gradient */
.btn-color-services {
    background: linear-gradient(45deg, #0055cc, #3399ff); /* 更鲜明的蓝色 */
    color: #fff;
    border: none;
    transition: all 0.3s;
}
.btn-color-services:hover {
    background: linear-gradient(45deg, #3399ff, #0055cc);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

/* Solutions button - vivid teal gradient */
.btn-color-solutions {
    background: linear-gradient(45deg, #0ebc9a, #5ef2c3); /* 更亮的青绿色 */
    color: #fff;
    border: none;
    transition: all 0.3s;
}
.btn-color-solutions:hover {
    background: linear-gradient(45deg, #5ef2c3, #0ebc9a);
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
}

.d-flex.justify-content-between .btn {
    height: 40px;
}




.floating-btn:hover {
    transform: scale(1.15);
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
    background: linear-gradient(135deg, #ff6b4b, #ff5a7c);
}

.floating-btn:hover i {
    transform: rotate(-10deg);
    transition: transform 0.3s ease;
}



.btn-custom {
    font-size: 1.4rem;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    display: inline-flex;
    flex-direction: column; /* stack main and small text vertically */
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect */
.btn-custom:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

/* Main icon and text container */
.btn-main {
    display: inline-flex;
    align-items: center;
}

.btn-main i.main-icon {
    font-size: 2.2rem;
    margin-right: 0.5rem; /* spacing between icon and text */
    transition: transform 0.3s ease;
}

.btn-custom:hover i.main-icon {
    transform: rotate(-10deg);
}

/* Main text */
.btn-main strong {
    color: #fff;
}

/* Small text with icon */
.btn-small {
    font-size: 0.9rem;
    margin-top: 0.3rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
}

.btn-small i {
    font-size: 1rem;
    margin-right: 0.3rem;
}

/* Hover color */
.btn-custom:hover strong,
.btn-custom:hover .btn-small,
.btn-custom:hover i {
    color: #FFFF00;
}



.btn-free-trial {
    font-size: 1.4rem;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, #1fa2ff, #12d8fa);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    display: inline-flex;
    flex-direction: column; /* stack main and small text vertically */
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-free-trial:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
	text-decoration: none;
}

.btn-free-trial .btn-main {
    display: inline-flex;
    align-items: center;
}

.btn-free-trial i.main-icon {
    font-size: 2.2rem;
    margin-right: 0.5rem;
    transition: transform 0.3s ease;
	
	font-size:2rem;
	color: #FFEB3B;
}

.btn-free-trial:hover i.main-icon {
    transform: rotate(-10deg);
}

.btn-free-trial .btn-main strong {
    color: #fff;
}

.btn-free-trial .btn-small {
    font-size: 0.9rem;
    margin-top: 0.3rem;
    color: #fff;
    display: inline-flex;
    align-items: center;
}

.btn-free-trial .btn-small i {
    font-size: 1rem;
    margin-right: 0.3rem;
	color: #fff;
}

.btn-free-trial:hover strong,
.btn-free-trial:hover .btn-small,
.btn-free-trial:hover i {
    color: #FFFF00;
}

.btn-free-trial .btn-small span.no-highlight {
    color: #FFFF00;
    font-weight: 600;
}



.btn-purchase {
    font-size: 1.4rem;
    padding: 1.2rem 2.5rem;
    background: linear-gradient(135deg, #ff9800, #ff3d00);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-purchase:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    text-decoration: none;
}

.btn-purchase .btn-main {
    display: inline-flex;
    align-items: center;
}

.btn-purchase .btn-main i {
    font-size: 2.2rem;
    margin-right: 0.5rem;
    color: #fff176;
    transition: transform 0.3s ease;
}

.btn-purchase:hover .btn-main i {
    transform: rotate(-10deg);
}

.btn-purchase .btn-main strong {
	color: #fff;
}

.btn-purchase .btn-small {
    font-size: 0.9rem;
    margin-top: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-purchase .btn-small i {
    color: #ffeb3b;
}

.btn-purchase:hover strong,
.btn-purchase:hover .btn-small,
.btn-purchase:hover i {
    color: #ffff00;
}
