/* HOME PAGE STYLES CSS */
  
:root {
  --bs-body-font-family: 'Inter', sans-serif;
  --main: #f8f8f7;
  --secondary: #565449;
  --white: #ffffff;
  --black: #000000;
  --primary: #0275d8;
  --light-grey : #a2a3a3;
  --light-blue : #E4F4FC;
  --grey-shade : #7e8182;
   --bs-accordion-active-color: #FFFFFF; 
     --bs-body-bg: #f8f8f7;
    --logoed-dark: #565449;
    --logoed-green: #FFFFFF;
    --bs-success: #198754;
    --bs-danger: #dc3545;
    --bs-primary: #565449;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --custom-gray-300: #d1d5db;
    --custom-gray-400: #9ca3af;
    --custom-gray-500: #6b7280;
    --custom-gray-600: #4b5563;
    --custom-gray-700: #374151;
    --custom-gray-800: #1f2937;
    --custom-gray-900: #111827;
    --custom-green-400: #4ade80;
    --custom-green-500: #22c55e;
    --custom-green-600: #16a34a;
    --custom-green-700: #15803d;
    --custom-green-900: #14532d;
    --custom-blue-500: #3b82f6;
    --custom-blue-600: #2563eb;
    --custom-blue-700: #1d4ed8;
    --custom-pink-500: #ec4899;
    --custom-yellow-500: #eab308;
    --custom-teal-400: #2dd4bf;
    --custom-teal-500: #14b8a6;
    --custom-teal-600: #0d9488;
    --custom-teal-700: #0f766e;
    --custom-purple-400: #c084fc;
    --custom-purple-600: #9333ea;
    --custom-purple-700: #7e22ce;
    --custom-purple-900: #581c87;
    --custom-red-500: #ef4444;
    --custom-red-600: #dc2626;
    --custom-orange-400: #fb923c;
}

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bs-body-bg);
            color: var(--custom-gray-700);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        .bg-logoed-dark { background-color: var(--logoed-dark); }
        .text-logoed-dark { color: var(--logoed-dark); }
        .border-logoed-dark { border-color: var(--logoed-dark) !important; }
        .btn-logoed-green {
            background-color: var(--logoed-green) !important;
            color: var(--logoed-dark) !important;
            font-weight: bold !important;
            border: 1px solid var(--logoed-dark) !important;
        }
        .btn-logoed-green:hover {
            background-color: #f0f0f0;
            color: var(--logoed-dark);
        }
        .btn-logoed-dark {
            background-color: var(--logoed-dark) !important;
            color: white !important;
        }
        .btn-logoed-dark:hover:not(:disabled) {
            background-color: #424138 !important;
        }
        .hover-effect {
            transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }
        .fade-in-section {
            /*opacity: 0;*/
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        
        /* --- Hero Section Styles --- */
        .hero-section {
            height: 100vh;
            width: 100vw;
            position: relative;
            background-color: #000;
        }
        
        .hero-carousel,
        .hero-carousel .carousel-inner,
        .hero-carousel .carousel-item {
            height: 100%;
        }

        .hero-carousel .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* This ensures the entire image is visible without cropping. */
        }

        .carousel-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.2); /* 20% transparent black */
            z-index: 1;
        }

        .carousel-caption {
            position: absolute;
            bottom: 5rem !important;
            left: 50% !important;
            transform: translateX(-50%);
            text-align: center;
            z-index: 2; /* Ensure it's above the overlay */
            width: 90%;
            max-width: 650px;
            color: white;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
        }

        .carousel-caption h1 {
            font-size: 2.5rem;
            font-weight: bold;
        }

        .carousel-caption .btn {
            margin-top: 1rem;
            padding: 0.75rem 2rem;
            border-radius: 0; /* Sharp corners like Skims */
        }

        .btn-cta-custom {
            background-color: #A4CD39 !important;
            color: #565449 !important;
            font-weight: 800 !important;
            border: none !important;
            transition: all 0.2s ease-in-out !important;
        }

        .btn-cta-custom:hover {
            background-color: #8EAF2E;
            color: #565449;
            transform: translateY(-2px);
        }

        @keyframes pulse-glow {
            0%, 100% {
                box-shadow: 0 0 1rem rgba(164, 205, 57, 0.5);
            }
            50% {
                box-shadow: 0 0 1.75rem rgba(164, 205, 57, 0.7);
            }
        }

        .cta-pulse-button {
            animation: pulse-glow 2.5s infinite ease-in-out;
        }

        @media (max-width: 768px) {
            .carousel-caption {
                bottom: 5rem; 
                max-width: none;
            }

            .carousel-caption h1 {
                font-size: 1.8rem;
            }

            .carousel-caption .btn {
                width: 100%;
            }
        }

        @media (min-width: 769px) {
            .carousel-caption .btn {
                padding: 1rem 3rem;
                font-size: 1.1rem;
            }
        }


        .category-card img, .decoration-card img {
            transition: transform 0.3s ease;
        }
        .category-card:hover img, .decoration-card:hover img {
            transform: scale(1.05);
        }

        /* Styles for Impression Calculator */
        .calculator-section-wrapper {
            background-color: #f8f9fa;
            padding-top: 3rem;
            padding-bottom: 3rem;
        }
        .calculator-container {
            position: relative;
            min-height: 100vh;
            width: 100%;
            overflow-x: hidden;
            color: white;
        }
        .section-breaker-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--custom-gray-900);
            clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
        }
        .deco-shape {
            position: absolute;
            transform: rotate(-8deg);
            animation: floatAnimation 8s ease-in-out infinite;
            border-radius: 0.5rem;
        }
        @keyframes floatAnimation {
            0%, 100% { transform: translateY(0) rotate(-8deg); }
            50% { transform: translateY(-25px) rotate(-8.5deg); }
        }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        input[type="number"] { -moz-appearance: textfield; }
        .slider-track {
            width: 100%;
            height: 8px;
            cursor: pointer;
            background: var(--custom-gray-600);
            border-radius: 9999px;
        }
        .comparison-bar {
            transition: width 0.5s ease-in-out;
        }
        .price-item-progress-bar {
            transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
        }
        .price-item {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid var(--custom-gray-700);
        }
        .price-item.is-clickable:not([data-revealed="true"]):hover {
            transform: translateY(-4px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
            cursor: pointer;
        }
        .price-item.is-locked {
            opacity: 0.6;
            cursor: not-allowed;
        }
        @keyframes pulse-glow-dark {
            0%, 100% { box-shadow: 0 0 15px rgba(86, 84, 73, 0.4); }
            50% { box-shadow: 0 0 25px rgba(86, 84, 73, 0.6); }
        }
        .winner-highlight {
            animation: pulse-glow-dark 2s infinite ease-in-out;
            border-color: var(--logoed-dark) !important;
        }
        @keyframes button-bounce {
            0%, 100% { transform: translateY(0); box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.15); }
            50% { transform: translateY(-6px); box-shadow: 0 0.75rem 1rem rgba(0,0,0,0.2); }
        }
        .button-interactive {
            animation: button-bounce 1.8s infinite ease-in-out;
        }
        .lock-icon {
            transition: opacity 0.4s ease, transform 0.4s ease;
            opacity: 1;
            transform: scale(1);
        }
        .lock-icon.is-hidden {
            opacity: 0;
            transform: scale(0.5);
        }
        .bg-cyan-custom { background-color: var(--logoed-dark); }
        .bg-red-custom { background-color: var(--bs-danger); }
        @keyframes pulse-soft {
            0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(86, 84, 73, 0)); }
            50% { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(86, 84, 73, 0.4)); }
        }
        .did-you-know-btn {
            animation: pulse-soft 2.5s infinite ease-in-out;
        }
        .bg-custom-gray-800 { background-color: var(--custom-gray-800); }
        .bg-custom-gray-900-50 { background-color: rgba(17, 24, 39, 0.5); }
        .bg-custom-gray-700-50 { background-color: rgba(55, 65, 81, 0.5); }
        .bg-custom-green-600 { background-color: var(--custom-green-600) !important; }
        .bg-custom-green-600:hover { background-color: var(--custom-green-700); }
        .bg-custom-blue-600 { background-color: var(--custom-blue-600); }
        .bg-custom-blue-600:hover { background-color: var(--custom-blue-700); }
        .bg-custom-teal-600 { background-color: var(--custom-teal-600); }
        .bg-custom-teal-600:hover { background-color: var(--custom-teal-700); }
        .bg-custom-purple-600 { background-color: var(--custom-purple-600); }
        .bg-custom-purple-600:hover { background-color: var(--custom-purple-700); }
        .bg-custom-red-500 { background-color: var(--custom-red-500); }
        .bg-custom-red-500:hover { background-color: var(--custom-red-600); }
        .bg-custom-gray-600 { background-color: var(--custom-gray-600); }
        .bg-custom-gray-600:hover { background-color: var(--custom-gray-500); }
        .bg-custom-green-900-50 { background-color: rgba(20, 83, 45, 0.5); }
        .bg-custom-purple-900-50 { background-color: rgba(88, 28, 135, 0.5); }
        .text-custom-gray-300 { color: var(--custom-gray-300); }
        .text-custom-gray-400 { color: var(--custom-gray-400); }
        .text-custom-gray-500 { color: var(--custom-gray-500); }
        .text-custom-green-400 { color: var(--custom-green-400); }
        .text-custom-orange-400 { color: var(--custom-orange-400); }
        .text-custom-teal-400 { color: var(--custom-teal-400); }
        .text-custom-purple-400 { color: var(--custom-purple-400); }
        .border-custom-gray-600 { border-color: var(--custom-gray-600); }
        .border-custom-green-400 { border-color: var(--custom-green-400); }
        .border-custom-purple-400 { border-color: var(--custom-purple-400); }

        .form-control-calculator {
            width: 100%;
            background-color: var(--custom-gray-700);
            border: 1px solid var(--custom-gray-600);
            color: white;
            text-align: center;
            font-size: 1.25rem;
            border-radius: 0.5rem;
            padding: 0.5rem;
            transition: all 0.2s ease-in-out;
        }
        .form-control-calculator:focus {
            box-shadow: 0 0 0 2px var(--custom-green-500);
            border-color: var(--custom-green-500);
            background-color: var(--custom-gray-700);
            color: white;
        }
        .btn-calculator {
            color: white !important;
            font-weight: bold !important;
            padding: 0.75rem 1.5rem !important;
            border-radius: 0.5rem !important;
            transition: all 0.3s ease-in-out !important;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
        }
        .btn-calculator:hover {
            color: white;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
            transform: translateY(-2px);
        }

        /* Styles for Interactive Design Showcase */
        .btn:disabled {
            background-color: #9ca3af; /* gray-400 */
            cursor: not-allowed;
            opacity: 0.7;
        }
        .form-input {
            width: 100%;
            padding: 1rem;
            background-color: #f3f4f6; /* bg-gray-100 */
            border-radius: 0.5rem;
            border: 1px solid transparent;
        }
        .form-input:focus {
            outline: none;
            border-color: var(--logoed-dark);
            box-shadow: 0 0 0 2px rgba(86, 84, 73, 0.2);
        }
        .slider-container {
            position: relative;
            user-select: none;
            aspect-ratio: 16 / 9;
        }
        #after-image-wrapper {
            position: relative;
            z-index: 5;
        }
        .before-image-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
            z-index: 10;
        }
        .slider-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: ew-resize;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 30;
        }
        .slider-handle-icon {
            color: var(--logoed-dark);
        }
        #slider-track {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 6px;
            height: 100%;
            background-color: var(--logoed-dark);
            pointer-events: none;
            z-index: 20;
        }
        .magic-reveal {
            position: absolute;
            top: 0;
            left: 50%;
            width: 80px;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(86, 84, 73, 0.3) 0%, rgba(86, 84, 73, 0) 70%);
            transform: translateX(-50%);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.4s ease-out;
            z-index: 15;
        }
        .magic-reveal.visible {
            opacity: 1;
        }
        .nav-dot {
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 9999px;
            background-color: var(--custom-gray-300);
            transition: all 0.3s ease;
            border: none;
        }
        .nav-dot:hover:not(.active) {
            background-color: var(--custom-gray-400);
        }
        .nav-dot.active {
            background-color: var(--logoed-dark);
            transform: scale(1.25);
        }
        #text-content-slider {
            transition: opacity 0.3s ease-in-out;
        }
        #text-content-slider.loading {
            opacity: 0;
        }
        
        /* Styles for Free Design Preview Section */
        .bg-logoed-light-brown { background-color: #f5f3f0; }

        /* Styles for Before & After Showcase */
        #ba-slider {
            position: relative;
            width: 100%;
            overflow: hidden;
            aspect-ratio: 16 / 9;
        }
        #ba-slider img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
        }
        #ba-slider-handle {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 44px;
            height: 44px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 30;
            cursor: ew-resize;
        }
        #ba-slider-track, #ba-magic-reveal {
            position: absolute;
            top: 0;
            left: 50%;
            height: 100%;
            transform: translateX(-50%);
            z-index: 20;
        }
        #ba-slider-track {
            width: 3px;
            background-color: white;
        }
        #ba-magic-reveal {
            width: 200px;
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
            opacity: 0;
            transition: opacity 0.3s;
        }
        #ba-magic-reveal.visible {
            opacity: 1;
        }
        #ba-nav-dots {
            display: flex;
            gap: 0.75rem;
        }
        .ba-nav-dot {
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            background-color: var(--custom-gray-300);
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }
        .ba-nav-dot:hover:not(.active) {
            background-color: var(--custom-gray-400);
        }
        .ba-nav-dot.active {
            background-color: var(--logoed-dark);
            transform: scale(1.25);
        }

        /* Alex Hormozi Section Styles */
        .quote-bubble {
            position: relative;
            background-color: #f3f4f6;
            border-radius: 0.75rem;
            padding: 1.5rem;
            display: inline-block;
        }
        .quote-bubble:after {
            content: "";
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0 20px 20px 20px;
            border-style: solid;
            border-color: transparent transparent #f3f4f6 transparent;
        }


#navbar {
  position: relative;
}

.menu-item {
  border-right: 1px solid #47C0EA;
}

.menu-item:first-child {
  border-left: 1px solid #47C0EA;

}

.menu-link {
  display: block;
  color: #fff;
  padding: 10px 10px;
  text-decoration: none !important;
  font-weight: 800;
}

.menu-item:hover .menu-link {
  color: #fff;
  background-color: var(--secondary);
}

.menu-content {
  position: absolute;
  width: 100%;
  background-color: #ebebeb;
  padding: 30px 0;
  left: 0;
  border-bottom: 5px solid var(--main);
  box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  display: none;
  z-index: 12;
}

.menu-content .menu-content-link {
  display: block;
  padding: 5px 10px;
  transition: 0.25s;
  text-decoration: none;
  font-size: 15px;
}

.menu-content .menu-content-link:hover {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #2D98D1;
}


.menu-item .list-group .active {
  background-color: var(--black);
}
/*
.main-header-sec-bg:hover .menu-content {
  display: block;
}
*/
.tab-content-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* animation */

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }

}

/*Mobile-Navbar*/

#navbar-mobile {
  position: fixed;
  width: 100%;
  inset: 0;
  margin-top: 60px;
  height: 100vh;
  overflow: auto;
  animation: slideUp 0.3s ease-in-out;
  z-index: 1500;
}

#accordion {
  padding: 15px 0;
}

#navbar-mobile .accordion-item .btn {
  padding: 15px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.accordion-item-content {
  background-color: #eee;
}

.accordion-item-content-item {
  padding: 15px 20px;
}

.accordion-content-link {
  display: inline-block;
  padding: 5px 15px;
  transition: 0.25s;
}

.accordion-content-link:hover {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

/************* Home Mega Menu End *************/

.footer-db-notification{
	position:fixed;
	padding-top:50px;
	bottom: 8px;
	left:20px;
}
/* ##################START header auto-suggest ####################*/
.autosuggest-search {
  width: 100%;
  background: #fff;
  height: 60px;
  position:relative;
  display: flex;
}

.autosuggest-search-note{
height: 50px;
  width: 80%;
  margin: 5px;
}

.autosuggest-search-pic {
  height: 44px;
  width: 20%;
  margin: 3px 2%;
}

.autosuggest-search img {
  height: 44px;
  padding: 3px;
  position: absolute;
}
.autosuggest-search p{
font-size: 12px;
}
.top-autosuggest-search-wrapper,.top-autosuggest-search-wrapper{
  z-index: 30;
  width: 84%;
  max-height: 600%;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-behavior: smooth;
  background-color: #fff;
  font-weight: 500;
}

.auto-suggest-search .searchterm:focus {

  color: #535c68;

}

.search input[type="text"] {
  padding-left: 15px;
}
#mob_header_trans{
	margin-top:75px;
}
.main-header-sec-bg{
	display:flex !important;
}
.mobile_bottom{
	display:none;
}
.free-design-custom-modal-width {
    max-width: 935px !important;
}

/* --- Promo Banner Styles --- */
#promo-banner-container {
    overflow: hidden;
}

.promo-slider {
    animation: slide-left 15s linear infinite;
    white-space: nowrap;
}

.promo-message {
    display: inline-block;
}

@keyframes slide-left {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}