/*
Author       : Toptoria Theme
Website      : https://www.toptoria.com/
Template Name: Velocity - App Landing Page HTML Template
Version      : 2.0 
*/

/*=============================================================
    CSS INDEX
    =============================
    01. GENERAL STYLE (Variables, Global Gradient Body, etc.)
    02. NAVBAR
    03. HOME / HERO SECTION
    04. PARTNER LOGOS (IMPROVED)
    05. ABOUT US + FEATURE
    06. COUNTER AND SUBSCRIBE
    07. SCREENSHOT SLIDER
    08. TEAM
    09. TESTIMONIAL
    10. PRICING
    11. FAQ
    12. BLOG
    13. DOWNLOAD
    14. CONTACT + MAP
    15. FOOTER
  =============================================================*/

/*
* ----------------------------------------------------------------------------------------
* 01. GENERAL STYLE & MODERN ENHANCEMENTS
* ----------------------------------------------------------------------------------------
*/
:root {
    /* Color Palette */
    --primary-color: #3b7eff;
    --secondary-color: #f54291;
    --accent-color: #7e0cf5;
    --dark-blue-footer: #343289;
    --darker-blue-footer: #2d2a87;
    --partner-logo-height: 72px; /* Normalized partner logo height */

    /* Typography */
    --heading-color: #1d293e;
    --body-text-color: #444;
    --font-primary: 'Quicksand', sans-serif;

    /* Backgrounds */
    --background-light: #f2f6fe;
    --background-white: #fff;

    /* Shadows (Subtle & Layered) */
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-large: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body {
    color: var(--body-text-color);
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    overflow-x: hidden;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color), var(--secondary-color));
    background-size: 200% 200%;
    animation: gradient-animation 15s ease infinite;
}

/* Disable gradient animation on mobile for performance */
@media (max-width: 768px) {
    body {
        animation: none;
        background: linear-gradient(135deg, var(--primary-color), var(--accent-color), var(--secondary-color));
        background-size: auto;
    }
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

html, body { height: 100%; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-primary); color: var(--heading-color); margin-top: 0; font-weight: 400; }
a { font-family: var(--font-primary); text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease; }
a:hover, a:focus { text-decoration: none; outline: none; }
p { margin: 0; }
ul, li { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; }

/*
* ----------------------------------------------------------------------------------------
*  MODERN PRELOADER STYLES (Option 1: Gradient Spinner)
* ----------------------------------------------------------------------------------------
*/

/* The main overlay with a fade-out transition */
.preloader {
    background: #1d293e; /* A dark background from your theme */
    position: fixed;
    inset: 0;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.5s ease;
}

/* Class to be added by JavaScript to hide the preloader */
.preloader-hidden {
    opacity: 0;
    pointer-events: none; /* Disables interaction when hidden */
}

/* The spinner itself */
.spinner {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    pointer-events: none; /* Prevents spinner from blocking user interactions */
    
    /* This creates the thin spinning border */
    border: 4px solid rgba(255, 255, 255, 0.2); /* A faint track */
    border-top-color: var(--secondary-color); /* The main color of the spinner */
    border-radius: 50%;
    
    animation: spinner 800ms linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Sections that sit on the gradient need a background color */
.partner-logo, .screenshot, .team, .template_faq, .blog-area, .contact_us {
    background-color: var(--background-white);
}
.counter_feature, .our_testimonial, .our_pricing {
    background-color: var(--background-light);
}

.section-title { margin-bottom: 60px; }
.section-title h1 { font-size: 36px; font-weight: 700; text-transform: capitalize; }
.section-title p { padding: 0 10px; width: 70%; margin: 15px auto 0; }
@media (max-width: 768px) { .section-title h1 { font-size: 28px; } .section-title p { width: 90%; } }

.topcontrol { background: var(--secondary-color); color: var(--background-white); width: 50px; height: 50px; line-height: 50px; border-radius: 50%; box-shadow: var(--shadow-medium); text-align: center; position: fixed; right: 15px; bottom: 15px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; will-change: transform; }
.topcontrol:hover { background: var(--primary-color); transform: translateY(-5px); }

@media (max-width: 768px) {
    .topcontrol {
        transition: background-color 0.2s ease;
    }
}

/*
* ----------------------------------------------------------------------------------------
* 02. NAVBAR
* ----------------------------------------------------------------------------------------
*/
.navbar-brand img { width: 140px; height: auto; }
.navbar-custom { padding: 20px 0; width: 100%; z-index: 999; transition: background-color 0.4s ease-in-out, padding 0.4s ease-in-out; }
.navbar-custom .navbar-toggler { color: var(--background-white); font-size: 30px; padding: 0; }
.navbar-custom .navbar-nav li a { color: var(--background-white) !important; font-size: 16px; margin: 0 10px; transition: color 0.3s ease; font-weight: 600; }
.navbar-custom .navbar-nav li a:hover, .navbar-custom .navbar-nav li a.active { color: var(--background-white) !important; }
.navbar-custom.nav-sticky { background-color: var(--accent-color) !important; padding: 15px 0; box-shadow: var(--shadow-medium); }
@media (max-width: 991px) { .navbar-custom { background-color: var(--accent-color); padding: 10px 0 !important; } .navbar-collapse { background-color: var(--accent-color); padding: 15px; border-radius: 5px; margin-top: 10px; } }
@media (max-width: 768px) {
    .navbar-custom .navbar-nav li a {
        transition: color 0.2s ease;
    }
}

/*
* ----------------------------------------------------------------------------------------
* 04. HOME / HERO SECTION
* ----------------------------------------------------------------------------------------
*/
.home_bg { 
    min-height: 100vh; 
    padding: 140px 0 120px; 
    display: flex; 
    align-items: center; 
}

.hero-title { 
    font-size: 3.5rem; 
    font-weight: 700; 
    line-height: 1.25; 
    margin-bottom: 24px; 
    color: var(--background-white); 
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); 
}

.hero-subtitle { 
    font-size: 1.15rem; 
    opacity: 0.9; 
    max-width: 520px; 
    margin-bottom: 40px; 
    color: var(--background-white); 
}

.hero-buttons a { 
    margin: 5px; 
}

.btn-primary-gradient, .btn-secondary-gradient { 
    display: inline-block; 
    padding: 14px 44px; 
    font-weight: 600; 
    border-radius: 50px; 
    color: var(--background-white); 
    text-decoration: none; 
    transition: all 0.3s ease; 
    border: none; 
    box-shadow: var(--shadow-large); 
    letter-spacing: 0.5px; 
}

.btn-primary-gradient { 
    background: var(--primary-color); 
}

.btn-primary-gradient:hover { 
    background: var(--secondary-color); 
    box-shadow: 0 10px 25px rgba(245, 66, 145, 0.4); 
    transform: translateY(-4px); 
}

.btn-secondary-gradient { 
    background: var(--secondary-color); 
}

.btn-secondary-gradient:hover { 
    background: var(--primary-color); 
    box-shadow: 0 10px 25px rgba(59, 126, 255, 0.4); 
    transform: translateY(-4px); 
}

.hero-image {
    max-width: 100%;
    width: auto;
    max-height: 75vh; /* MODIFIED: This is the fix */
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

@media (max-width: 992px) { 
    .hero-title { font-size: 2.8rem; } 
}

@media (max-width: 768px) { 
    .home_bg { padding-top: 180px !important; padding-bottom: 80px; text-align: center; min-height: auto; } 
    .hero-title { font-size: 2rem; margin-bottom: 16px; }
    .hero-subtitle { margin-left: auto; margin-right: auto; font-size: 1rem; }
    .hero-image-wrapper { margin-top: 40px; }
}

@media (max-width: 576px) {
    .home_bg { padding-top: 150px !important; padding-bottom: 60px; }
    .hero-title { font-size: 1.7rem; line-height: 1.3; }
    .hero-subtitle { font-size: 0.95rem; }
    .hero-buttons a { margin: 8px 0; display: block; }
}
/*
* ----------------------------------------------------------------------------------------
* 04. PARTNER LOGOS (AUTO-SCROLLING MARQUEE)
* ----------------------------------------------------------------------------------------
*/

.partner-logo { 
    padding: 60px 0; 
    border-bottom: 1px solid #f0f0f0ff; 
}

/*
* ----------------------------------------------------------------------------------------
*  Sleek Partner Title Styling
* ----------------------------------------------------------------------------------------
*/
.partner-title {
    display: flex; /* Enables the line effect */
    align-items: center; /* Vertically centers the text and lines */
    text-align: center;
    color: #061174ff; /* A softer, more modern gray */
    margin: 0 auto 40px auto; /* Center the whole element and provide bottom margin */
    max-width: 80%; /* Prevents lines from being excessively long on wide screens */
}

/* Creates the lines on either side of the text */
.partner-title::before,
.partner-title::after {
    content: ''; /* Required for pseudo-elements */
    flex-grow: 1; /* This is the magic: makes the lines fill available space */
    height: 1px; /* A thin, sleek line */
    background: #e0e0e0; /* A very light gray for the line */
}

/* Styles the text itself for a refined, modern look */
.partner-title span {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px; /* Wider spacing feels more premium */
    font-size: 13px; /* Slightly smaller for a more subtle feel */
    padding: 0 20px; /* Space between the text and the lines */
    flex-shrink: 0; /* Prevents the text itself from shrinking */
}

/* Keyframes for the scrolling animation */
@keyframes scrollAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Moves the track left by the width of one full set of logos */
}

/* The main container that acts as a viewport */
.partner-slider {
    overflow: hidden; /* Crucial: Hides the logos outside the container */
    position: relative;
    /* Optional: Add a soft fade on the edges */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
    mask-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0));
}

/* The track that contains both sets of logos and gets animated */
.partner-track {
    display: flex;
    align-items: center;
    /* Content-driven width so translateX(-50%) moves exactly one duplicated set
       (remove the hardcoded width which caused clipping when logo widths vary) */
    width: max-content;
    animation: scrollAnimation 30s linear infinite;
    gap: 40px;
}

/* Pause the animation on hover for better UX */
.partner-slider:hover .partner-track {
    animation-play-state: paused;
}

.partner-track a { 
    display: block;
    flex-shrink: 0; /* Prevents logos from shrinking */
}

.partner-track img {
    /* Use a consistent height while preserving aspect ratio */
    height: var(--partner-logo-height);
    width: auto;
    max-width: 160px; /* Prevent extremely wide logos from overflowing */
    object-fit: contain;
    display: block; /* removes inline gaps and centers within anchors when used with margin auto */
    filter: grayscale(100%) opacity(0.75);
    transition: transform 0.3s ease, filter 0.3s ease;
}

.partner-track img:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.05);
}

/* Responsive reductions so logos remain balanced on smaller screens */
@media (max-width: 992px) {
    .partner-track img { height: 56px; max-width: 120px; }
    .partner-track { gap: 28px; }
}

@media (max-width: 576px) {
    .partner-track img { height: 44px; max-width: 90px; }
    .partner-track { gap: 16px; }
}

/*
* ----------------------------------------------------------------------------------------
* 05. ABOUT US + FEATURE
* ----------------------------------------------------------------------------------------
*/
.about-us.gradient-bg { background: linear-gradient(135deg, var(--primary-color), var(--accent-color), var(--secondary-color)); }
.about-us { position: relative; }
.about-title { color: var(--background-white); font-size: 28px; font-weight: 600; line-height: 1.4; margin-bottom: 40px; }
.about_feature { background: var(--background-white); height: 300px; margin: 20px 0; padding: 20px; transition: all 0.4s ease; border-radius: 10px; box-shadow: var(--shadow-medium); }
.about_feature:hover { box-shadow: var(--shadow-large); transform: translateY(-10px); }
.about_feature:hover { background: var(--primary-color); }
.about_feature.about_feature2:hover { background: var(--secondary-color); }
.about_feature.about_feature3:hover { background: var(--accent-color); }
.about_feature.about_feature4:hover { background: var(--primary-color); }
.icon { border-radius: 50%; color: var(--background-white); display: inline-block; font-size: 24px; height: 60px; line-height: 60px; position: relative; text-align: center; top: 50px; transition: all 0.3s ease; width: 60px; }
.icon_bg { background: var(--primary-color); } .icon_bg2 { background: var(--secondary-color); } .icon_bg3 { background: var(--accent-color); } .icon_bg4 { background: var(--primary-color); }
.about_feature h4 { position: relative; top: 90px; transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; font-weight: 700; font-size: 18px; }
.about_feature p { color: var(--background-white); opacity: 0; transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 0s; }
.about_feature:hover .icon { top: -50px; } .about_feature:hover h4 { color: var(--background-white); top: -20px; } .about_feature:hover p { opacity: 1; }

/*
* ----------------------------------------------------------------------------------------
* 07. COUNTER AND NEWSLETTER (MODERN REFACTOR)
* ----------------------------------------------------------------------------------------
*/

/* Section Polish: Add a subtle background texture */
.counter_feature {
    background-color: var(--background-light);
    background-image: radial-gradient(circle, #f5f8ff, var(--background-light));
}

.counter_img img {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.counter_feature_mb {
    margin-bottom: 80px;
}

/* Sleek Counter Card Styling */
.single_counter {
    background: var(--background-white);
    padding: 30px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-medium);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.single_counter:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-large);
}

.single_counter span {
    color: var(--background-white);
    background: var(--primary-color);
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 24px;
    border-radius: 50%;
    margin: 0 auto 20px;
    display: block;
    transition: background-color 0.3s ease;
}
.single_counter:hover span {
    background: var(--secondary-color);
}
.single_counter h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--heading-color);
}
.single_counter h3 {
    font-size: 1rem;
    font-weight: 500;
    color: var(--body-text-color);
}

/*
* ----------------------------------------------------------------------------------------
*  Sleek Newsletter Form Styling (with Gradient Border)
* ----------------------------------------------------------------------------------------
*/
.newsletter-wrapper {
    margin-top: 40px;
}
.newsletter_title {
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 30px;
}

/* MODIFIED: This is now the outer container that will have the gradient */
.newsletter-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 3px; /* This padding creates the border thickness */
    border-radius: 50px; /* Fully rounded ends */
    
    /* THE GRADIENT BORDER EFFECT */
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    
    box-shadow: var(--shadow-large);
    transition: transform 0.3s ease;
}

/* ADDED: A fun hover effect for the entire form */
.newsletter-form:hover {
    transform: scale(1.02);
}

/* NEW: This is the inner container that holds the input and button */
.subscribe {
    display: flex;
    align-items: center;
    background: var(--background-white); /* The white background "inside" the border */
    border-radius: 47px; /* Slightly smaller than the parent to show the border */
    padding: 5px;
}

.subscribe__input {
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 10px 25px;
    font-size: 1rem;
    color: var(--body-text-color);
    outline: none;
}
.subscribe__input::placeholder {
    color: #aaa;
}

.subscribe__btn {
    flex-shrink: 0;
    background: var(--primary-color);
    color: var(--background-white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.subscribe__btn:hover {
    background: var(--secondary-color);
    transform: scale(1.1);
}

/*
* ----------------------------------------------------------------------------------------
* 07. SCREENSHOT SLIDER
* ----------------------------------------------------------------------------------------
*/
.slick-slide { margin: 0 20px; transition: all ease-in-out .3s; opacity: .2; }
.slick-slide img { width: 100%; }
.slick-prev:before, .slick-next:before { color: var(--primary-color); }
.slick-active { opacity: .5; }
.slick-current { opacity: 1; }

/* Ensure screenshot slider images are centered and keep aspect ratio */
.center.slider .slick-slide { display: flex; align-items: center; justify-content: center; }
.center.slider .slick-slide img { max-height: 65vh; width: auto; display: block; margin: 0 auto; object-fit: contain; }
@media (max-width: 992px) {
    .center.slider .slick-slide img { max-height: 50vh; }
}
@media (max-width: 576px) {
    .center.slider .slick-slide img { max-height: 40vh; }
}

/*
* ----------------------------------------------------------------------------------------
* 08. TEAM
* ----------------------------------------------------------------------------------------
*/
.single_team { position: relative; overflow: hidden; box-shadow: var(--shadow-soft); border-radius: 3px; }
.team-hover { position: absolute; width: 100%; bottom: -100%; padding: 30px; background: var(--primary-color); transition: all 0.3s ease-in-out; text-align: center; }
.single_team:hover .team-hover { bottom: 0; }
.single_team h5, .single_team span { color: var(--background-white); }
.team-name { background: var(--primary-color); color: var(--background-white); position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 20px; text-align: center; }
.social { display: flex; justify-content: center; gap: 15px; margin-top: 15px; }
.social li a { color: var(--background-white); font-size: 16px; }
.social li a:hover { color: var(--secondary-color); }

/*
* ----------------------------------------------------------------------------------------
* 10. TESTIMONIAL (DEFINITIVE FIX & MODERN STYLING)
* ----------------------------------------------------------------------------------------
*/

/* Set a relative context for positioning the nav arrows */
.our_testimonial .container {
    position: relative;
}

/* Set the initial state of the carousel to hidden for a smooth fade-in */
#testimonial-slider {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out;
}

/* The KEY FIX: When the JS adds the .owl-loaded class, make it visible */
#testimonial-slider.owl-loaded {
    opacity: 1;
    visibility: visible;
}

/* Individual testimonial card styling */
.single_testimonials {
    padding: 40px 35px;
    border-radius: 10px;
    margin: 15px; /* Added margin for spacing */
    background: var(--background-white);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-medium);
    text-align: left;
}
.single_testimonials:hover {
    background: var(--primary-color);
    color: var(--background-white);
    transform: translateY(-8px);
    box-shadow: var(--shadow-large);
}

.single_testimonials_img {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
.single_testimonials:hover .single_testimonials_img {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.single_testimonials_img img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 4px solid var(--background-white);
    object-fit: cover;
    flex-shrink: 0;
}
.single_testimonials_img h4 {
    font-weight: 700;
    font-size: 1.1rem;
    margin: 0;
}
.single_testimonials_img .fa-star {
    color: #ffcc00;
    font-size: 0.8rem;
}
.single_testimonials p {
    line-height: 1.7;
}
.single_testimonials:hover h4, .single_testimonials:hover p {
    color: var(--background-white);
}

/* Ensure testimonial slides are centered and equal-height where possible */
.testimonial-slider .slick-slide { display: flex; align-items: stretch; }
.testimonial-slider .single_testimonials { width: 100%; display: flex; flex-direction: column; }
.testimonial-slider .single_testimonials p { margin-top: 15px; flex-grow: 1; }

@media (max-width: 768px) {
    .single_testimonials { padding: 24px; }
    .single_testimonials_img img { width: 56px; height: 56px; }
}

/* Modern Styling for Owl Carousel Navigation Arrows */
#testimonial-slider .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Allows clicks on cards */
}
#testimonial-slider .owl-nav button.owl-prev,
#testimonial-slider .owl-nav button.owl-next {
    background: var(--background-white) !important;
    color: var(--primary-color) !important;
    width: 45px;
    height: 45px;
    font-size: 20px;
    line-height: 45px;
    border-radius: 50%;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
    pointer-events: all; /* Makes the buttons clickable */
    position: absolute;
}
#testimonial-slider .owl-nav button.owl-prev {
    left: -50px;
}
#testimonial-slider .owl-nav button.owl-next {
    right: -50px;
}
#testimonial-slider .owl-nav button.owl-prev:hover,
#testimonial-slider .owl-nav button.owl-next:hover {
    background: var(--primary-color) !important;
    color: var(--background-white) !important;
    transform: scale(1.1);
}

/* Modern Styling for Owl Carousel Dots */
#testimonial-slider .owl-dots {
    text-align: center;
    margin-top: 40px;
}
#testimonial-slider .owl-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc !important;
    border-radius: 50%;
    margin: 0 5px;
    transition: all 0.3s ease;
}
#testimonial-slider .owl-dot.active {
    background: var(--primary-color) !important;
    transform: scale(1.5);
}
/*
* ----------------------------------------------------------------------------------------
* 10. PRICING
* ----------------------------------------------------------------------------------------
*/
.pricingTable { background: var(--background-white); padding: 50px 15px; position: relative; text-align: center; transition: all 0.3s ease-in-out; box-shadow: var(--shadow-soft); }
.pricingTable:hover { transform: translateY(-10px); box-shadow: var(--shadow-large); }
.pricingTablebg { background: var(--primary-color); color: var(--background-white); }
.pricingTable .icon { width: 69px; height: 69px; line-height: 69px; border-radius: 50%; background: var(--background-white); box-shadow: var(--shadow-soft); margin: 0 auto; font-size: 25px; color: var(--primary-color); position: absolute; top: -34px; left: 0; right: 0; }
.pricingTable .price-value { font-size: 30px; font-weight: 700; background: var(--primary-color); margin-top: 20px; display: inline-block; border-radius: 50%; width: 100px; height: 100px; line-height: 100px; color: var(--background-white); }
.pricingTablebg .price-value { background: var(--background-white); color: var(--primary-color); }
.pricingTable .pricing-content { margin: 20px 0; }
.btn-price-bg { background: var(--primary-color); border: 2px solid var(--primary-color); border-radius: 50px; color: var(--background-white); padding: 10px 45px; font-weight: 600; transition: all 0.3s ease; }
.pricingTable:hover .btn-price-bg { background: var(--secondary-color); border-color: var(--secondary-color); }
.pricingTablebg .btn-price-bg { background: var(--background-white); color: var(--primary-color); }

/*
* ----------------------------------------------------------------------------------------
* 11. FAQ
* ----------------------------------------------------------------------------------------
*/
.faq_desc { margin-bottom: 30px; }
.faq_desc h2 { font-weight: 700; font-size: 20px; margin-bottom: 15px; }


/*
* ----------------------------------------------------------------------------------------
* 12. BLOG (COMPLETE & FINAL STYLING FOR ALL BLOG PAGES)
* ----------------------------------------------------------------------------------------
*/

/* --- A. Global Blog Page Settings --- */
.blog-page {
    background: var(--background-light); /* Sets the off-white background for the entire page */
}

/* --- B. Reusable "Blog Card" Container (for blog-post.html) --- */
.blog-card {
    background: var(--background-white);
    padding: 40px;
    border-radius: 12px;
    margin-bottom: 40px;
    box-shadow: var(--shadow-soft);
    border: 1px solid #e9e9e9;
}
@media (max-width: 768px) {
    .blog-card { padding: 25px; }
}

/* --- C. Single Post Page Content Styling --- */
.blog-card .post-featured-image {
    border-radius: 8px;
    margin: -40px -40px 30px -40px;
    width: calc(100% + 80px);
    max-width: none;
}
.blog-card h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--heading-color);
}
.blog-card p {
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
}
.blog-card blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 25px;
    margin: 30px 0;
    font-style: italic;
    font-size: 1.15rem;
    color: #777;
}

/* --- D. Author Box & Comments Styling --- */
.author-box {
    display: flex;
    align-items: center;
    gap: 25px;
}
.author-avatar { width: 90px; height: 90px; border-radius: 50%; }
.author-info span { font-size: 0.9rem; color: #999; font-weight: 500; }
.author-info h4 { font-weight: 700; margin-bottom: 10px; }
.section-title-small { font-size: 1.5rem; font-weight: 700; margin-bottom: 25px; }
.comment-item {
    display: flex;
    gap: 20px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #f0f0f0;
}
.comment-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.comment-avatar { width: 60px; height: 60px; border-radius: 50%; }
.comment-content h5 { font-weight: 600; margin-bottom: 5px; }
.comment-content h5 small { color: #999; font-weight: 400; margin-left: 10px; font-size: 0.8rem; }
.reply-link { font-weight: 600; color: var(--primary-color); font-size: 0.9rem; }
.reply-link:hover { color: var(--secondary-color); }

/* --- E. Redesigned "Add a Comment" Form --- */
.comment-form .form-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--heading-color);
    margin-bottom: 8px;
}
.comment-form .form-control {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    height: 55px;
    padding: 10px 20px;
    transition: all 0.3s ease;
}
.comment-form textarea.form-control { height: auto; }
.comment-form .form-control:focus {
    background: var(--background-white);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 126, 255, 0.15);
}
.comment-form button.btn-primary-gradient { padding: 15px 40px; border: none; }


/*
* ----------------------------------------------------------------------------------------
* 12b. SIDEBAR STYLING (CORRECTED & INCLUDED)
* ----------------------------------------------------------------------------------------
*/
.sidebar-widget {
    margin-bottom: 30px;
    background: var(--background-white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    border: 1px solid #e9e9e9;
}
.blog_sidebar_title {
    color: var(--heading-color);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.blog_search input {
    background: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    transition: all 0.3s ease;
    height: 50px;
    width: 100%;
    padding: 0 15px;
}

.advertisement_post, .video_post{
    margin-bottom: 30px;
	background: #fff;
	padding: 30px 30px;
	border-radius: 3px;
	border-top: 3px solid #3b7eff;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.06);
    }

.blog_search input:focus { border-color: var(--primary-color); }
.latest-posts li {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.latest-posts li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.latest-posts a {
    color: var(--body-text-color);
    font-weight: 500;
    line-height: 1.5;
}
.latest-posts a:hover { color: var(--primary-color); }
.category-list li a {
    color: var(--body-text-color);
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 0;
    transition: all 0.3s ease;
}
.category-list li a:hover { color: var(--primary-color); transform: translateX(5px); }
.tag-cloud a {
    display: inline-block;
    background: #f0f0f0;
    border-radius: 5px;
    color: var(--body-text-color);
    font-size: 13px;
    font-weight: 500;
    margin: 0 6px 6px 0;
    padding: 8px 15px;
    transition: all 0.3s ease;
}
.tag-cloud a:hover {
    background: var(--primary-color);
    color: #fff;
}

/*
* ----------------------------------------------------------------------------------------
* 13. DOWNLOAD
* ----------------------------------------------------------------------------------------
*/

/* Download section background */
.download_area {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color), var(--secondary-color));
    background-size: 200% 200%;
    animation: gradient-animation 15s ease infinite;
    padding: 80px 0 !important; /* Override section-padding */
}

/* Download title section */
.single_download_title {
    margin-bottom: 40px;
}

.single_download_title h1 {
    font-weight: 700;
    font-size: 2.8rem;
    color: var(--background-white);
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.single_download_title p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 500px;
}

/* Download buttons container */
.single_download {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

/* Download button link */
.single_download a {
    background: var(--background-white);
    color: var(--heading-color);
    padding: 18px 30px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: 500;
    min-width: 190px;
}

.single_download a:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    background: var(--secondary-color);
    color: var(--background-white);
}

.single_download a:hover i {
    color: var(--background-white);
}

/* Icon styling */
.single_download a i {
    font-size: 28px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

/* Text content in button */
.single_download h5,
.single_download h4 {
    margin: 0;
    text-align: left;
    line-height: 1.3;
}

.single_download h5 {
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.single_download h4 {
    font-weight: 700;
    font-size: 1rem;
    margin-top: 2px;
}

/* Download image */
.single_download_img {
    position: relative;
}

.single_download_img img {
    max-width: 100%;
    height: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.single_download_img:hover img {
    transform: translateY(-10px);
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .single_download_title h1 {
        font-size: 2rem;
    }

    .single_download {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .download_area {
        text-align: center;
    }

    .single_download_title {
        margin-top: 0;
    }

    .single_download {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .single_download a {
        justify-content: center;
        min-width: unset;
    }

    .single_download_img {
        padding-top: 40px;
    }

    .single_download_img img {
        max-width: 80%;
        margin: 0 auto;
    }
}

/*
* ----------------------------------------------------------------------------------------
* 14. CONTACT (MODERN REFACTOR)
* ----------------------------------------------------------------------------------------
*/

/* New Gradient Text Style for the Title */
.gradient-text {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Chrome, Safari, Edge (Blink) */
    color: transparent;                    /* Fallback for browsers that respect background-clip:text without webkit text-fill */
    display: inline-block; /* Necessary for gradient to apply correctly */
}

/* Gradient border wrapper specific to the form */
.form-wrapper {
    border-radius: 15px; /* Match the inner card's radius */
    padding: 3px;
}

/* The main form container */
.contact {
    background: var(--background-white);
    padding: 40px 50px;
    border-radius: 12px;
    box-shadow: none; /* Shadow is now on the wrapper */
    margin-bottom: 0; /* Remove old negative margin */
    z-index: auto;
    position: static;
}

@media (max-width: 768px) {
    .contact {
        padding: 30px 25px;
    }
}

/* Modern styling for form fields */
.contact .form-control {
    background: var(--background-light);
    border: 2px solid transparent; /* Use border for focus state */
    border-radius: 8px;
    height: 55px;
    padding: 10px 20px;
    transition: all 0.3s ease;
}
.contact textarea.form-control {
    height: auto;
}
.contact .form-control:focus {
    background: var(--background-white);
    border-color: var(--primary-color);
    box-shadow: none;
}

/* Styling for the new submit button */
.contact button.btn-primary-gradient {
    width: 100%;
    padding: 15px 30px;
    font-size: 1rem;
    letter-spacing: 1px;
}

/*
* ----------------------------------------------------------------------------------------
* 14b. MAP (Separated for clarity)
* ----------------------------------------------------------------------------------------
*/
.map_area {
    /* The contact form no longer sits "on top" of the map, so we can remove the negative margin */
    margin-top: 0;
}
.map {
    line-height: 0; /* Removes any extra space below the iframe */
}
.map iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/*
* ----------------------------------------------------------------------------------------
* 15. FOOTER (MODERN REFACTOR)
* ----------------------------------------------------------------------------------------
*/

/* --- Top Footer Section (Widgets) --- */
.footer-top {
    background: var(--dark-blue-footer);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
.footer_logo {
    margin-bottom: 30px;
}
.footer_logo a {
    display: inline-block;
    margin-bottom: 15px;
}
.footer_logo img {
    max-width: 140px;
    height: auto;
    display: block;
}
.footer_logo p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
    margin: 0;
    font-size: 0.95rem;
}

/* Social Icons Styling */
.social_profile {
    margin-top: 25px;
}
.social_profile ul {
    display: flex;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}
.social_profile ul li {
    margin: 0;
    padding: 0;
}
.social_profile ul li a {
    color: var(--background-white);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
    text-decoration: none;
}
.social_profile ul li a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.15) translateY(-3px);
}

/* Footer Column Titles */
.single_footer h4 {
    color: var(--background-white);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 25px;
    padding-bottom: 12px;
    position: relative;
    display: inline-block;
    letter-spacing: 0.5px;
}
.single_footer h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 2px;
}

/* Footer Lists and Links */
.single_footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.single_footer ul li {
    margin-bottom: 12px;
    padding: 0;
}
.single_footer ul li:last-child {
    margin-bottom: 0;
}
.single_footer ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.single_footer ul li a::before {
    content: '\f105'; /* FontAwesome right angle icon */
    font-family: 'FontAwesome';
    font-size: 0.8rem;
    color: var(--primary-color);
    opacity: 0.6;
    transition: all 0.3s ease;
}
.single_footer ul li a:hover {
    color: var(--background-white);
    transform: translateX(6px);
}
.single_footer ul li a:hover::before {
    color: var(--secondary-color);
    opacity: 1;
}

/* Footer Address Block */
.single_footer p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

/* --- Bottom Footer Section (Copyright) --- */
.footer {
    background: var(--darker-blue-footer);
    padding: 40px 0 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.copyright {
    color: rgba(255, 254, 254, 0.65);
    font-size: 0.95rem;
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Footer Responsive Design */
@media (max-width: 768px) {
    .footer-top {
        padding: 60px 0 40px !important;
    }
    .single_footer {
        margin-bottom: 40px;
    }
    .single_footer:last-child {
        margin-bottom: 0;
    }
    .social_profile {
        margin-top: 20px;
    }
    .social_profile ul {
        gap: 10px;
    }
    .single_footer h4 {
        font-size: 1rem;
        margin-bottom: 20px;
        padding-bottom: 10px;
    }
    .footer {
        text-align: center;
    }
}
}

.footer_logo img {
    max-width: 140px;
    margin-bottom: 20px;
}
.footer_logo p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

/* Social Icons Styling */
.social_profile {
    margin-top: 25px;
}
.social_profile ul {
    display: flex;
    gap: 15px; /* Space between icons */
}
.social_profile ul li a {
    color: var(--background-white);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
}
.social_profile ul li a:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.1);
}

/* Footer Column Titles */
.single_footer h4 {
    color: var(--background-white);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 25px;
    padding-bottom: 10px;
    position: relative;
    display: inline-block; /* Allows underline to fit content */
}
/* Subtle gradient underline for a sleek look */
.single_footer h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}

/* Footer Lists and Links */
.single_footer ul li {
    margin-bottom: 12px;
}
.single_footer ul li a {
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}
.single_footer ul li a::before {
    content: '\f105'; /* FontAwesome right angle icon */
    font-family: 'FontAwesome';
    margin-right: 10px;
    transition: all 0.3s ease;
}
.single_footer ul li a:hover {
    color: var(--background-white);
    transform: translateX(5px);
}
.single_footer ul li a:hover::before {
    color: var(--primary-color);
}

/* Footer Address Block */
.single_footer p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.8;
}

/* --- Bottom Footer Section (Copyright) --- */
.footer {
    background: var(--darker-blue-footer);
    padding: 25px 0;
}
.copyright {
    color: rgba(255, 254, 254, 0.6);
    font-size: 0.9rem;
}

/*
* ----------------------------------------------------------------------------------------
*  16. THANK YOU PAGE STYLES
* ----------------------------------------------------------------------------------------
*/

/* Main container to center the content vertically */
.thank-you-page-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Takes up the full height of the viewport */
    padding: 120px 0; /* Adds padding for navbar and footer space */
}

/* The modern white card for the message */
.thank-you-card {
    background: var(--background-white);
    padding: 50px 60px;
    border-radius: 10px;
    box-shadow: var(--shadow-large);
}

/* The success icon (checkmark) */
.success-icon {
    font-size: 80px;
    color: #35ac39; /* A success green color */
    margin-bottom: 20px;
}

/* Styling for the text inside the card */
.thank-you-card h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 15px;
}

.thank-you-card h3 {
    font-size: 1.2rem;
    color: var(--body-text-color);
    margin-bottom: 40px;
    line-height: 1.6;
}

/* The "Back to Home" button now uses the main site's gradient button style */
.thank-you-card .btn-primary-gradient {
    padding: 14px 40px; /* Adjust padding if needed */
}

/*
* ----------------------------------------------------------------------------------------
*  17. FINAL POLISH & FIXES
* ----------------------------------------------------------------------------------------
*/

/* Fix 1: Consistent Section Spacing */
/* This rule ensures every major section has a clean, spacious layout. */
body > section, .download_area {
    padding-top: 100px;
    padding-bottom: 100px;
}

/* We don't want extra padding on the very first hero section or the footer */
body > .home_bg, body > .footer-top, .footer {
    padding-top: 0;
    padding-bottom: 0;
}
/* Restore original padding for specific sections if needed */
.home_bg {
    padding: 140px 0 120px;
}
.footer-top {
    padding: 80px 0;
}

/*
* ----------------------------------------------------------------------------------------
* 12. BLOG SECTION COMPLETE STYLING
* ----------------------------------------------------------------------------------------
*/

/* Main blog card container */
.single_blog {
    background: var(--background-white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make cards equal height */
}

.single_blog:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-large);
}

/* Blog image container */
.blog-img {
    position: relative;
    overflow: hidden;
    height: 220px;
}

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

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

/* Blog content wrapper */
.blog-content {
    padding: 25px 20px;
    flex-grow: 1; /* Takes remaining space, pushes meta to bottom */
    display: flex;
    flex-direction: column;
}

/* Blog category tag */
.blog-category {
    display: inline-block;
    background: var(--primary-color);
    color: var(--background-white);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    width: fit-content;
    transition: all 0.3s ease;
}

.single_blog:hover .blog-category {
    background: var(--secondary-color);
}

/* Blog post title */
.blog-content h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 15px;
    line-height: 1.4;
}

.blog-content h2 a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-content h2 a:hover {
    color: var(--primary-color);
}

.single_blog:hover .blog-content h2 a {
    color: var(--primary-color);
}

/* Blog metadata (date & comments) */
.blog-meta {
    margin-top: auto; /* Push to bottom */
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--body-text-color);
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-meta i {
    color: var(--primary-color);
}

.blog-meta a {
    color: var(--body-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-meta a:hover {
    color: var(--primary-color);
}

/* Fix 2: Sleeker Blog Titles on Homepage */
.single_blog h2 {
    font-size: 1.1rem; /* Slightly smaller, more modern size */
    line-height: 1.4;   /* Improved readability for wrapped text */
    min-height: auto;   /* Remove fixed height for flexibility */
    display: block;
    font-weight: 600;
}

/* Fix 3: Owl Carousel Navigation Arrow Styling (for the fixed reviews) */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    background: var(--background-white) !important;
    color: var(--primary-color) !important;
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 50%;
    box-shadow: var(--shadow-medium);
    transition: all 0.3s ease;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background: var(--primary-color) !important;
    color: var(--background-white) !important;
    transform: scale(1.1);
}

/*
* ----------------------------------------------------------------------------------------
*  19. GLOBAL GRADIENT BORDER EFFECT
* ----------------------------------------------------------------------------------------
*/
/* -- A. Reusable Gradient Wrapper Class -- */
.gradient-border-wrapper {
    padding: 3px; /* Controls the thickness of the border */
    border-radius: 12px; /* Slightly larger than the inner card's radius */
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    box-shadow: var(--shadow-medium);
    transition: all 0.4s ease;
    height: 100%; /* Ensures wrapper takes full height of its column */
}
.gradient-border-wrapper:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--shadow-large);
}

/* For Pricing Cards */
.pricingTable {
    box-shadow: none;
    margin-top: 0;
    border-radius: 8px;
    height: 100%;
}
.gradient-border-wrapper {
    margin-bottom: 30px; /* Re-apply margin to the wrapper for spacing */
}

/* -- C. Special Gradient for Featured Pricing Plan -- */
.gradient-border-wrapper.featured {
    background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
}

/* For Team Cards */
.single_team {
    box-shadow: none;
    border-radius: 10px;
    height: 100%;
}
.gradient-border-wrapper .single_team {
    overflow: hidden; /* This is important for the border-radius to apply correctly */
}

/* For Testimonial Slider */
/* This targets the individual slides generated by Slick Slider */
.testimonial-slider .slick-slide {
    padding: 3px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    border-radius: 12px;
    margin: 15px;
    transition: transform 0.3s ease;
}
.testimonial-slider .slick-slide:hover {
    transform: translateY(-5px);
}
.testimonial-slider .single_testimonials {
    margin: 0;
    box-shadow: none;
}

/*
* ----------------------------------------------------------------------------------------
*  20. BLOG PAGE STYLES (blog.html)
* ----------------------------------------------------------------------------------------
*/

/* Section top styling */
.section-top {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color), var(--secondary-color));
    background-size: 200% 200%;
    animation: gradient-animation 15s ease infinite;
    padding: 120px 0 80px;
    text-align: center;
    color: var(--background-white);
}

.section-top-title h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--background-white);
    margin-bottom: 15px;
}

.section-top-title p {
    font-size: 1rem;
    opacity: 0.9;
    color: var(--background-white);
}

/* Blog page background */
.blog-page {
    background: var(--background-light);
}

/* Individual blog post card */
.post-slide-blog {
    background: var(--background-white);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.post-slide-blog:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-large);
}

/* Blog post image */
.post-slide-blog img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.post-slide-blog:hover img {
    transform: scale(1.05);
}

/* Blog post content wrapper */
.post-content {
    padding: 30px 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Blog post title */
.post-title-blog {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 15px;
    line-height: 1.4;
}

.post-title-blog a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-title-blog a:hover {
    color: var(--primary-color);
}

/* Post metadata */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
    color: var(--body-text-color);
}

.post-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-meta i {
    color: var(--primary-color);
}

.post-meta a {
    color: var(--body-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.post-meta a:hover {
    color: var(--primary-color);
}

/* Post description */
.post-description-blog {
    color: var(--body-text-color);
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
}

/* Read more button */
.blog_btn-blog {
    display: inline-block;
    background: var(--primary-color);
    color: var(--background-white);
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    width: fit-content;
}

.blog_btn-blog:hover {
    background: var(--secondary-color);
    transform: translateX(5px);
}

/* Pagination styling */
.pagination-container {
    display: flex;
    justify-content: center;
    margin: 40px 0;
}

.blog_pagination {
    display: flex;
    gap: 5px;
}

.blog_pagination .page-item {
    margin: 0;
}

.blog_pagination .page-link {
    color: var(--primary-color);
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 12px;
    transition: all 0.3s ease;
}

.blog_pagination .page-link:hover {
    background: var(--primary-color);
    color: var(--background-white);
    border-color: var(--primary-color);
}

.blog_pagination .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--background-white);
}

.blog_pagination .page-item.disabled .page-link {
    color: #ccc;
    cursor: not-allowed;
}

/* Sidebar */
.sidebar {
    margin-top: 30px;
}

@media (max-width: 991px) {
    .sidebar {
        margin-top: 50px;
    }
}

/* Sidebar widget */
.sidebar-widget {
    background: var(--background-white);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-soft);
}

/* Sidebar title */
.blog_sidebar_title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--primary-color);
}

/* Search input */
.blog_search input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.blog_search input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 126, 255, 0.1);
}

/* Latest posts list */
.latest-posts {
    list-style: none;
    padding: 0;
}

.latest-posts li {
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.latest-posts li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.latest-posts a {
    color: var(--body-text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}

.latest-posts a:hover {
    color: var(--primary-color);
    padding-left: 8px;
}

/* Category list */
.category-list {
    list-style: none;
    padding: 0;
}

.category-list li {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.category-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.category-list a {
    color: var(--body-text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    display: block;
    font-weight: 500;
}

.category-list a:hover {
    color: var(--primary-color);
    transform: translateX(8px);
}

/* Tag cloud */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-cloud a {
    display: inline-block;
    background: #f0f0f0;
    color: var(--body-text-color);
    padding: 8px 15px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tag-cloud a:hover {
    background: var(--primary-color);
    color: var(--background-white);
    transform: scale(1.05);
}