:root {
--primary-color: #1a6fc4;
--secondary-color: #0d4d8c;
--accent-color: #f8f9fa;
--dark-color: #343a40;
--light-color: #f8f9fa;
}

body {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.navbar-brand {
font-weight: 700;
color: var(--primary-color) !important;
}

.hero-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: 100px 0;
margin-bottom: 50px;
}

.section-title {
color: var(--secondary-color);
font-weight: 700;
margin-bottom: 30px;
padding-bottom: 15px;
position: relative;
}

.section-title:after {
content: '';
position: absolute;
left: 45%;
right: 45%;
bottom: 0;
width: 10%;
height: 4px;
background-color: var(--primary-color);
}

.service-card {
border-radius: 10px;
transition: all 0.3s ease;
border: 1px solid #eaeaea;
height: 100%;
}

.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-color: var(--primary-color);
}

.service-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 20px;
}

.btn-primary-custom {
background-color: var(--primary-color);
border-color: var(--primary-color);
padding: 10px 25px;
font-weight: 600;
}

.btn-primary-custom:hover {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}

.btn-whatsapp {
background-color: #25D366;
border-color: #25D366;
color: white;
}

.btn-whatsapp:hover {
background-color: #128C7E;
border-color: #128C7E;
color: white;
}

.form-control:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 0.25rem rgba(26, 111, 196, 0.25);
}

.footer {
background-color: var(--dark-color);
color: white;
padding: 40px 0 20px;
margin-top: 50px;
}

.footer a {
color: #ddd;
text-decoration: none;
}

.footer a:hover {
color: white;
text-decoration: underline;
}

.testimonial-card {
background-color: var(--accent-color);
border-radius: 10px;
padding: 25px;
border-left: 4px solid var(--primary-color);
}

.client-name {
color: var(--primary-color);
font-weight: 600;
}

.stats-box {
text-align: center;
padding: 20px;
border-radius: 10px;
background-color: #f8f9fa;
border: 1px solid #eaeaea;
}

.stats-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-color);
}

.stats-label {
color: var(--dark-color);
font-weight: 600;
}

.whatsapp-float {
position: fixed;
bottom: 30px;
right: 30px;
z-index: 1000;
}

.whatsapp-float .btn {
border-radius: 50px;
padding: 15px 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
.hero-section {
padding: 60px 0;
}

.section-title {
font-size: 1.8rem;
}

.whatsapp-float {
bottom: 20px;
right: 20px;
}
}

/* Blog Section Custom Styles */
#blog {
background-color: #f8fafc;
}

.blog-scroll-container {
position: relative;
overflow: hidden;
padding: 10px 0 30px;
}

.blog-scroll-wrapper {
display: flex;
gap: 25px;
overflow-x: auto;
scroll-behavior: smooth;
padding: 10px 5px 25px;
-ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
scrollbar-width: none;  /* Hide scrollbar for Firefox */
}

.blog-scroll-wrapper::-webkit-scrollbar {
display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}

.blog-card {
min-width: 320px;
max-width: 350px;
flex: 0 0 auto;
height: 420px;
border-radius: 12px;
background: white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
overflow: hidden;
border: 1px solid #e9ecef;
}

.blog-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.blog-card-inner {
height: 100%;
display: flex;
flex-direction: column;
}

.blog-image {
position: relative;
height: 180px;
overflow: hidden;
}

.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
transform: scale(1.05);
}

.blog-category {
position: absolute;
top: 15px;
left: 15px;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
color: white;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.blog-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}

.blog-meta {
margin-bottom: 12px;
}

.blog-title {
font-size: 1.1rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 12px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.blog-excerpt {
color: #6c757d;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 15px;
flex-grow: 1;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.blog-link {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
transition: color 0.3s ease;
align-self: flex-start;
}

.blog-link:hover {
color: var(--secondary-color);
}

/* Show All Card */
.show-all-card {
background: linear-gradient(135deg, #f8fafc 0%, #e9ecef 100%);
border: 2px dashed #cbd5e0;
}

.show-all-card:hover {
border-color: var(--primary-color);
background: linear-gradient(135deg, #f0f7ff 0%, #e1ecff 100%);
}

.show-all-icon {
color: var(--primary-color);
}

/* Scroll Navigation */
.scroll-left, .scroll-right {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 8px;
}

.scroll-dots {
display: flex;
gap: 10px;
}

.scroll-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #cbd5e0;
cursor: pointer;
transition: all 0.3s ease;
}

.scroll-dot.active {
background-color: var(--primary-color);
transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
.blog-card {
min-width: 280px;
height: 380px;
}

.blog-image {
height: 150px;
}

.blog-title {
font-size: 1rem;
}

.blog-excerpt {
font-size: 0.85rem;
}
}

@media (max-width: 576px) {
.blog-card {
min-width: 260px;
}
}