@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
/*
THEME COLORS: 
#1d7a7a; // #0d9488


*/
/* THEME RE-USE */
.bg-rosePink {
  background-color: #fddae4;
}
.bg-lite-yellow{
  background-color: #fdfcda;
}
.bg-lite-teal{
    background-color:#b9f8f3;
}
.themeBtn{
  color: #fff;
  background-color: #0d9488;
  padding: 10px 27px 10px 27px;
  border-radius: 8px;


  transition: 0.3s ease-in-out;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.themeBtn:hover{
  background-color: #36454f;
}
.themeGreenBtn{
  color: #fff;
  background-color: #35cf68;
  padding: 10px 20px 10px 20px;
  border-radius: 8px;
  box-shadow: 5px 6px rgba(0,0,0,0.61);
  border: solid 1px #36454f;
  transition: 0.3s ease-in-out;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.themeGreenBtn:hover{
  background-color: #36454f;
}
/* END THEME RE-USE */


        /* Custom styles for mobile menu toggle animation */
        .mobile-submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
            padding-left: 1rem;
        }

        .mobile-submenu.open {
            max-height: 500px;
            /* Large enough value to accommodate content */
        }

        body {
            font-family: 'Quicksand', sans-serif;
            background-color: #f7f9fc;
        }

        /* --- PURE CSS ICON STYLES --- */
        .burger-icon span {
            display: block;
            width: 24px;
            height: 2px;
            background: currentColor;
            /* Inherit color from parent button */
            border-radius: 9999px;
            transition: all 0.3s ease-in-out;
        }

        .burger-icon span:nth-child(2) {
            margin: 5px 0;
        }

        /* Transform to X state */
        .burger-icon.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }

        .burger-icon.open span:nth-child(2) {
            opacity: 0;
            transform: translateX(-10px);
        }

        .burger-icon.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* Desktop submenu visibility controlled by JS */
        .submenu.open-desktop {
            opacity: 1 !important;
            visibility: visible !important;
            transform: scale(1) !important;
        }
                /* Custom style for the subtle background shape/dots seen in the image */
        .hero-bg-effect {
            background-color: #ffffff;
            /* Applying a subtle inner border/shadow for depth */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
            /* Simulating the faint gray area */
            background-image: radial-gradient(circle at 50% 10%, #f0f0f0 1%, transparent 60%);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }
#Darkbtn {
    background: teal !important;
}


/* */
    body {
        font-family: 'Quicksand', sans-serif;
        background-color: #f7f9fc;
    }

        /* --- Custom CSS Variables for Dynamic Color --- */
        :root {
            --primary-color: #4f46e5; /* Default Indigo 600 */
            --grand-total-color: #1f2937; /* Default Gray 800 */
        }

        /* Utility classes using variables */
        .text-primary { color: var(--primary-color); }
        .bg-primary { background-color: var(--primary-color); }
        .text-grand-total { color: var(--grand-total-color); }
        .focus-ring-primary:focus {
            outline: 2px solid var(--primary-color); 
            outline-offset: 4px;
            border-radius: 4px;
        }
        .hover-bg-primary-light:hover {
            background-color: color-mix(in srgb, var(--primary-color) 10%, white);
        }

        /* Styling for the printable area */
        @media print {
            .controls-panel, .toggle-button, .print-hidden, .bg-dark-footer {
                display: none !important;
            }
            .invoice-container {
                width: 100% !important;
                max-width: none !important;
                margin: 0 !important;
                padding: 0 !important;
                box-shadow: none !important;
                border-radius: 0 !important;
                position: relative !important;
            }
            /* Reset footer color for printing */
            .invoice-container > footer {
                background-color: white !important;
                color: gray !important;
            }
        }

        /* Custom styles for professional invoice appearance */
        .input-text-area {
            border: none;
            padding: 0;
            background-color: transparent;
            width: 100%;
            min-height: 20px;
            resize: none;
            line-height: 1.4;
        }

        .editable-field {
            cursor: text;
        }

        /* Dark Footer Styling - Applied to the footer element */
        .bg-dark-footer {
            background-color: #1f2937; /* Gray 800 */
            color: #f3f4f6; /* Gray 100 */
        }

/* HOME HERO CSS START */
  /* Custom styles for the abstract background effect */
  .hero-container {
    min-height: 75vh;
    position: relative;
    overflow: hidden;
  }

  
  /* Custom style for the single image */
  .hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Ensure content stays above the pseudo-element background */
  .content-wrapper {
    position: relative;
    z-index: 10;
    overflow: hidden;
  }

  /* Responsive adjustments for smaller screens (maintaining gradient change) */
  @media (max-width: 1023px) { 
    .hero-container::before {
        width: 100%;
        height: 60%; 
   
    background-repeat: no-repeat;
    background-position: left;
    }
    /* Set a reasonable height for the single image on mobile */
    .single-image-container {
      height: 24rem; /* 384px */
    }
  }



/* HOME HERO CSS END */ 
/* HOME CORE SERVICES START */

#servCards{
    margin-top: 50px;
    padding: 20px;
}
.card {
padding: 10px;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.1);
}
#cardTitle{
  text-align:center;
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  margin-top: 0px;
  background-color: #36454f;
  border-radius: 8px;
}
#coreServ{
  font-size: 30px;
}
/* HOME CORE SERVICES END */

/* CONTACT FORM FOOTER */ 
        /* Custom styles for the form input appearance */
       #contactForm .form-input-line {
            border: none;
            border-bottom: 2px solid #ccc;
            background: transparent;
            outline: none;
            transition:  0.3s;
        }
       #contactForm .form-input-line:focus {
            border-bottom-color: #000; /* Darker border on focus */
        }
/* CONTACT FORM FOOTER */

/* cookies */
.modal-overlay {
            /* INCREASED Z-INDEX to the maximum safe value (2,147,483,647) to ensure the modal sits on top of all other elements */
            z-index: 9999; 
        }
        .modal-container {
            max-height: 90vh;
            overflow-y: auto;
        }
        
        /* --- Custom Toggle Switch Styling Fix --- */
        .toggle-checkbox {
            /* Initial position of the thumb (left side) */
            left: 0;
            transition: left 0.2s ease-in-out, border-color 0.2s ease-in-out;
            /* Ensure the absolute positioning works within the relative parent */
            top: 0;
            margin: 0; 
        }

        .toggle-checkbox:checked {
            /* Move thumb to the right when checked (w-12 container - w-6 thumb - 4px border*2 padding) 
               The left is set to '16px' which is (w-12 / 4) to visually center the shift */
            left: 16px; 
            border-color: #14b8a6; /* Teal-500 */
        }
        
        .toggle-label {
            /* Transition for the track background */
            transition: background-color 0.2s ease-in-out;
        }

        .toggle-checkbox:checked + .toggle-label {
            /* Change track color to teal when checked */
            background-color: #14b8a6; /* Teal-600 */
        }
/* cookies */

/* TEMPLATES CSS*/

    .filterContain{
            max-width: 1280px;
            margin: 0 auto;
            padding: 2rem 2rem;
    }


        /* Header */
        .filterContain .header {
            text-align: center;
            margin-bottom: 3rem;
        }

        .filterContain .header h1 {
            font-size: 2.25rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            color: #1f2937; /* Replaced --color-text-dark */
        }

        .filterContain .header p {
            font-size: 1.125rem;
            color: #4b5563; /* Replaced --color-text-light */
        }

        /* Search Input */
       .filterContain .search-container {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
            padding: 0 1rem;
        }

       .filterContain .search-input {
            width: 100%;
            max-width: 500px;
            /* ADJUSTMENT: Reduced vertical padding to match the visual height of the buttons */
            padding: 0.5rem 0.5rem !important;
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            font-size: 1rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        
        .filterContain .search-input:focus {
            outline: none;
            border-color: #35cfcf;
            box-shadow: 0 0 0 3px rgba(53, 207, 207, 0.2); 
        }

        /* Filter Tabs */
        .filterContain .filter-tabs {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 2.5rem;
        }

       .filterContain .filter-btn {
            padding: 0.5rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.2s ease;
            cursor: pointer;
            border: solid 1px #36454f;
            background-color: #ffffff; /* Replaced --color-white */
            color: #4b5563; /* Replaced --color-text-light */
            box-shadow: 5px 6px rgba(0,0,0,0.61);
            transition: 0.3s ease-in-out;
        }

       .filterContain .filter-btn:hover {
            background-color: #35cfcf;
            color: #fff;
        }

        .filterContain .filter-btn.active-filter {
            background-color: #35cfcf;
            color: #fff;
            box-shadow: 5px 6px rgba(0,0,0,0.61);
        }
        
        /* Gallery Grid Layout */
       .filterContain  .gallery-grid {
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1.5rem;
            transition: all 0.4s ease-out; 
        }
        
        @media (min-width: 640px) {
           .filterContain .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
           .filterContain .gallery-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        
        /* Gallery Item Transition Styles */
       .filterContain .gallery-item {
            max-height: 400px; 
            opacity: 1;
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }

        /* Hidden state for smooth disappearance */
        .filterContain .gallery-item.item-hidden {
            max-height: 0;
            opacity: 0;
            padding-top: 0; 
            padding-bottom: 0;
            margin-top: 0; 
            margin-bottom: 0;
            pointer-events: none; 
        }


        /* Card Hover/Visual Styles */
       .filterContain  .gallery-card {
            background-size: cover;
            background-position: center;
            height: 300px;
            position: relative;
            overflow: hidden;
            border-radius: 0.75rem; 
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

       .filterContain .gallery-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
        }

        /* NEW: Price Tag Styling */
        .filterContain .price-tag {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background-color: #35cfcf; /* Primary color */
            color: #ffffff;
            padding: 0.25rem 0.75rem;
            border-radius: 0.5rem;
            font-weight: 700;
            font-size: 0.875rem; /* text-sm */
            z-index: 10;
            
            /* Initial state (hidden) */
            opacity: 0;
            transform: translateY(-10px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        /* NEW: Show price tag on hover */
       .filterContain  .gallery-card:hover .price-tag {
            opacity: 1;
            transform: translateY(0);
        }

       .filterContain .card-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Replaced --color-overlay with its rgba value */
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100%);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            opacity: 0; 
            transition: opacity 0.3s ease;
        }

       .filterContain .gallery-card:hover .card-overlay {
            opacity: 1; 
        }

       .filterContain .card-content {
            padding: 1rem;
            transform: translateY(100%); 
            transition: transform 0.3s ease;
        }

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

       .filterContain .card-content h3 {
            font-size: 1.25rem; 
            font-weight: 700; 
            color: #ffffff; /* Replaced --color-white */
            margin-bottom: 0.5rem;
        }

       .filterContain .card-actions {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
        }

       .filterContain .action-btn {
            flex-grow: 1;
            font-size: 0.875rem; 
            font-weight: 500; 
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            transition: background-color 0.2s ease;
            text-align: center;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
            cursor: pointer;
            text-decoration: none;
        }

       .filterContain .btn-live-preview {
            padding: 10px;
            width: 100px;
            background-color: #23976e; /* Replaced --color-accent
            */
            color: #ffffff; /* Replaced --color-white */
            overflow: hidden;
        }

        .filterContain .btn-live-preview:hover {
            background-color: #1a7150; 
        }

       .filterContain .btn-buy-now {
            padding: 10px;
            width: 100px;
            background-color: #35cfcf; /* Replaced --color-primary */
            color: #ffffff; /* Replaced --color-white */
        }

       .filterContain .btn-buy-now:hover {
            /* Kept slightly darker shade for hover effect */
            background-color: #2da1a1; 
        }
/* END TEMPLATES CSS */

                /* Hide scrollbar for settings panel but allow content scrolling */
        .off-canvas-menu {
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE and Edge */
        }
        .off-canvas-menu::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

/* --- PRINT STYLES --- */
@media print {
 /* 1. Hide everything that isn't the invoice */
            .no-print {
                display: none !important;
            }

            /* 2. Reset body and invoice container for clean printing */
            body {
                background: none !important;
                margin: 0;
                padding: 0;
            }
            .invoice-container {
                box-shadow: none !important;
                margin: 0 !important;
                width: 100% !important;
                max-width: none !important;
            }

            /* --- FIX: Cover Text Push-down FIX --- */
            /* 3. Ensure the header height adjusts to its content when printing 
               (inputs are removed, changing flow height) */
            .cover-image-header {
                height: auto !important; /* Crucial fix for text shifting */
                min-height: 100px;
                /* Set print background property for the cover image */
                -webkit-print-color-adjust: exact;
                color-adjust: exact;
            }

            /* 4. Ribbon Styling (Updated for better corner wrap appearance) */
    .print-ribbon {
        display: block !important;
        position: absolute;
        top: 25px; /* Moved UP slightly */
        right: -80px; /* Moved FURTHER right to clear the content area */
        transform: rotate(45deg); 
        width: 250px; 
        text-align: center;
        color: white;
        font-size: 14px;
        font-weight: bold;
        padding: 8px 0;
        z-index: 50;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        
        /* MANDATORY FIX: Force background color to print in PDF */
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
            
            .paid-ribbon {
                background-color: #10B981; /* Emerald Green (Green) */
            }
            .unpaid-ribbon {
                background-color: #6B7280; /* Gray-600 (Grey) */
            }
            
            /* --- Other Print Fixes --- */

            /* 5. Client/Contact Details Layout Fix (Override grid for print) */
            .client-contact-grid {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Forces 2 columns on print */
                gap: 2rem !important; /* Maintain gap */
            }
    
    /* 6. Hide ALL editable input fields and display their values as text */
    /* (existing rule 6 block is kept, but the new rules below override the text-align) */
    .invoice-container input,
    .invoice-container textarea {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        background-color: transparent !important;
        color: inherit !important;
        display: inline !important; 
        width: auto !important;
        outline: none !important;
        height: auto !important;
        
        /* Removed: text-align: right !important; from here
           This generic rule was the main culprit, aligning everything right. */
    }
    
    /* --- NEW CRITICAL ALIGNMENT FIXES --- */

    /* FIX 1: Ensure the outer header layout remains a justified flex container. */
    #invoiceHeader > .relative.z-10 {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* FIX 2: Ensure the left column (Company Details) and its inputs align LEFT */
    #invoiceHeader > .relative.z-10 > div:first-child {
        text-align: left !important;
    }
    #invoiceHeader > .relative.z-10 > div:first-child input {
        /* Input fields on the left side (Company Name, Address) */
        text-align: left !important;
    }
    
/* FIX 3: Right column container (Simplified) */
    #invoiceHeader > .relative.z-10 > div:last-child {
        text-align: right !important;
        /* REMOVE: padding-right: 35px !important; from here. */
        /* We move the padding to the children for better control. */
    }
    
    /* Targets the inputs within the right column explicitly */
    #invoiceHeader > .relative.z-10 > div:last-child input {
        text-align: right !important;
    }
    
    /* FIX 5: Shift the INVOICE H1 heading left (Keep your 35px) */
    #invoiceHeader > .relative.z-10 > div:last-child h1 {
        margin-right: 35px !important;
        text-align: right !important;
    }
    
    /* NEW CRITICAL RULE for Invoice Info lines */
    #invoiceHeader > .relative.z-10 > div:last-child p {
        text-align: right !important;
        /* 1. Force the line not to break */
        white-space: nowrap !important;
        /* 2. Apply the same 35px offset as the H1 margin */
        padding-right: 35px !important;
    }
    /* Re-application of the `text-right` class specific rule (optional, but robust) */
    #invoiceHeader input.text-right {
        text-align: right !important;
    }
/* 2B: CRITICAL FIX for Company Name and Address */
    #companyName,
    #companyAddress {
        /* Force text inside the input to align left */
        text-align: left !important;
        
        /* Ensure the element occupies its full space/width for left flush */
        /* Overrides the 'width: auto !important' from rule #6, which was 
           causing the input content to collapse and float mid-way. */
        width: 100% !important; 
        
        /* Ensure it behaves like a block for proper alignment, 
           overriding 'display: inline !important' if necessary. 
           (Using inline-block is often safer than block in this context) */
        display: inline-block !important; 
        
        /* Clear any float remnants */
        float: none !important; 
    }

    
    #invoiceHeader > .relative.z-10 > div:last-child p {
        text-align: right !important;
    }
    /* --- END NEW CRITICAL ALIGNMENT FIXES --- */
    
    
    #tableHeader {
    /* Applies to the THEAD element */
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
    }
}
/* End Print Styles */