/*
Theme Name: Harpluthra 3D Design
Theme URI: http://harpluthra.com
Author: Harpluthra
Description: Custom Bootstrap Theme for 3D Design Portfolio and Shop
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: harpluthra
*/

/* Paste the rest of your global CSS below this comment */

/* =========================================
   1. Global & Typography
   ========================================= */
:root {
    --primary-color: #0d6efd; /* Bootstrap default blue - easy to change */
    --secondary-color: #6c757d;
    --dark-bg: #1a1a1a;
    --light-bg: #f8f9fa;
    --font-heading: 'Roboto', sans-serif; /* Example font */
    --font-body: 'Open Sans', sans-serif;
}

body {
    font-family: var(--font-body);
    color: #333;
    line-height: 1.6;
    padding-top: 80px; /* Offset for fixed header */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

section {
    padding: 80px 0;
}
:root {
    /* Update these variables */
    --font-heading: 'Oswald', sans-serif;
    --font-body: 'Noto Sans', sans-serif;
    
    /* Keep your colors */
    --primary-color: #0d6efd; 
    --secondary-color: #6c757d;
    --dark-bg: #1a1a1a;
}

body {
    font-family: var(--font-body); /* Applies Open Sans to all text */
    color: #333;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn {
    font-family: var(--font-heading); /* Applies Montserrat to titles & buttons */
    letter-spacing: 1px;
}
/* =========================================
   2. Header & Navigation (Global)
   ========================================= */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 80px;
}

.navbar-brand {
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--dark-bg);
}

.nav-link {
    font-weight: 500;
    color: #444 !important;
    margin-right: 15px;
}

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

/* CTA Button Styles */
.btn-cta {
    background-color: var(--primary-color);
    color: #fff;
    padding: 10px 25px;
    border-radius: 5px;
    font-weight: 600;
}

.btn-cta:hover {
    background-color: #0b5ed7;
    color: #fff;
    transform: translateY(-2px);
}

/* =========================================
   3. Homepage Specifics
   ========================================= */
/* Hero Section */
.hero-section {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://placehold.co/1920x1080?text=3D+Kitchen+Render+Background'); /* Replace with real image */
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 150px 0;
    text-align: center;
}

.hero-section h1 {
    font-size: 2.6rem;
    margin-bottom: 20px;
}

.hero-section p.lead {
    font-size: 1.25rem;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Services Preview */
.service-card {
    border: none;
    transition: transform 0.3s;
    height: 100%;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

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

.service-card img {
    height: 200px;
    object-fit: cover;
}

/* Why Work With Me */
.feature-box {
    text-align: center;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    height: 100%;
}

.feature-box i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}
/* Why Choose Us Icons */
.feature-box {
    transition: transform 0.3s ease;
}
.feature-box:hover {
    transform: translateY(-5px);
}
.feature-box i {
    color: var(--primary-color); /* Uses your blue color */
}
/* Portfolio Preview */
.portfolio-item {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 8px;
}

.portfolio-item img {
    width: 100%;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-caption {
    background: #f8f9fa;
    padding: 15px;
    border-bottom: 3px solid #D4AF37 !important;
}

/* =========================================
   4. Footer (Global)
   ========================================= */
.site-footer {
    background-color: var(--dark-bg);
    color: #bbb;
    padding: 60px 0 20px;
}

.site-footer h5 {
    color: #fff;
    margin-bottom: 20px;
}

.site-footer ul {
    list-style: none;
    padding: 0;
}

.site-footer ul li {
    margin-bottom: 10px;
}

.site-footer a {
    color: #bbb;
}

.site-footer a:hover {
    color: #fff;
}

.social-icons a {
    font-size: 1.5rem;
    margin-right: 15px;
}
/* Footer Widget Styling */
.site-footer ul {
    list-style: none;
    padding-left: 0;
}
.site-footer ul li {
    margin-bottom: 8px;
}
.site-footer ul li a {
    color: #6c757d; /* Bootstrap secondary color */
    text-decoration: none;
    transition: color 0.2s;
}
.site-footer ul li a:hover {
    color: #fff;
    padding-left: 5px; /* Slight movement effect */
}

/* =========================================
   WooCommerce Bootstrap Overrides
   ========================================= */

/* 1. Buttons */
.woocommerce button.button, 
.woocommerce a.button, 
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.woocommerce button.button:hover, 
.woocommerce a.button:hover {
    background-color: #0b5ed7 !important; /* Darker Blue */
    transform: translateY(-2px);
}

/* 2. Messages (Alerts) */
.woocommerce-message, 
.woocommerce-info, 
.woocommerce-error {
    background-color: #f8f9fa !important;
    border-top: 3px solid var(--primary-color) !important;
    color: #333 !important;
    padding: 15px 45px 15px !important;
    margin-bottom: 20px !important;
}

/* 3. Product Images */
.woocommerce div.product div.images img {
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* 4. Input Fields */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea {
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    width: 100%;
}
/* =========================================
   WooCommerce Product Grid (3 Columns)
   ========================================= */

/* 1. Force CSS Grid Layout */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
    gap: 24px; /* Space between cards (Bootstrap-like gap) */
    margin-bottom: 40px;
}

/* 2. Remove default WooCommerce styling that breaks grids */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 3. Make the Product Card look like Bootstrap */
.woocommerce ul.products li.product {
    background: #fff;
    border: 1px solid #dee2e6; /* Bootstrap border color */
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.woocommerce ul.products li.product img {
    margin-bottom: 15px !important;
    border-radius: 5px;
}

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.woocommerce ul.products li.product .price {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: block;
}

/* 4. Push the "Add to Cart" button to the bottom */
.woocommerce ul.products li.product .button {
    margin-top: auto; /* Pushes button to bottom of card */
    width: 100%;
    text-align: center;
}

/* =========================================
   Mobile Responsiveness
   ========================================= */
/* Tablet: 2 Columns */
@media (max-width: 992px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 Column */
@media (max-width: 576px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================
   Fix: Remove WooCommerce Pseudo-Elements
   ========================================= */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

/* =========================================
   WooCommerce Single Product Gallery
   ========================================= */

/* 1. Main Image Wrapper */
.woocommerce-product-gallery {
    position: relative;
    margin-bottom: 2rem;
}

/* 2. Main Image Styling */
.woocommerce-product-gallery__image img {
    border-radius: 8px;
    border: 1px solid #dee2e6; /* Bootstrap border */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Thumbnails Grid (Stack Underneath) */
.flex-control-nav.flex-control-thumbs {
    display: flex;
    gap: 10px; /* Space between thumbnails */
    margin-top: 15px; /* Space between main image and thumbnails */
    padding: 0;
    list-style: none;
}

/* 4. Individual Thumbnails */
.flex-control-nav.flex-control-thumbs li {
    width: 20%; /* 5 thumbnails per row (adjust to 25% for 4 per row) */
    cursor: pointer;
}

.flex-control-nav.flex-control-thumbs li img {
    border-radius: 4px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
    opacity: 0.6; /* Dim inactive thumbnails */
}

/* 5. Active/Hover State for Thumbnails */
.flex-control-nav.flex-control-thumbs li img:hover,
.flex-control-nav.flex-control-thumbs li img.flex-active {
    opacity: 1;
    border-color: var(--primary-color); /* Highlight active thumbnail */
    transform: translateY(-2px);
}

/* 6. Hide the default "Magnifying Glass" icon if you prefer just the hover effect */
/* .woocommerce-product-gallery__trigger { display: none; } */

/* =========================================
   WooCommerce "Bootstrapify" Overrides
   ========================================= */

/* 1. INPUTS & TEXTAREAS (Match .form-control) */
.woocommerce input[type="text"],
.woocommerce input[type="password"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da; /* Bootstrap Gray */
    appearance: none;
    border-radius: 0.375rem; /* Rounded corners */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Input Focus State (Blue Glow) */
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 2. SELECT DROPDOWNS (Match .form-select) */
.woocommerce select,
.woocommerce form .form-row select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    /* Use a simple SVG arrow for the dropdown icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

.woocommerce select:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* 3. BUTTONS (Match .btn .btn-primary) */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-message .button {
    display: inline-block;
    font-weight: 600;
    line-height: 1.5;
    color: #fff !important;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    border-radius: 0.375rem !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Button Hover State */
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
    background-color: #0b5ed7 !important; /* Darker Blue */
    border-color: #0a58ca !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* Button Disabled State */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
    opacity: 0.65;
    background-color: var(--primary-color) !important;
    cursor: not-allowed;
    transform: none;
}

/* 4. Quantity Input Fix */
/* Since quantity usually sits next to a button, we limit its width */
.woocommerce .quantity .input-text {
    width: 100px !important;
    text-align: center;
    display: inline-block;
}
/* =========================================
   WooCommerce Cart & Checkout Styling
   ========================================= */

/* 1. Tables (Cart) */
.woocommerce table.shop_table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden; /* Rounds the corners of the table */
    width: 100%;
    margin-bottom: 2rem;
}

.woocommerce table.shop_table th {
    background-color: #f8f9fa; /* Bootstrap light gray */
    padding: 15px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

.woocommerce table.shop_table td {
    padding: 15px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
}

/* 2. Product Remove "X" */
.woocommerce a.remove {
    display: block;
    width: 24px;
    height: 24px;
    line-height: 22px;
    border-radius: 50%;
    color: #dc3545 !important; /* Bootstrap Danger Red */
    border: 1px solid #dc3545;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
}

.woocommerce a.remove:hover {
    background-color: #dc3545;
    color: #fff !important;
}

/* 3. Cart Totals Box */
.cart-collaterals .cart_totals {
    float: none;
    width: 100%;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.cart-collaterals .cart_totals h2 {
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* 4. Checkout Messages (Coupon/Login) */
.woocommerce-info {
    background-color: #e7f1ff;
    border-top: 3px solid #0d6efd;
    color: #0c4128;
    padding: 15px;
    margin-bottom: 20px;
}
/* =========================================
   Shop Page: Product Card Design
   ========================================= */

/* 1. Ensure the card is relative so we can position badges inside it */
.woocommerce ul.products li.product {
    position: relative; 
    overflow: hidden; /* Keeps content inside rounded corners */
}

/* 2. Position the Badge Top-Left over the image */
.woocommerce ul.products li.product .badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    font-size: 0.75rem;
    padding: 6px 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    border-radius: 4px;
}

/* 3. Make sure the link covers the whole image but doesn't block the badge */
.woocommerce ul.products li.product a img {
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
	aspect-ratio:1;
}

/* 4. Zoom effect on Hover */
.woocommerce ul.products li.product:hover a img {
    transform: scale(1.05);
}
/* =========================================
   Shop Page Badge Fixes
   ========================================= */

/* 1. Make the Link relative so the badge stays inside it */
.woocommerce ul.products li.product a {
    display: block;
    position: relative; /* CRITICAL: Anchors the badge */
}

/* 2. Style the Badge */
.badge-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100; /* Force it on top of the image */
    padding: 5px 10px;
    font-size: 0.75rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    pointer-events: none; /* Let users click "through" the badge to the product */
}

/* 3. Ensure Image fills the card correctly */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
}
/* =========================================
   WooCommerce Messages (Alerts)
   ========================================= */

/* 1. Success Message (Added to Cart) */
.woocommerce-message {
    background-color: #d1e7dd;      /* Bootstrap Success Green Light */
    color: #0f5132;                 /* Bootstrap Success Green Dark */
    border: 1px solid #badbcc;
    border-left-width: 5px;         /* Thick accent line on left */
    border-left-color: #198754;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes "View Cart" button to the right */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

/* 2. "View Cart" Button inside the alert */
.woocommerce-message .button {
    background-color: #198754 !important; /* Green Button */
    color: #fff !important;
    border: none !important;
    font-size: 0.9rem !important;
    padding: 5px 15px !important;
    margin-left: 15px;
    float: none !important; /* Fix default WooCommerce floating */
}

.woocommerce-message .button:hover {
    background-color: #157347 !important;
}

/* 3. Info / Error Messages */
.woocommerce-info {
    background-color: #cff4fc; /* Bootstrap Info Blue */
    color: #055160;
    border-left-color: #0dcaf0;
}
.woocommerce-error {
    background-color: #f8d7da; /* Bootstrap Danger Red */
    color: #842029;
    border-left-color: #dc3545;
}




/* =========================================
   FANCY MENU HOVER EFFECTS
   ========================================= */

/* 1. Base Menu Style */
.navbar-light .navbar-nav .nav-link {
    color: #333 !important;
    font-weight: 600;
    padding: 10px 15px !important;
    position: relative; /* Needed for the magic line */
    transition: color 0.3s ease;
    text-transform: uppercase;
    font-size: 80%;
}

/* 2. Hover Color */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: #A68727 !important; /* Primary Blue */
}

/* 3. The Magic Underline Animation */
.navbar-light .navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px; /* Adjust distance from text */
    left: 50%;
    width: 0;     /* Starts invisible */
    height: 2px;  /* Thickness of line */
    background: #A68727;
    transition: width 0.3s ease, left 0.3s ease;
}
.dropdown .nav-link::after{
	display:none !important;
	margin-right:0 !important;
}
.dropdown .nav-link{
	margin-right:0 !important;
}
/* 4. Trigger Animation on Hover */
.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after {
    width: 60% !important;   /* Expands to 80% of text width */
   /* left: 20% !important;     Centers it */
}

/* =========================================
   PREMIUM BUTTON INTERACTIONS
   ========================================= */

/* 1. Primary Button (Gradient Swipe) */
.btn-primary {
    /* Create a wide gradient (200% width) so we can slide it */
    background-image: linear-gradient(to right, #000000 0%, #565656 51%, #000000 100%) !important;
    background-size: 200% auto !important;
    border: none !important;
    border-radius: 50px !important; /* Modern Pill Shape */
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3); /* Soft Glow */
    transition: 0.4s ease-in-out, transform 0.2s;
    font-size: 100% !important;
    letter-spacing: 1px;
}

.btn-primary:hover {
    background-position: right center !important; /* Moves the gradient */
    transform: translateY(-2px); /* Lifts button up */
    box-shadow: 0 8px 20px rgba(13, 110, 253, 0.5); /* Stronger Glow */
}

/* 2. Secondary/Outline Button (Fill Effect) */
.btn-outline-dark, .btn-outline-primary {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 50px !important;
    transition: color 0.4s ease;
}

/* Create the fill layer */
.btn-outline-dark::before, .btn-outline-primary::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background: #212529; /* Dark fill color */
    z-index: -1;
    transform: scaleX(0); /* Hidden initially */
    transform-origin: left;
    transition: transform 0.4s ease-out;
}

/* Hover: Slide the fill in */
.btn-outline-dark:hover::before, .btn-outline-primary:hover::before {
    transform: scaleX(1);
}

.btn-outline-dark:hover {
    color: #fff !important;
    border-color: #212529 !important;
}

.btn-warning {
    background-image: linear-gradient(to right, #D4AF37 0%, #a88721 51%, #D4AF37 100%) !important;
    color: #000 !important; /* Black text usually looks better on yellow */
    background-size: 200% auto !important;
    border: none !important;
    border-radius: 50px !important; /* Modern Pill Shape */
    box-shadow: 0 4px 15px rgba(211, 158, 0, 0.3); /* Soft Glow */
    transition: 0.4s ease-in-out, transform 0.2s;
    font-size: 100% !important;
    letter-spacing: 1px;
}
.btn-warning:hover {
    background-position: right center !important; /* Moves the gradient */
    transform: translateY(-2px); /* Lifts button up */
    box-shadow: 0 8px 20px rgba(211, 158, 0, 0.5); /* Stronger Glow */
}
/* =========================================
   MODERN CTA DESIGN
   ========================================= */

/* 1. The Main Card Container */
.cta-modern {
    /* Rich Gradient Background */
    background: linear-gradient(135deg, #111111 0%, #000000 100%);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.4); /* Deep Blue Glow Shadow */
    border-radius: 24px !important; /* Extra rounded corners */
}

/* 2. Abstract Background Shapes (The "Glass" Orbs) */
.cta-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px); /* Creates the soft glow effect */
    z-index: 1;
}

.cta-shape.shape-1 {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.15);
    top: -100px;
    right: -50px;
}

.cta-shape.shape-2 {
    width: 250px;
    height: 250px;
    background: rgba(0, 0, 0, 0.4);
    bottom: -80px;
    left: -50px;
}

/* 3. The "High Contrast" White Button */
.cta-modern .btn-light {
    background: #fff;
    color: #000; /* Blue text */
    border: none;
    border-radius: 50px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-modern .btn-light:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    color: #000; /* Darker blue on hover */
	background: #D4AF37 !important;
}

/* =========================================
   SOFTWARE SKILLS SECTION (Modern Dark)
   ========================================= */
.software-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d1b2a 100%); /* Deep Dark Blue/Black */
    position: relative;
    overflow: hidden;
}

/* 1. Glass Cards for Skills */
.skill-card {
    background: rgba(255, 255, 255, 0.05); /* Very subtle transparency */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 25px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.skill-card:hover {
    background: rgba(255, 255, 255, 0.1); /* Lighten on hover */
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* 2. The Icons */
.skill-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color); /* Uses your main blue */
    color: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.4); /* Blue Glow */
}

/* 3. Glowing Progress Bars */
.progress-glow {
    background-color: rgba(255, 255, 255, 0.1); /* Dark track */
    height: 8px;
    border-radius: 10px;
    overflow: visible; /* Allows glow to spill out */
}

.progress-bar-glow {
    background: linear-gradient(90deg, #0d6efd 0%, #0dcaf0 100%); /* Blue to Cyan Gradient */
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(13, 202, 240, 0.5); /* Cyan Glow */
    position: relative;
    transition: width 1.5s ease-in-out;
}

/* Optional: Percentage Bubble Tooltip */
.progress-bar-glow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* =========================================
   MODERN SERVICES SECTION (Glass & Hover)
   ========================================= */

.services-modern-section {
    background-color: #f8f9fa; /* Light clean background */
    padding: 100px 0;
}

/* 1. The Card Container */
.service-glass-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft, expansive shadow */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    overflow: hidden;
    height: 100%;
    z-index: 1;
}

/* 2. Hover State (The "Pop") */
.service-glass-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(13, 110, 253, 0.15); /* Blue-tinted shadow */
    border-color: rgba(13, 110, 253, 0.2);
}

/* 3. The Icon Circle */
.service-icon-wrapper {
    width: 80px;
    height: 80px;
    background: rgba(13, 110, 253, 0.1); /* Very light blue */
    color: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 25px;
    transition: all 0.4s ease;
}

.service-glass-card:hover .service-icon-wrapper {
    background: var(--primary-color);
    color: #fff;
    transform: scale(1.1) rotate(5deg); /* Subtle twist */
}

/* 4. Typography */
.service-title {
    font-weight: 800;
    margin-bottom: 15px;
    color: #1a1a1a;
    font-size: 1.5rem;
}

.service-text {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* 5. The "Learn More" Link (Animated Arrow) */
.service-link {
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
}

.service-link i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.service-link:hover i {
    transform: translateX(5px); /* Arrow moves right */
}
/* Animated Download Icon */
.digital-indicator:hover div {
    transform: scale(1.1);
    background-color: var(--primary-color) !important; /* Turns blue on hover */
    color: #fff !important; /* Icon turns white */
}
.woocommerce .products ul, .related .woocommerce ul.products{
    grid-template-columns: repeat(4, 1fr);

}
.site-footer .btn{border-radius: 0 8px 8px 0 !important;}
.woo-master-swatch{font-size:14px; font-weight:400 !important;}

/* Style for the price that appears after selecting a size */
.woocommerce-variation-price {
    margin-bottom: 20px !important;
}
.woocommerce-variation-price .price {
    font-size: 24px;
    font-weight: bold;
    color: #2c3e50 !important; /* Adjust to match your theme */
}

/* Optional: Hide the "Choose an option" label for a cleaner look */
.variations .label {
    display: none;
}
.woocommerce div.product form.cart .reset_variations{
	visibility:hidden !important;
	display:none !important;
}
 .flex-control-thumbs li{
	padding:10px;
}
.flex-control-thumbs li img{
	border: 1px solid #000 !important; 
	padding:5px;
}
/* Bootstrap dropdown fix */
.navbar .dropdown-menu {
    margin-top: 0;
    border-radius: 0.5rem;
}

.navbar .dropdown-menu li a {
    padding: 10px 16px;
    font-size: 14px;
}

.navbar .dropdown-menu li a:hover {
    background-color: #f8f9fa;
}
@media (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu {
      display: block;
  }
}
/* 1. Force the viewport to be square
.woocommerce-product-gallery .flex-viewport { 
    aspect-ratio: 1 / 1 !important; 
    height: auto !important; 
} */

/* 2. Fix the individual image containers */
.woocommerce-product-gallery__image {
    height: 100% !important;
    position: relative; /* Essential for the zoom lens position */
    overflow: hidden;   /* Keep the zoom lens inside the square */
}

/* 3. The actual product image */
.woocommerce-product-gallery__image img.wp-post-image { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
}

/* 4. THE ZOOM FIX: Allow the zoom image to bypass the square object-fit */
.woocommerce-product-gallery__image .zoomImg {
    width: auto !important; 
    height: auto !important; 
    max-width: none !important; 
    max-height: none !important;
    object-fit: none !important; /* The lens must maintain original proportions */
}
.woocommerce div.product .product_title{
	font-size:1.5rem !important;
}
/* 1. Hide only the SKU section */
.product_meta .sku_wrapper { 
    display: none !important; 
}

/* 2. Hide the Tags section (optional, but keeps it clean) */
.product_meta .tagged_as { 
    display: none !important; 
}

/* 3. Ensure Categories are visible and styled cleanly */
.product_meta .posted_in {
    display: block !important;
    font-size: 14px;
    color: #666;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 10px;
}

/* --- HORIZONTAL SCROLLABLE THUMBNAILS --- */

/* 1. Create the scrollable container */
.flex-control-nav.flex-control-thumbs {
    display: flex !important;
    flex-wrap: nowrap !important; /* Forces them into one line */
    overflow-x: auto !important;  /* Enables horizontal scroll */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
    padding: 10px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
}

/* 2. Custom Scrollbar Styling for Chrome/Safari */
.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    height: 6px;
}
.flex-control-nav.flex-control-thumbs::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

/* 3. Set a fixed size for the thumbnail items */
.flex-control-nav.flex-control-thumbs li {
    flex: 0 0 80px !important; /* Each thumbnail will be 80px wide */
    width: 80px !important;
    margin-right: 10px !important;
    padding: 0 !important;
}

/* 4. Thumbnail Image Styling */
.flex-control-nav.flex-control-thumbs li img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

/* 5. Highlight active thumbnail with your accent color */
.flex-control-nav.flex-control-thumbs li img.flex-active {
    border: 2px solid <?php echo $color; ?> !important;
    transform: scale(0.95);
}
.woo-master-swatch{padding:10px 15px !important;}
.stock{display:none !important;}
.nav-item{white-space:nowrap;}
.dropdown-menu{padding:0; border-radius:0 !important; border:1px solid thistle;}
.dropdown-menu .active{border:1px solid thistle;}

@media only screen and (max-width: 576px) {
	
}
/* =========================================
   HERO SLIDER - SLOW ZOOM (Ken Burns Effect)
   ========================================= */

/* 1. Ensure the slider wrapper hides any image overflow as it zooms */
.carousel-inner {
    overflow: hidden;
}

/* 2. Define the starting state of the images */
.carousel-item img {
    transform: scale(1);
    /* Set origin to center so it zooms straight inward */
    transform-origin: center center; 
}

/* 3. Create the animation keyframes (Zooms in by 10%) */
@keyframes slowZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/* 4. Trigger the animation ONLY when the slide is active */
.carousel-item.active img {
    /* We set this to 6 seconds (6s) so it continues zooming 
      smoothly even while the 4-second fade transition happens.
    */
    animation: slowZoom 6s linear forwards;
}
.text-gold{color: #D4AF37 !important;}
.carousel-control-next, .carousel-control-prev{top:auto !important;}
/* =========================================
   MAIN NAVIGATION MENU
   ========================================= */

/* 1. Main Nav Links */
.navbar-nav .nav-link,
.main-navigation a {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333333;
    padding: 10px 15px;
    position: relative;
    transition: color 0.3s ease;
}

/* 2. Hover & Active States (Gold text) */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item.current-menu-item .nav-link,
.main-navigation li.current-menu-item > a {
    color: var(--primary-gold, #D4AF37) !important;
}

/* 3. Smooth Gold Underline Animation */
.navbar-nav .nav-link::after,
.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--primary-gold, #D4AF37);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-item.active .nav-link::after,
.navbar-nav .nav-item.current-menu-item .nav-link::after,
.main-navigation li.current-menu-item > a::after {
    width: 70%; /* Expands the line smoothly */
}

/* =========================================
   SECOND LEVEL: DROPDOWN MENUS
   ========================================= */

/* 1. Dropdown Container Styling */
.dropdown-menu,
.sub-menu {
    background-color: #ffffff;
    border: none !important; /* Removes the purple/pink default border */
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); /* Elegant, soft shadow */
    padding: 12px 0;
    margin-top: 15px; 
    min-width: 240px;
    
    /* Animation setup */
    display: block; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. Show Dropdown on Hover */
.nav-item.dropdown:hover > .dropdown-menu,
.menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 3. Dropdown Item Styling */
.dropdown-item,
.sub-menu li a {
    font-size: 13px;
    font-weight: 600;
    color: #555555;
    padding: 12px 25px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    background-color: transparent;
    display: block;
    text-decoration: none;
}

/* 4. Dropdown Item Hover Effect */
.dropdown-item:hover,
.sub-menu li a:hover {
    color: var(--primary-gold, #D4AF37) !important;
    background-color: rgba(212, 175, 55, 0.05); /* Very light gold background */
    padding-left: 32px; /* Smooth nudge to the right effect */
}

/* =========================================
   THIRD LEVEL: SUB-SUB-MENUS
   ========================================= */

/* 1. Positioning the 3rd level menu to the right */
.dropdown-menu .dropdown-menu,
.sub-menu .sub-menu {
    top: 0;
    left: 100%; /* Pushes it exactly next to the parent */
    margin-top: -12px; /* Aligns it vertically */
    margin-left: 0;
    
    /* Slide in from the left instead of bottom */
    transform: translateX(15px); 
}

/* 2. Show 3rd level on hover */
.dropdown-menu .dropdown:hover > .dropdown-menu,
.sub-menu .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 3. Add an arrow to items that have a 3rd level */
.dropdown-menu .dropdown-toggle::after,
.sub-menu .menu-item-has-children > a::after {
    content: '›'; /* Simple elegant arrow */
    float: right;
    font-size: 18px;
    line-height: 14px;
    color: #aaaaaa;
    transition: color 0.3s ease;
}

.sub-menu .menu-item-has-children:hover > a::after {
    color: var(--primary-gold, #D4AF37);
}

/* Remove the underline effect from dropdown links */
.dropdown-item::after,
.sub-menu li a::after {
    display: none;
}
/* =========================================
   THIRD LEVEL MENU FIXES (Overrides)
   ========================================= */

/* 1. Force the parent item to be the anchor point */
.dropdown-menu .dropdown,
.sub-menu .menu-item-has-children {
    position: relative !important;
}

/* 2. Fix the positioning so it snaps to the right side */
.dropdown-menu .dropdown-menu,
.sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important; /* Pushes it exactly outside the right edge */
    margin-top: -12px !important; /* Aligns top edge with parent */
    margin-left: 1px !important; /* Small gap so they don't touch */
}

/* 3. Fix the Text Color (Make it dark grey by default) */
.dropdown-menu .dropdown-menu .dropdown-item,
.sub-menu .sub-menu li a {
    color: #555555 !important; 
    background-color: transparent !important;
}

/* 4. Re-apply Gold ONLY on hover */
.dropdown-menu .dropdown-menu .dropdown-item:hover,
.sub-menu .sub-menu li a:hover {
    color: var(--primary-gold, #D4AF37) !important;
    background-color: rgba(212, 175, 55, 0.05) !important;
}

/* =========================================
   WP GALLERY THUMBNAIL STYLING (Black & Gold)
   ========================================= */

/* 1. Base styling for the image blocks */
.wp-block-gallery .wp-block-image img, 
.gallery .gallery-item img {
    border-radius: 8px; /* Smooth corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); /* Dark shadow to separate from background */
    border: 2px solid #333333; /* Dark grey border */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                box-shadow 0.4s ease, 
                border-color 0.4s ease !important;
    cursor: pointer;
}

/* 2. The Hover Effect (Zoom & Gold Glow) */
.wp-block-gallery .wp-block-image img:hover, 
.gallery .gallery-item img:hover {
    transform: scale(1.04) !important; /* Slight pop out */
    box-shadow: 0 12px 30px rgba(212, 175, 55, 0.2); /* Soft gold glow */
    border-color: var(--primary-gold, #D4AF37); /* Gold border activates */
    z-index: 2; /* Keeps it above other images */
    position: relative;
}

/* Customize the Lightbox UI to match your theme */
.goverlay { background: rgba(0, 0, 0, 0.9) !important; } /* Darker background when open */
.gnext, .gprev, .gclose { color: #D4AF37 !important; } /* Gold navigation arrows */

.service-price-tag .myprice{
	color: #D4AF37;
    font-size: 1.25rem;
    background: #000;
    padding: 5px 10px;
    border-radius: 5px;
}
/* =========================================
   PREMIUM SERVICE PRICE TAG (Black & Gold)
   ========================================= */

.premium-price-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(145deg, #1a1a1a, #000000);
    border: 1px solid var(--primary-gold, #D4AF37);
    color: var(--primary-gold, #D4AF37);
    padding: 10px 24px;
    border-radius: 50px; /* Gives it that sleek pill shape */
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.1); /* Subtle gold glow */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default; /* Keeps it feeling like a badge, not a link */
}

.premium-price-tag .price-icon {
    margin-right: 10px;
    font-size: 1rem;
    opacity: 0.9;
    transition: transform 0.3s ease;
}

/* The Hover Animation */
.premium-price-tag:hover {
    transform: translateY(-3px); /* Floats up slightly */
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25); /* Glow intensifies */
    background: var(--primary-gold, #D4AF37); /* Flips to solid gold */
    color: #000000; /* Text flips to black for contrast */
}

.premium-price-tag:hover .price-icon {
    transform: rotate(-15deg); /* Little playful swing on the icon */
}
/* =========================================
   MOBILE MENU ALIGNMENT FIX
   ========================================= */
@media (max-width: 991px) {
    /* 1. Force the main container to center everything */
    .navbar-nav {
        text-align: center !important;
        width: 100%;
        padding: 0;
    }

    /* 2. Ensure every list item takes up the full width */
    .navbar-nav .nav-item {
        width: 100%;
        display: block;
    }

    /* 3. Strip out any stray padding pushing "Shop" to the left */
    .navbar-nav .nav-link {
        text-align: center !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        display: inline-block; /* Keeps the text and dropdown arrow together */
    }

    /* 4. Fix dropdown arrow alignment if it exists */
    .navbar-nav .dropdown-toggle::after {
        vertical-align: middle;
        margin-left: 8px;
    }
}
/* =========================================
   KILL THE GHOST SPACE (MOBILE DROPDOWN FIX)
   ========================================= */
@media (max-width: 991px) {
    
    /* 1. When the sub-menu is CLOSED, force it to take 0 space */
    .navbar-nav .dropdown-menu:not(.show) {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* 2. When the sub-menu is OPEN, show it normally */
    .navbar-nav .dropdown-menu.show {
        display: block !important;
        height: auto !important;
        padding: 10px 0 !important; /* Adjust if you need more space when open */
    }
}