/* CSS Variables for the new color palette */
        :root {
            --primary: #4a4a4a; /* Dark gray for text and primary elements */
            --orange-base: #FF6B00;
            --yellow-highlight: #FFD43B;
            --gradient-glow:  linear-gradient(39deg,rgba(255, 107, 0, 1) 0%, rgba(255, 107, 0, 1) 67%, rgba(255, 212, 59, 1) 100%);
            --white-contrast: #FFFFFF;
            --bg-light: #F8F9FA;
            --bg-dark: #E0E0E0; /* Slightly darker gray for contrast sections */
            --text-dark: #212529;
            --text-light: #6c757d;
        }

        /* General Styles */
        html {
            scroll-behavior: smooth;
             overflow-x: hidden;
        }

        body {
            font-family: 'Inter', sans-serif;
            /*background-color: var(--bg-light);*/
            color: var(--text-dark);
            overflow-x: hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: 700;
        }

        p {
            font-weight: 300;
        }
          .display-1 {
               font-size: 5rem;
          }
        .section-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            background: var(--gradient-glow);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .btn-custom {
            padding: 0.75rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            background: var(--gradient-glow);
            border: none;
            color: var(--white-contrast);
            box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
        }

        .btn-custom:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(255, 107, 0, 0.6);
            color: var(--white-contrast);
        }

        .bg-light {
            background-color: var(--bg-light) !important;
            color: var(--text-dark) !important;
        }

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

        /* Navbar Styles */
        .navbar-custom {
            transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            background-color: transparent;
        }

        .navbar-custom.scrolled {
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        .navbar-toggler{
              background-color: var(--text-dark)!important;
        }

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

        .navbar-nav .nav-link {
            color:var(--text-dark) !important;
            font-weight: 500;
            position: relative;
            transition: all 0.2s ease-in-out;
        }

        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 2px;
            background: var(--orange-base);
            transition: width 0.3s ease, left 0.3s ease;
        }

        .navbar-nav .nav-link:hover::after {
            width: 100%;
            left: 0;
        }

        /* Scroll-triggered animations */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .animate-on-scroll.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        .animate-on-scroll.delay-1 { transition-delay: 0.1s; }
        .animate-on-scroll.delay-2 { transition-delay: 0.2s; }
        .animate-on-scroll.delay-3 { transition-delay: 0.3s; }
        .animate-on-scroll.delay-4 { transition-delay: 0.4s; }

        /* --- UNIQUE SECTION STYLING --- */

        /* Hero Section */
   .hero-section {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 4rem 1rem;
            background: #fff;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #FADBC5 0%, #ffffff 100%);
            z-index: 0;
            transform: skewY(-4deg);
            transform-origin: top left;
        }
        
        .hero-content-container {
            position: relative;
            z-index: 1;
            padding-top: 4rem;
            padding-bottom: 4rem;
            text-align: center;
        }

        .hero-title-wrapper {
            position: relative;
            display: inline-block;
        }

        .hero-title {
            font-weight: 800;
            font-size: clamp(2.5rem, 6vw, 5rem);
            color: var(--text-dark);
            line-height: 1.1;
            margin-bottom: 1rem;
            animation: slideInUp 1s ease-out;
            position: relative;
            z-index: 2; /* Ensure the title is on top of icons */
        }

        .hero-subtitle {
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-weight: 400;
            color: var(--text-dark);
            max-width: 700px;
            margin: 0 auto 2.5rem;
            animation: slideInUp 1.2s ease-out;
        }

        /* Styling for floating keyword badges for large screens */
        .keyword-badge {
            position: absolute;
            background-color: var(--orange-base);
            color: #fff;
            padding: clamp(0.5rem, 1vw, 0.75rem);
            border-radius: 50%;
            font-size: clamp(1rem, 2vw, 1.5rem);
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
            cursor: pointer;
            opacity: 0;
            animation: fadeIn 1.5s ease-out forwards;
            white-space: nowrap; /* Prevents text from wrapping */
            z-index: 1;
        }

        .keyword-badge:hover {
            transform: rotate(10deg) scale(1.1)!important;
  transition: 0.3s ease!important;
        }

        /* Tooltip style for showing keyword text on hover */
        .keyword-badge .badge-tooltip {
            visibility: hidden;
            background-color: var(--orange-base);
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 10px;
            position: absolute;
            z-index: 3;
            bottom: 125%; /* Position the tooltip above the badge */
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            white-space: nowrap;
        }

        .keyword-badge:hover .badge-tooltip {
            visibility: visible;
            opacity: 1;
        }

        .keyword-badge .badge-tooltip::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 5px;
            border-style: solid;
            border-color: var(--orange-base) transparent transparent transparent;
        }
.keyword-badges-mobile {
    color:transparent;
}
        /* Responsive positioning with rem units to keep them close on large screens */
        .badge-1 { top: -10rem; left: 30rem; animation-delay: 1.5s; }
        .badge-2 { top: -6rem; right: 25rem; animation-delay: 1.8s; }
        .badge-3 { bottom: -15rem; left: 15rem; animation-delay: 2.1s; }
        .badge-4 { bottom: -15rem; right: 25rem; animation-delay: 2.4s; }
        .badge-5 { top: 10rem; left: 0rem; animation-delay: 2.7s; }
        .badge-6 { top: 15rem; right: 0rem; animation-delay: 3s; }
        .badge-7 { bottom: 15rem; left: 5rem; animation-delay: 3.3s; }
        .badge-8 { bottom: 3rem; right: 4rem; animation-delay: 3.6s; }

        @media only screen and (max-width: 1025px) {
            .hero-title-wrapper .keyword-badge {
                display: none; /* Hide floating icons on small screens */
            }
            
              .hero-title {
                 margin-top:2.5rem!important;
                 margin-bottom:1.5rem!important;
                   font-size: clamp(1.5rem, 6vw, 3rem)!important;
                  
              }
           .hero-section {
           
            padding: 1rem;
           }
           
           .hero-content-container {
               
              padding-top:0px;
              padding-bottom:0px;
               
           }
            .keyword-badges-mobile {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 0.75rem;
                color: var(--dark-color);
            }

            .keyword-badges-mobile .keyword-badge-item {
                background-color: transparent;
                font-size: 12px;
                color: var(--dark-color);
                border: 2px solid var(--orange-base);
                padding: 0.5rem;
                border-radius: 50px;
                font-weight: 500;
                animation: fadeIn 1.5s ease-out forwards;
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes slideInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Video */ 
        
         .hero-video{
             display: flex;
            justify-content: center;
            padding-top:2rem;
            padding-bottom:4rem;
         }
        
           .hero-video video{
            width:1200px;
            height:auto;
         }
  
       @media only screen and (max-width: 767px) { 
        .hero-video video {
    width: 50vh;
    padding-left:20px;
    padding-right:20px;
     padding-top:40px;
            padding-bottom:40px;
    height: auto;
}

}
        
        /* About Section */
        #about .about-content {
            background: var(--gradient-glow);
            color: var(--primary);
            padding: 3rem;
            border-radius: 2rem;
            box-shadow: 0 10px 30px rgba(255, 107, 0, 0.4);
            transform: rotate(-1deg);
            transition: transform 0.5s ease-in-out;
        }

        #about .about-content:hover {
            transform: rotate(0deg);
        }

        #about .about-content h2, #about .about-content p, #about .about-content ul,#about .about-content li{
            color: #ffffff!important;
        }

        #about .about-content h2 {
            font-size: 2.5rem;
        }

        #about .about-content p {
            font-weight: 400;
            padding-bottom:1rem;
        }

        #about .about-content .bi {
            color: var(--primary);
        }

        #about .about-content h4 {
            color: var(--primary);
        }

        #about .about-content .text-muted {
            color: var(--text-light) !important;
        }


   @media only screen and (max-width: 767px) { 
       
        #about .about-content {
            
             padding: 1.5rem;
        }
       
   }


        /* Services Section */
        #services .service-card {
            background-color: var(--white-contrast);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 1.5rem;
            padding: 2rem;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            height: 100%;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        #services .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gradient-glow);
            opacity: 0;
            transition: opacity 0.5s ease;
            z-index: -1;
        }

        #services .service-card:hover::before {
            opacity: 1;
        }

        #services .service-card:hover .service-icon,
        #services .service-card:hover h3,
        #services .service-card:hover p {
            color: var(--white-contrast) !important;
        }

        #services .service-icon {
            font-size: 3rem;
            color: var(--orange-base);
            margin-bottom: 1rem;
            transition: color 0.5s ease;
        }

        #services .service-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

         /* Custom Styles for the section background from the image */
        .section-background {
            background-image: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
        }

        /* --- REVISED PORTFOLIO SECTION STYLES --- */
        .success-stories-section {
            padding: 4rem 1.5rem;
            text-align: center;
        }

        /*.success-stories-section h2 {*/
        /*     color: var(--orange-base);*/
        /*    font-size: 3rem;*/
        /*    font-weight: 800;*/
        /*    margin-bottom: 0.5rem;*/
        /*}*/

        /*.success-stories-section p {*/
        /*    max-width: 40rem;*/
        /*    margin: 0 auto 2rem;*/
        /*    color: #4a5568;*/
        /*}*/

        /* Filter buttons */
        .filters {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.75rem;
            margin-bottom: 2rem;
        }

        .filter-btn {
            border: none;
            border-radius: 9999px;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            background: #e2e8f0;
            color: #4a5568;
            cursor: pointer;
            transition: 0.3s;
        }
        .filter-btn:hover { background: #cbd5e1; }
        .filter-btn.active {
            background: #fb8500;
            color: white;
        }

        /* Portfolio Grid - REVISED for simplicity and reliability */
        .portfolio-grid {
            display: grid;
            gap: 1.5rem;
            /* A simple, fluid grid that handles responsiveness automatically */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            transition: all 0.5s ease;
        }

        /* Class to hide non-matching items for filtering */
        .portfolio-item.hidden {
            display: none;
        }

        /* Portfolio Item */
        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 1.25rem;
            cursor: pointer;
            box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            /* Ensures a consistent aspect ratio for the image container */
            padding-top: 75%; /* 4:3 aspect ratio (e.g., 600x450) */
        }
        .portfolio-item:hover {
            transform: translateY(-5px) scale(1.02);
        }

        /* Image inside the item */
        .portfolio-item img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.5s ease;
        }
        .portfolio-item:hover img {
            transform: scale(1.1);
        }

        /* Overlay */
        .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255,133,0,0.85), rgba(251,85,0,0.85));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1rem;
            opacity: 0;
            transition: opacity 0.4s ease;
            color: white;
            text-align: left;
        }
        .portfolio-item:hover .overlay { opacity: 1; }
        .overlay h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 700;
        }
        .overlay p {
            margin: 0.25rem 0 0;
            font-size: 0.85rem;
        }

        /* Testimonials Section */
      .testimonial-card {
            background-color: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            padding: 2.5rem;
        }
        .initials-avatar {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.5rem;
            font-weight: 600;
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .carousel-control-prev-icon{
            left:0;
        }
        
        .carousel-control-next-icon{
            right:0;
        }
          .carousel-control-prev-icon,
.carousel-control-next-icon {
    background: none !important; /* remove Bootstrap default */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;   /* bigger circle */
    height: 3rem;
    border-radius: 50%;
    background-color: #fff; /* white circle */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position:absolute;
}

/* Shared arrow styles */
.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    content: '';
    display: block;
    width: 1.4rem;  /* bigger arrow */
    height: 1.4rem;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    background-color: #f97316; 
}

/* Left arrow (prev) */
.carousel-control-prev-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 19.5L9 12l6.5-7.5'/%3E%3C/svg%3E");
}

/* Right arrow (next) */
.carousel-control-next-icon::after {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8.5 4.5L15 12l-6.5 7.5'/%3E%3C/svg%3E");
}

        .carousel-indicators [data-bs-target] {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: none;
            
            background-color: #d1d5db;
        }
        .carousel-indicators .active {
            background-color: #f97316;
        }

        /* Contact Section */
        #contact .contact-form {
            background-color: var(--bg-light);
            padding: 3rem;
            border-radius: 1.5rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        #contact .contact-info-card {
            background: var(--primary);
            color: var(--white-contrast);
            padding: 3rem;
            border-radius: 1.5rem;
        }

        #contact .contact-info-card i {
            font-size: 2rem;
            margin-right: 1rem;
        }

        #contact .contact-info-card li {
            color: rgba(255, 255, 255, 0.8) !important;
        }

        #contact .contact-info-card a {
            color: var(--white-contrast) !important;
        }

        /* Blog Section */
        #blog .blog-card {
            background-color: var(--white-contrast);
            border-radius: 1.5rem;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }

        #blog .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        #blog .blog-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        /* Footer Styles */
        footer {
            background-color: var(--primary);
            color: var(--white-contrast) !important;
        }