/*!
Theme Name: Clean Stroke Ppainting
Theme Designer: Rahul Kashyap
Author URI: https://www.digikarnal.com/
Description: This Theme Created for my client  "Clean Stroke Ppainting".
Version: 1.0.0

Disclaimer: The content on this website is for informational purposes only. We make no warranties about the completeness, reliability, and accuracy of this information. Any action you take upon the information on this website is strictly at your own risk.

*/

/* Custom CSS for Clean Stroke Painting Website */

:root {
    --primary-color: #3D556A;
    --secondary-color: #ffffff;
    --accent-color: #7EC149;
    --light-gray: #f8fafc;
    --text-color: #374151;
    --border-radius: 0.75rem;
}

/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    line-height: 1.6;
}

.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #1e40af;
    border-color: #1e40af;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: 500;
    padding: 0.75rem 2rem;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(30, 58, 138, 0.3);
}

/* Navigation */
.navbar {
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.navbar-brand img{
    max-width: 150px;
}

.navbar-nav .nav-link {
    font-weight: 500;
    margin: 0 0.5rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

/* Hero Section */
.hero-section {
    padding-top: 115px;
    background: linear-gradient(135deg, var(--text-color) 0%, #3D556A 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
}


.hero-section-home{
    padding-top: 150px;
    background: linear-gradient(135deg, var(--text-light) 0%, #fff 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.hero-content h1 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-content .lead {
    font-size: 1.25rem;
    color: #6b7280;
    margin-bottom: 2rem;
}

.hero-stats {
    background: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.stat-item {
    text-align: center;
}

.stat-item h3 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.hero-buttons .btn {
    margin-bottom: 1rem;
}

.hero-image img {
    border-radius: var(--border-radius);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.hero-image img:hover {
    transform: scale(1.02);
}

/* Service Cards */
.service-card {
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), #3b82f6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.service-icon i {
    color: white !important;
    font-size: 2rem !important;
}

/* Why Choose Us */
.feature-item {
    padding: 1rem;
    border-radius: var(--border-radius);
    transition: all 0.3s ease;
}

.feature-item:hover {
    background-color: var(--light-gray);
    transform: translateX(10px);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), #5a6e81);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i {
    color: white !important;
}

/* Gallery Styles */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 300px;
}

.gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(52, 58, 64, 0.9), rgba(33, 37, 41, 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 20px;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-content {
    text-align: center;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-content {
    transform: translateY(0);
}

.gallery-nav {
    margin-bottom: 30px;
}

.gallery-nav .btn {
    border-radius: 25px;
    padding: 10px 25px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.gallery-nav .btn.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.gallery-item-wrapper {
    transition: all 0.5s ease;
}

.gallery-item-wrapper.hidden {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

#loadMoreBtn {
    border-radius: 25px;
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#loadMoreBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(52, 58, 64, 0.3);
}

/* Service Pages Styles */
.service-category-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.service-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.service-icon i {
    font-size: 2rem;
    color: white;
}

.service-detail {
    margin-bottom: 60px;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.pricing-info {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
}

.process-step {
    padding: 30px 20px;
}

.step-number {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0 auto 20px;
}

/* About Page Styles */
.value-card {
    background: white;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.value-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--text-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.value-icon i {
    font-size: 2rem;
    color: white;
}

.team-card {
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.team-image {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    overflow: hidden;
    border-radius: 50%;
}

.team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.feature-highlight {
    display: flex;
    align-items: flex-start;
    background: white;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.feature-highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.feature-icon-large {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
}

.feature-icon-large i {
    font-size: 1.5rem;
    color: white;
}

.award-card {
    background: white;
    border-radius: 15px;
    padding: 30px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.award-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.award-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.award-icon i {
    font-size: 1.5rem;
    color: #b45309;
}

/* Contact Page Styles */
.contact-card {
    background: white;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid #e5e7eb;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.contact-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.contact-icon i {
    font-size: 2rem;
    color: white;
}

.form-container {
    background: white;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.quote-form .form-control,
.quote-form .form-select {
    border-radius: 10px;
    border: 2px solid #e5e7eb;
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.quote-form .form-control:focus,
.quote-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(52, 58, 64, 0.25);
}

.service-areas .badge {
    font-size: 0.9rem;
    padding: 8px 12px;
}

/* Testimonials */
.testimonial-card {
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
}

.stars i {
    font-size: 1.2rem;
}

/* Contact Form */
.contact-form {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.form-control {
    border-radius: var(--border-radius);
    border: 2px solid #e5e7eb;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}

.form-select {
    border-radius: var(--border-radius);
    border: 2px solid #e5e7eb;
    padding: 0.75rem 1rem;
}

.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(30, 58, 138, 0.25);
}

/* Contact Info */
.contact-info i {
    background: rgba(255, 255, 255, 0.2);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

/* Footer */
.social-links a {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: var(--accent-color) !important;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 120px;
        text-align: center;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }
    
    .hero-stats {
        margin-top: 2rem;
    }
    
    .display-5 {
        font-size: 2rem;
    }
    
    .service-card,
    .testimonial-card {
        margin-bottom: 2rem;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Loading Animation */
.loading {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.loading.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1e40af;
}


.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 20px;
    right: 20px;
    background-color: #25d366;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: blink 1.5s infinite;
    transition: transform 0.3s ease;
}

.whatsapp-float img {
    width: 60px;
    height: 60px;
}

@keyframes blink {
    0% { box-shadow: 0 0 0px rgba(37, 211, 102, 0.8); }
    50% { box-shadow: 0 0 15px rgba(37, 211, 102, 1); }
    100% { box-shadow: 0 0 0px rgba(37, 211, 102, 0.8); }
}


/* Floating tab styles */
.floating-tab {
position: fixed;
right: 45px;
top: 40%;
transform: translateY(-50%) rotate(-90deg);
transform-origin: right top;
background-color: #a51017;
color: white;
padding: 10px 10px;
border-radius: 5px 5px 0 0;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
font-family: Arial, sans-serif;
font-weight: 600;
text-decoration: none;
text-transform: capitalize;
font-size: 14px;
z-index: 9999;
transition: all 0.3s ease;
}
        
.floating-tab:hover {
    background-color: #374151; /* Darker blue on hover */
    padding: 12px 12px;
}