/* CSS Variables for easy theme management */
    :root {
      --primary-blue: #3b82f6; /* A slightly brighter, more vibrant blue */
      --dark-blue: #1d4ed8;
      --accent-blue: #60a5fa; /* Lighter blue for gradients/accents */
      --cta-button-color: #ffcc00; /* Bright gold/yellow for CTA button */
      --cta-button-hover: #e6b800; /* Slightly darker gold on hover */
      --text-dark: #1f2937; /* Darker, richer text */
      --text-medium: #4b5563;
      --text-light: #6b7280;
      --bg-light-start: #e0f2fe; /* Very light blue for body background */
      --bg-light-end: #bfdbfe; /* Slightly deeper light blue */
      --bg-section-start: #dbeafe; /* More vibrant light blue for sections */
      --bg-section-end: #93c5fd; /* Even deeper light blue for sections */
      --card-bg: #ffffff;
      --shadow-light: 0 5px 25px rgba(0, 0, 0, 0.08); /* More refined shadow */
      --shadow-hover: 0 12px 35px rgba(0, 0, 0, 0.15); /* Deeper shadow on hover */
      --border-radius-lg: 1.25rem; /* Larger border-radius for modern feel */
      --border-radius-sm: 0.75rem;
    }

    html {
      scroll-behavior: smooth;
    }

/*   newly added fonts */

/* ========================================================================== */
/* IMPORTANT: Place this entire CSS block into your assets/css/main.css file. */
/* ========================================================================== */


@font-face {
    font-family: 'AcumenBD';
    src: url('../fonts/acumenbd-bdpro.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



/* ========================================================================== */
/* Source Sans 3 Fonts (TTF Format) */
/* IMPORTANT PATH: ../fonts/Source_Sans_3/ */
/* ========================================================================== */

/* Source Sans 3 Black */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-Black.ttf') format('truetype');
    font-weight: 900; /* Black */
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 Black Italic */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-BlackItalic.ttf') format('truetype');
    font-weight: 900; /* Black */
    font-style: italic;
    font-display: swap;
}

/* Source Sans 3 Bold */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 Bold Italic */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-BoldItalic.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: italic;
    font-display: swap;
}

/* Source Sans 3 ExtraBold */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-ExtraBold.ttf') format('truetype');
    font-weight: 800; /* ExtraBold */
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 ExtraBold Italic */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800; /* ExtraBold */
    font-style: italic;
    font-display: swap;
}

/* Source Sans 3 ExtraLight */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-ExtraLight.ttf') format('truetype');
    font-weight: 200; /* ExtraLight */
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 ExtraLight Italic */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200; /* ExtraLight */
    font-style: italic;
    font-display: swap;
}

/* Source Sans 3 Italic (Normal Italic) */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-Italic.ttf') format('truetype');
    font-weight: 400; /* Normal/Regular */
    font-style: italic;
    font-display: swap;
}

/* Source Sans 3 Light */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
    font-display: swap;
}

/* Source Sans 3 Light Italic */
@font-face {
    font-family: 'Source Sans 3';
    src: url('../fonts/Source_Sans_3/SourceSans3-LightItalic.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: italic;
    font-display: swap;
}


/* ========================================================================== */
/* IMPORTANT: Example Usage in Your CSS */
/* Apply these font-families to your HTML elements */
/* ========================================================================== */
/*nav bar4*/
/* ========================================================================== */
/* Login Button Design (Matching image_10c15a.png) */
/* ========================================================================== */
.navbar-nav .btn-primary {
    background-color: #4285F4 !important; /* Specific blue color from the image */
    color: #ffffff !important; /* White text */
    border: none !important; /* No border */
    border-radius: 0.5rem !important; /* Slightly rounded corners as seen */
    padding: 0.5rem 1.5rem !important; /* Adjust padding to match button size in image */
    font-weight: 600 !important; /* Semi-bold text */
    text-transform: none !important; /* Ensure no uppercase transform */
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
    margin-left: 1rem !important; /* Add some space from the last nav item */
}

.navbar-nav .btn-primary:hover {
    background-color: #357ae8 !important; /* A slightly darker blue on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow on hover */
}

/* Ensure default Bootstrap .btn styles don't interfere if not intended for nav */
.navbar-nav .btn {
    display: flex !important; /* Use flex to ensure content is centered if needed */
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Adjustments for responsiveness on smaller screens */
@media (max-width: 991.98px) { /* For Bootstrap's lg breakpoint */
    .navbar-nav .btn-primary {
        width: auto !important; /* Allow button to take natural width */
        margin-top: 1rem !important; /* Space from menu items */
        margin-left: 0 !important; /* Remove left margin */
    }
}
/*end of navbar*/
body {
    font-family: 'Source Sans 3', sans-serif; /* Example: Default body font */
    font-weight: 400; /* Example: For regular text weight */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Proxima Nova', sans-serif; /* Example: Headings using Proxima Nova */
    font-weight: 700; /* Example: Bold for headings */
}

.my-condensed-text {
    font-family: 'Proxima Nova Condensed', sans-serif; /* Example: For text using the condensed variant */
    font-weight: 800; /* Example: ExtraBold for condensed text */
}

.some-bold-source-text {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 700; /* Example: Specific bold text using Source Sans 3 */
}

/*end of newly added fonts*/
    body {
/*      font-family: 'Quicksand', sans-serif; Prioritize Quicksand for rounded feel */
      background: linear-gradient(180deg, var(--bg-light-start), var(--bg-light-end)); /* Main body gradient */
      color: var(--text-dark);
      line-height: 1.7; /* Slightly increased line height for readability */
      overflow-x: hidden; /* Prevent horizontal scroll */
    }

    /* Glassmorphism Navbar */
    .navbar {
      background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
      backdrop-filter: blur(15px); /* Frosted glass effect */
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 1rem 1.5rem;
      transition: all 0.4s ease-in-out;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Subtle bottom border */
    }

    .navbar-brand img {
      height: 50px; /* Larger logo */
    }

    .nav-link {
      color: var(--text-medium) !important;
      font-weight: 600;
      margin-left: 2rem;
      position: relative;
      transition: all 0.3s ease;
      padding: 0.5rem 0;
    }

    /* Navigation Link Hover Effect */
    .nav-item .nav-link::before {
      content: '';
      position: absolute;
      width: 0%;
      height: 3px;
      background-color: var(--primary-blue);
      bottom: -8px; /* Position below the text */
      left: 50%; /* Start from the center */
      transform: translateX(-50%); /* Center the line */
      transition: width 0.3s ease-out;
    }

    .nav-item .nav-link:hover::before {
      width: 100%; /* Expand to full width on hover */
    }

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

    /* Hero Section */
    .hero {
      position: relative; /* Needed for absolute positioning of background elements */
      color: white;
      padding: 180px 0; /* More padding */
      text-align: center;
      min-height: 85vh; /* Taller hero section */
      display: flex;
      align-items: center;
      overflow: hidden; /* Hide overflow for subtle animations */
    }

    /* Hero Background Image */
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('../images/happyclient.avif')  center/cover no-repeat fixed; /* Use as background-image */
      z-index: -2; /* Behind content and overlay */
    }

    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(29, 78, 216, 0.9)); /* Blue gradient overlay */
        z-index: -1; /* Above the image, below the content */
    }

    /* Subtle background pattern/texture (conceptual) */
    .hero-overlay::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0H8V8H0V0ZM8 8H16V16H8V8Z" fill="rgba(255,255,255,0.05)"/%3E%3C/svg%3E');
        opacity: 0.3;
        z-index: 0;
    }

    .hero .container {
        position: relative;
        z-index: 1; /* Ensure content is above overlay */
    }

    .hero h1 {
/*      font-family: 'Quicksand', sans-serif; /* Ensure headings also use Quicksand */
      font-size: 4.5rem; /* Larger, more impactful heading */
      font-weight: 700; /* Quicksand doesn't have 900, using 700 (Bold) */
      margin-bottom: 25px;
      letter-spacing: -0.05rem; /* Slight adjustment for Quicksand */
      line-height: 1.1;
      background: linear-gradient(45deg, #ffffff, #e0f2fe); /* Subtle text gradient */
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .hero p {
/*      font-family: 'Quicksand', sans-serif;*/
      font-size: 1.45rem;
      opacity: 0.95;
      max-width: 900px;
      margin: 0 auto 40px auto;
      font-weight: 400; /* Regular weight for paragraph */
    }

    /* Request a Demo Button Styling */
    .btn-cta {
      background-color: var(--cta-button-color); /* Bright CTA color */
      color: var(--text-dark); /* Dark text for contrast */
      border: none;
      padding: 1rem 2.5rem; /* Larger, more prominent button */
      font-size: 1.2rem;
      font-weight: 700; /* Extra bold for impact */
      border-radius: var(--border-radius-sm);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: hidden;
      z-index: 1; /* Ensure button content is above pseudo-element */
      text-shadow: 0 1px 1px rgba(0,0,0,0.1); /* Subtle text shadow */
    }

    .btn-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: all 0.5s ease;
        z-index: -1; /* Ensure pseudo-element is behind text */
    }

    .btn-cta:hover::before {
        left: 100%;
    }

    .btn-cta:hover {
      background-color: var(--cta-button-hover); /* Slightly darker gold on hover */
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(255, 204, 0, 0.5); /* Gold glow on hover */
      color: var(--text-dark); /* Ensure text remains dark */
    }

    /* General Primary Button for other actions */
    .btn-primary {
      background-color: var(--primary-blue);
      border: none;
      padding: 1rem 2.5rem;
      font-size: 1.2rem;
      font-weight: 700;
      border-radius: var(--border-radius-sm);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      overflow: hidden;
      z-index: 1;
    }

    .btn-primary::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
        transition: all 0.5s ease;
        z-index: -1;
    }

    .btn-primary:hover::before {
        left: 100%;
    }

    .btn-primary:hover {
      background-color: var(--dark-blue);
      transform: translateY(-3px);
      box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
    }

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

    .btn-outline-primary:hover {
        background-color: var(--primary-blue);
        color: white;
        box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
        transform: translateY(-2px);
    }

    /* Section Styling */
    section {
      padding: 100px 0; /* Consistent vertical padding */
    }

    .bg-light {
      background: linear-gradient(180deg, var(--bg-section-start), var(--bg-section-end)) !important;
    }

    .section-title {
/*      font-family: 'Quicksand', sans-serif;*/
      font-size: 3.5rem; /* Larger, more prominent titles */
      font-weight: 800 !important;
      margin-bottom: 4rem; /* More spacing */
      text-align: center;
      color: var(--dark-blue);
      position: relative;
      line-height: 1.2;
    }

    .section-title::after {
      content: '';
      display: block;
      width: 120px;
      height: 5px;
      background-color: var(--primary-blue);
      margin: 20px auto 0;
      border-radius: 3px;
      opacity: 0.8;
    }

    /* Cards */
    .feature-card, .benefit-card, .testimonial-card {
      background: var(--card-bg);
      border-radius: var(--border-radius-lg);
      padding: 40px;
      box-shadow: var(--shadow-light);
      text-align: center;
      transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      border: 1px solid rgba(0,0,0,0.03); /* Very subtle border */
      overflow: hidden; /* For potential internal animations */
    }

    .feature-card:hover, .benefit-card:hover, .testimonial-card:hover {
      transform: translateY(-12px) scale(1.02); /* More pronounced lift and slight scale */
      box-shadow: var(--shadow-hover);
      border-color: var(--primary-blue); /* Highlight border on hover */
    }

    .icon {
      font-size: 3.8rem; /* Larger, more striking icons */
      color: var(--primary-blue);
      margin-bottom: 20px;
      line-height: 1; /* Remove extra space around icons */
    }

    .feature-card h5, .benefit-card h5 {
/*        font-family: 'Quicksand', sans-serif;*/
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 15px;
        color: var(--dark-blue);
    }

    .feature-card p, .benefit-card p {
/*        font-family: 'Quicksand', sans-serif;*/
        color: black;
        font-size: 1.05rem;
    }

    /* About Section */
    /* ========================================================================== */
/* About Section - Further Enhanced Design */
/* ========================================================================== */

#about {
    padding: 6rem 0; /* Substantial vertical padding */
    background: linear-gradient(180deg, var(--bg-light-start), var(--bg-light-end)); /* Subtle gradient background */
    overflow: hidden; /* Ensure no overflow from decorations */
}

/* Ensure the section title remains well-spaced and prominent */
#about .section-title {
    margin-bottom: 3.5rem; /* Ample space below the title before content starts */
    color: var(--dark-blue); /* Stronger color for the title */
}

/* Styling for the new decorative background element */
.about-image-decor {
    position: absolute;
    top: 20px; /* Offset from top */
    left: 20px; /* Offset from left */
    width: 100%; /* Same width as image */
    height: 100%; /* Same height as image */
    background: linear-gradient(135deg, var(--primary-blue-light), var(--primary-blue)); /* A light blue gradient */
    border-radius: var(--border-radius-lg); /* Matches image border-radius */
    z-index: -1; /* Place it behind the image */
    opacity: 0.2; /* Make it subtle */
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out; /* Smooth transition */
}

/* Styling for the main image within the About section */
.about-image {
    position: relative; /* Ensure it stacks above the decor */
    z-index: 1; /* Make sure it's above the decor */
    max-width: 100%; /* Ensures image is responsive */
    height: auto; /* Maintains aspect ratio */
    border-radius: var(--border-radius-lg); /* Uses your defined large border-radius */
    box-shadow: var(--shadow-hover); /* Applies a more pronounced shadow for a floating effect */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out; /* Smooth hover animation */
    object-fit: cover; /* Ensures image covers its area nicely without distortion */
    aspect-ratio: 16 / 10; /* Sets a consistent aspect ratio for the image */
    display: block; /* Removes extra space below the image */
}

.about-image:hover {
    transform: translateY(-8px) scale(1.01); /* Lifts and slightly scales the image on hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Deeper shadow on hover for a more dynamic feel */
}

/* When hovering on the image, also animate its background decor */
.about-image:hover + .about-image-decor {
    transform: translateY(-8px) translateX(-8px); /* Moves decor slightly more than image */
    opacity: 0.3; /* Make decor slightly more visible */
}


/* Styling for all paragraphs within the About section */
#about p {
/*    font-family: 'Quicksand', sans-serif; /* Keeps the Quicksand font */
    font-size: 1.15rem; /* Good size for readability in a column layout */
    line-height: 1.7; /* Generous line height for improved readability */
    color: var(--text-dark); /* Ensures good contrast for the main text */
    margin-bottom: 1.25rem; /* Consistent spacing between paragraphs */
}

/* Specific styling for the leading/introductory paragraph */
#about p.lead {
    font-size: 1.4rem; /* Larger font size for emphasis */
    font-weight: 600; /* Slightly bolder */
    color: var(--dark-blue); /* Highlights the lead paragraph with a strong color */
    line-height: 1.6;
    margin-bottom: 2rem; /* More space after the lead paragraph */
    padding-left: 1.5rem; /* Add padding for the border */
    border-left: 5px solid var(--primary-blue); /* A prominent left border for emphasis */
}

/* Responsive adjustments for the layout */
@media (max-width: 991.98px) {
    /* When columns stack on medium screens and below */
    #about .col-lg-6 {
        margin-bottom: 2rem; /* Add spacing between the image and text columns */
    }
    .about-image-decor {
        display: none; /* Hide the decorative background on smaller screens */
    }
    .about-image {
        aspect-ratio: 16 / 9; /* Adjust aspect ratio for slightly wider image on smaller screens */
        box-shadow: var(--shadow-light); /* Reduce shadow intensity when stacked */
        transform: none; /* Remove hover transform for stacked state */
    }
    .about-image:hover { /* Remove hover effects when stacked to avoid odd behavior */
        transform: none;
        box-shadow: var(--shadow-light);
    }
    #about p.lead {
        font-size: 1.25rem; /* Adjust lead paragraph size */
        padding-left: 1rem; /* Adjust padding for border */
        border-left-width: 3px; /* Smaller border on mobile */
    }
    #about p {
        font-size: 1rem; /* Adjust regular paragraph size */
    }
}

@media (max-width: 767.98px) {
    #about .section-title {
        font-size: 2.5rem; /* Adjust title size for small tablets/large mobiles */
    }
    #about {
        padding: 4rem 0; /* Reduce section padding on smaller screens */
    }
}

@media (max-width: 575.98px) {
    #about .section-title {
        font-size: 2rem; /* Further adjust title size for mobile */
    }
    #about p.lead {
        font-size: 1.15rem;
    }
    #about p {
        font-size: 0.95rem;
    }
}
    /*#about p {
        font-family: 'Quicksand', sans-serif;
        max-width: 900px;
        margin: 0 auto 1.5rem auto;
        font-size: 1.25rem; 
       
        text-align: center;
        line-height: 1.8;
    }
*/
    /* Pricing Section */
    .pricing-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between; /* Push button to bottom */
        background: var(--card-bg);
        border-radius: var(--border-radius-lg);
        padding: 40px;
        box-shadow: var(--shadow-light);
        text-align: center;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        border: 1px solid rgba(0,0,0,0.03);
    }

    .pricing-card:hover {
        transform: translateY(-15px) scale(1.03); /* More pronounced lift for pricing cards */
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
        border-color: var(--primary-blue); /* Highlight border on hover */
    }

    .pricing-card.highlight {
        border: 3px solid var(--primary-blue); /* Stronger highlight */
        box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4);
        transform: translateY(-8px) scale(1.01); /* More emphasis */
    }

    .pricing-card h4 {
/*        font-family: 'Quicksand', sans-serif;*/
        font-size: 2rem;
        font-weight: 700;
        color: var(--primary-blue);
        margin-bottom: 1rem;
    }

    .pricing-card h2 {
/*        font-family: 'Quicksand', sans-serif;*/
        font-size: 4rem; /* Larger price tag */
        font-weight: 700; /* Quicksand doesn't have 900 */
        color: var(--dark-blue);
        margin-top: 1rem;
        margin-bottom: 2.5rem;
        line-height: 1;
    }

    .pricing-card small {
/*        font-family: 'Quicksand', sans-serif;*/
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--primary-blue);
    }

    .pricing-card ul {
        list-style: none; /* Remove default bullet */
        padding: 0;
        margin-bottom: 2.5rem;
        flex-grow: 1; /* Allow list to take available space */
    }

    .list-unstyled li {
/*      font-family: 'Quicksand', sans-serif;*/
      margin-bottom: 1rem;
      font-size: 1.15rem;
      color: var(--text-medium);
      text-align: left;
      padding-left: 2rem; /* Indent for custom icon */
      position: relative;
    }

    /*.list-unstyled li::before {
        content: "\2713"; /* Checkmark icon */
        color: var(--primary-blue);
        font-weight: bold;
        position: absolute;
        left: 0;
        font-size: 1.3rem;
        top: 2px;
    }

    .pricing-card .btn {
        width: 90%;
        margin: 0 auto; /* Center button */
    }

    /* Testimonials Section */
    .testimonial-card {
        margin: 0 15px; /* Spacing between carousel items */
    }

    .testimonial-card blockquote {
        font-family: 'Quicksand', sans-serif;
        font-size: 1.15rem;
        margin-bottom: 1.5rem;
        color: var(--text-dark);
        font-style: normal; /* Override italic for name/title */
    }

    .testimonial-card .author {
        font-family: 'Quicksand', sans-serif;
        font-weight: 700;
        color: var(--primary-blue);
        margin-top: 10px;
        font-size: 1.1rem;
    }

    .testimonial-card .rating .bi-star-fill {
        color: #ffc107; /* Star yellow */
        font-size: 1.3rem;
    }

    /* Carousel navigation (prev/next buttons) */
    .carousel-control-prev,
    .carousel-control-next {
        width: 5%; /* Make buttons narrower */
        color: var(--primary-blue); /* Color the icon */
        opacity: 0.7; /* Slightly less opaque */
        transition: opacity 0.3s ease;
    }

    .carousel-control-prev:hover,
    .carousel-control-next:hover {
        opacity: 1; /* Full opacity on hover */
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-image: none; /* Remove default Bootstrap icon */
        width: 2rem; /* Size of custom icon */
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(59, 130, 246, 0.2); /* Light blue background for icon */
        border-radius: 50%; /* Circular background */
    }

    .carousel-control-prev-icon::after {
        content: "\f284"; /* Bootstrap icon code for chevron-left */
        font-family: "bootstrap-icons";
        font-size: 1.5rem;
        color: var(--primary-blue); /* Icon color */
    }

    .carousel-control-next-icon::after {
        content: "\f285"; /* Bootstrap icon code for chevron-right */
        font-family: "bootstrap-icons";
        font-size: 1.5rem;
        color: var(--primary-blue); /* Icon color */
    }


    /* Contact Section */
    #contact {
        padding: 100px 0;
        background: linear-gradient(180deg, var(--bg-light-end), var(--bg-light-start)); /* Inverted gradient for contact section */
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    #contact .lead {
        font-family: 'Quicksand', sans-serif;
        font-size: 1.6rem;
        font-weight: 600;
        color: var(--text-dark);
        margin-bottom: 2.5rem;
    }

    #contact a.contact-email {
        font-family: 'Quicksand', sans-serif;
        font-size: 1.4rem;
        color: var(--primary-blue);
        text-decoration: none;
        font-weight: 700;
        transition: color 0.3s ease, transform 0.2s ease;
        display: inline-block; /* For transform */
    }

    #contact a.contact-email:hover {
        color: var(--dark-blue);
        transform: scale(1.02);
    }



    /* Responsive adjustments */
    @media (max-width: 1200px) {
      .hero h1 {
        font-size: 3.8rem;
      }
      .section-title {
        font-size: 3rem;
      }
    }

    @media (max-width: 992px) {
      .navbar-brand img {
        height: 40px;
      }
      .nav-link {
        margin-left: 0;
        text-align: center;
      }
      .nav-link::after {
          display: none; /* Hide underline on mobile */
      }
      .hero {
        padding: 120px 0;
        min-height: 70vh;
      }
      .hero h1 {
        font-size: 3rem;
      }
      .hero p {
        font-size: 1.2rem;
      }
      .section-title {
        font-size: 2.5rem;
      }
      .feature-card, .benefit-card, .pricing-card {
        padding: 30px;
      }
      .pricing-card h2 {
        font-size: 3.2rem;
      }
      #about p {
        font-size: 1.1rem;
      }
    }

    @media (max-width: 768px) {
      .hero {
        padding: 100px 0;
        min-height: 60vh;
      }
      .hero h1 {
        font-size: 2.5rem;
      }
      .hero p {
        font-size: 1rem;
      }
      .section-title {
        font-size: 2rem;
        margin-bottom: 3rem;
      }
      .feature-card, .benefit-card, .pricing-card {
        margin-bottom: 25px;
      }
      .icon {
        font-size: 3rem;
      }
      .feature-card h5, .benefit-card h5 {
        font-size: 1.5rem;
      }
      .pricing-card h2 {
        font-size: 2.8rem;
      }
      .pricing-card small {
        font-size: 1.5rem;
      }
      .list-unstyled li {
        font-size: 1rem;
      }
      #contact .lead {
        font-size: 1.3rem;
      }
      #contact a.contact-email {
        font-size: 1.1rem;
      }

      #scrollToTopBtn {
        bottom: 20px;
        right: 20px;
        padding: 12px;
        font-size: 1.2rem;
      }
    }
    /* In your custom CSS file (e.g., style.css) */
/* In your custom CSS file (e.g., style.css) */

/* Updated Testimonials Section Styling */
/* Styling for the 5-star rating */
.star-rating {
    color: #FFD700; /* Gold color for stars, you can adjust this */
    font-size: 1.5rem; /* Adjust size as needed */
    letter-spacing: 2px; /* Adds a bit of space between stars */
}

.star-rating i {
    /* No additional styling needed here unless you want individual star adjustments */
}
.what-our-clients-say {
    /* Retaining a light background, but making it a subtle gradient for depth */
    background: linear-gradient(var(--gradient-angle), var(--bg-light-start), var(--bg-light-end));
    padding: 100px 0; /* More generous vertical padding for section prominence */
    position: relative; /* For any subtle background elements */
    overflow: hidden; /* Ensure no overflow from animated elements */
}

/* Enhancements for individual testimonial cards */
.testimonial-content {
    padding: 40px; /* Increased padding for more breathing room inside the card */
    background-color: var(--card-bg); /* Use the defined card background variable */
    border-radius: var(--border-radius-lg); /* Larger, softer border-radius */
    box-shadow: var(--shadow-light); /* Use the refined light shadow variable */
    margin: 30px auto; /* Slightly more vertical margin for better separation */
    max-width: 650px; /* Slightly reduced max-width for tighter composition */
    transition: all var(--transition-speed) ease-in-out; /* Smooth transitions for all properties */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle, almost invisible border */
    position: relative;
    overflow: hidden; /* For inner animations/details */
    z-index: 1; /* Ensure content is above any pseudo-elements */
}

.testimonial-content:hover {
    transform: translateY(-10px) scale(1.01); /* Lift and slight scale for a gentle interactive feel */
    box-shadow: var(--shadow-hover); /* Deeper shadow on hover */
    border-color: var(--primary-blue); /* A subtle highlight on the border */
}

/* Subtle background overlay for texture/pattern on cards (optional, for advanced beauty) */
.testimonial-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0H4V4H0V0ZM4 4H8V8H4V4Z" fill="rgba(0,0,0,0.02)"/%3E%3C/svg%3E');
    opacity: 0.5; /* Very subtle pattern */
    z-index: -1;
    border-radius: var(--border-radius-lg); /* Apply border-radius to pseudo-element too */
}


/* Styling for client images within testimonials */
.testimonial-content img {
    border: 5px solid var(--primary-blue); /* A nice border around the avatar */
    box-shadow: 0 0 0 7px rgba(59, 130, 246, 0.1); /* Subtle ring effect */
    transition: all var(--transition-speed) ease-in-out; /* Smooth transition for image */
    margin-bottom: 25px !important; /* Slightly more space below the image */
}

.testimonial-content:hover img {
    border-color: var(--dark-blue); /* Change border color on card hover */
    transform: scale(1.05); /* Slight grow effect on image when card is hovered */
}

/* Styling for testimonial text */
.testimonial-content .lead {
    font-family: 'Source Sans 3', sans-serif; /* Use Source Sans 3 for body text readability */
    font-size: 1.25rem; /* Good size for readability */
    color: var(--text-dark); /* Darker text for better contrast */
    line-height: 1.8; /* Generous line height */
    margin-bottom: 20px; /* Space below the quote */
    font-style: italic; /* Emphasize the quote */
}

/* Styling for client name and title */
.testimonial-content h5 {
    font-family: 'Proxima Nova', sans-serif; /* Use Proxima Nova for names */
    font-size: 1.5rem; /* More prominent name */
    font-weight: 700;
    color: var(--dark-blue); /* Stronger color for the name */
    margin-bottom: 5px; /* Less space between name and title */
}

.testimonial-content .text-muted {
    font-family: 'Source Sans 3', sans-serif; /* Consistent font for title */
    font-size: 0.95rem; /* Slightly smaller for secondary info */
    color: var(--text-light) !important; /* Ensure text-light is used */
    font-weight: 400;
}

/* Carousel Control (Arrows) Styling - Refined */
.carousel-control-prev,
.carousel-control-next {
    width: 6%; /* Slightly wider hit area */
    opacity: 0.8; /* Default opacity */
    transition: opacity var(--transition-speed) ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1; /* Full opacity on hover */
    background-color: rgba(59, 130, 246, 0.1); /* Very light blue background on hover */
    border-radius: 5px; /* Subtle rounded corners on hover background */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    /* Keeping your custom icon styles from previous iteration */
    background-image: none;
    width: 2.5rem; /* Slightly larger icons */
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(59, 130, 246, 0.3); /* More visible blue background for icon */
    border-radius: 50%;
    transition: background-color var(--transition-speed) ease;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--primary-blue); /* Solid blue on hover */
}

.carousel-control-prev-icon::after {
    content: "\f284";
    font-family: "bootstrap-icons";
    font-size: 1.8rem; /* Larger icon font size */
    color: white; /* Changed icon color to white for better contrast on blue background */
}

.carousel-control-next-icon::after {
    content: "\f285";
    font-family: "bootstrap-icons";
    font-size: 1.8rem;
    color: white; /* Changed icon color to white */
}

/* Carousel Indicators Styling */
.carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%; /* Make dots circular */
    background-color: var(--primary-blue);
    opacity: 0.5;
    transition: opacity var(--transition-speed) ease, background-color var(--transition-speed) ease;
    margin: 0 7px; /* More space between dots */
    border: none; /* Remove default border */
}

.carousel-indicators .active {
    opacity: 1;
    background-color: var(--dark-blue); /* Darker blue for active dot */
    transform: scale(1.2); /* Slightly larger active dot */
}

/* Responsive adjustments for this section */
@media (max-width: 992px) {
    .what-our-clients-say {
        padding: 80px 0;
    }
    .testimonial-content {
        padding: 30px;
        margin: 20px auto;
        max-width: 90%; /* Allow more width on smaller screens */
    }
    .testimonial-content .lead {
        font-size: 1.15rem;
    }
    .testimonial-content h5 {
        font-size: 1.3rem;
    }
    .carousel-control-prev,
    .carousel-control-next {
        width: 8%;
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 2rem;
        height: 2rem;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .what-our-clients-say {
        padding: 60px 0;
    }
    .testimonial-content {
        padding: 25px;
        max-width: 95%;
    }
    .testimonial-content img {
        width: 80px;
        height: 80px;
        border-width: 3px; /* Smaller border on mobile */
        margin-bottom: 20px !important;
    }
    .testimonial-content .lead {
        font-size: 1rem;
    }
    .testimonial-content h5 {
        font-size: 1.2rem;
    }
    .carousel-control-prev,
    .carousel-control-next {
        display: none; /* Hide arrows on very small screens, rely on dots/swipe */
    }
}
/*trusted company*/
.trusted-companies {
    /* Use a very subtle linear gradient for a soft, layered background */
    background: linear-gradient(180deg, var(--bg-section-start), var(--bg-section-end));
    padding: 6rem 0 !important; /* Increased vertical padding for a grander feel */
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

/* Enhancements for the wrapper holding title and carousel */
.partners-content-wrapper {
    align-items: center;
    gap: 4rem !important; /* Increased space between the title and the carousel */
}

/* Adjustments for the specific "Our Partners" title */
.section-title.partners-title {
    text-align: left !important;
    margin-bottom: 0 !important;
    font-size: 3.8rem !important; /* Made the title significantly larger */
    font-weight: 800;
    color: var(--dark-blue);
    line-height: 1.1;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    min-width: 280px !important; /* Increased min-width to accommodate larger text */
    flex-shrink: 0;
}

/* Remove the ::after pseudo-element for this specific title if you want a cleaner look */
.section-title.partners-title::after {
    display: none;
}

.logo-carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* CRITICAL: Ensure Horizontal Alignment */
.logo-carousel {
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    padding: 15px 0 !important; /* Increased padding around logos */
    /* GSAP will handle transform */
}

.logo-carousel img {
    height: 80px !important; /* Significantly increased logo height */
    min-width: 80px !important; /* Adjusted min-width */
    margin: 0 30px !important; /* Increased margin for more breathing room between larger logos */
    flex-shrink: 0 !important;

    /* Enhanced visual styles for logos */
    filter: grayscale(100%) !important;
    opacity: 0.6 !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.5);
}

.logo-carousel img:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: translateY(-8px) scale(1.1); /* Slightly larger lift and scale on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background-color: rgba(255, 255, 255, 0.9);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .trusted-companies {
        padding: 5rem 0 !important; /* Adjust padding for tablets */
    }
    .partners-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 2.5rem !important; /* Adjust gap */
    }
    .section-title.partners-title {
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        width: 100%;
        font-size: 2.8rem !important; /* Adjusted title size for tablets */
        text-shadow: none;
    }
    .logo-carousel-container {
        margin-left: 0 !important;
        width: 100%;
    }
    .logo-carousel img {
        height: 60px !important; /* Adjusted logo height for tablets */
        margin: 0 35px !important; /* Adjusted margin for tablets */
        box-shadow: none;
    }
}
@media (max-width: 768px) {
    .trusted-companies {
        padding: 4rem 0 !important;
    }
    .section-title.partners-title {
        font-size: 2.2rem !important; /* Smaller title on tablets */
    }
    .logo-carousel img {
        height: 50px !important; /* Adjusted logo height for smaller tablets */
        margin: 0 25px !important;
    }
}
@media (max-width: 576px) {
    .trusted-companies {
        padding: 3rem 0 !important;
    }
    .section-title.partners-title {
        font-size: 1.8rem !important; /* Even smaller title on mobile */
    }
    .logo-carousel img {
        height: 45px !important; /* Adjusted logo height for mobile */
        margin: 0 20px !important;
    }
}
/*end of trusted company*/

/* Footer - EXACT MATCH TO image_119f33.png and image_11a63e.png */
/* ========================================================================== */
.footer {
    background-color: #3b60bf !important;
    color: #ffffff !important;
    padding: 70px 0 30px !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    /* Ensure the footer itself manages overflow if any contained element somehow escapes */
    overflow-x: hidden;
}

.footer .container {
    max-width: 1200px !important;
}

.footer-col {
    margin-bottom: 2.5rem !important;
}

.footer .footer-logo {
    max-height: 60px !important;
    margin-bottom: 1.5rem !important;
    filter: brightness(2) contrast(1.5) !important;
    /* --- FIX FOR LOGO OVERLAPPING --- */
    max-width: 100% !important; /* Ensure logo doesn't exceed its column width */
    height: auto !important; /* Maintain aspect ratio */
    display: block !important; /* Remove any extra space below if it's an inline element */
    /* --- END FIX --- */
}

.footer p {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 1rem !important;
}

.footer h5 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    color: #ffcc00 !important;
    margin-bottom: 1.5rem !important;
    position: relative !important;
    padding-bottom: 0 !important;
}

/* Ensure absolutely no pseudo-elements like underlines for headings */
.footer h5::after {
    display: none !important;
}

.footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer ul li {
    margin-bottom: 0.8rem !important;
}

.footer ul li a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    font-size: 1rem !important;
}

.footer ul li a:hover {
    color: #ffcc00 !important;
    text-decoration: none !important;
    transform: none !important;
}

.footer .contact-info {
    margin-top: 0 !important;
}

.footer .contact-info div {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 0.8rem !important;
    color: #ffffff !important;
    font-size: 1rem !important;
}

.footer .contact-info div i {
    color: #ffffff !important;
    font-size: 1.2rem !important;
    margin-right: 10px !important;
    margin-top: 3px !important;
}

.footer .contact-info a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.footer .contact-info a:hover {
    color: #ffcc00 !important;
    text-decoration: none !important;
}

.footer .social-icons {
    margin-top: 1.5rem !important;
    display: flex !important;
    flex-wrap: wrap !important; /* Allow icons to wrap to the next line */
    gap: 10px !important; /* Slightly reduced gap for better mobile spacing */
    justify-content: center !important; /* Center icons horizontally on smaller screens */
}

.footer .social-icons a {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    border: 1px solid #ffffff !important;
    border-radius: 30% !important;
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
    flex-shrink: 0; /* Prevent items from shrinking */
}

.footer .social-icons a:hover {
    background-color: #ffcc00 !important;
    color: #1a3a60 !important;
    border-color: #ffcc00 !important;
    transform: translateY(-3px) !important;
}

.footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    padding-top: 20px !important;
    margin-top: 40px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9rem !important;
}

/* Responsive adjustments for the footer */
@media (max-width: 767.98px) {
    .footer-col {
        text-align: center !important;
    }
    .footer .footer-logo {
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .footer .social-icons {
        justify-content: center !important;
        gap: 8px !important; /* Further reduce gap if needed */
    }
    .footer .social-icons a {
        width: 34px !important; /* Slightly smaller icons for very small screens */
        height: 34px !important;
        font-size: 1.2rem !important;
    }
    .footer .contact-info div {
        /* Centering for contact info for better mobile display */
        justify-content: center !important;
        text-align: left !important; /* Keep text aligned left within its flex item */
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 280px !important; /* Constrain width for centering, adjust as needed */
        flex-wrap: wrap; /* Allow content to wrap if text is too long for one line */
    }
    .footer .contact-info div i {
        margin-right: 5px !important;
        /* Ensure icon remains visible and doesn't push text too much */
        flex-shrink: 0;
    }
}


/* Scroll to Top Button */
#scrollToTopBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 30px; /* Place the button at the bottom right */
    right: 30px;
    z-index: 1000; /* --- IMPORTANT FIX: INCREASE Z-INDEX --- */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: var(--primary-blue); /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    width: 55px; /* Set a fixed width */
    height: 55px; /* Set a fixed height for a perfect circle */
    border-radius: 50%; /* Rounded corners to make it circular */
    font-size: 1.5rem; /* Increase font size */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;

    /* Flexbox for perfect icon centering */
    display: flex;
    align-items: center;
    justify-content: center;
}

#scrollToTopBtn:hover {
    background-color: var(--dark-blue); /* Darker blue on hover */
    transform: translateY(-5px); /* Slight lift on hover */
}

/* Responsive adjustments for Scroll to Top Button */
@media (max-width: 768px) {
    #scrollToTopBtn {
        bottom: 20px;
        right: 20px;
        width: 45px; /* Smaller size for mobile */
        height: 45px;
        font-size: 1.2rem;
    }
}