.elementor-1288 .elementor-element.elementor-element-7883298{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-1288 .elementor-element.elementor-element-78b7901{text-align:center;}.elementor-1288 .elementor-element.elementor-element-78b7901 .elementor-heading-title{font-family:"Roboto Slab", Sans-serif;font-size:45px;font-weight:600;color:var( --e-global-color-text );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1288 .elementor-element.elementor-element-4e4b78d{text-align:center;font-family:"Roboto Slab", Sans-serif;font-size:14px;font-weight:400;}.elementor-1288 .elementor-element.elementor-element-19dad37{--display:flex;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-1288 .elementor-element.elementor-element-d3773f3{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1288 .elementor-element.elementor-element-d3773f3 .elementor-divider-separator{width:100%;}.elementor-1288 .elementor-element.elementor-element-d3773f3 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1288 .elementor-element.elementor-element-99c5925{--display:flex;}.elementor-1288 .elementor-element.elementor-element-612d920{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1288 .elementor-element.elementor-element-612d920 .elementor-divider-separator{width:100%;}.elementor-1288 .elementor-element.elementor-element-612d920 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1288 .elementor-element.elementor-element-8d78359{--display:flex;}.elementor-1288 .elementor-element.elementor-element-1ed885a{--divider-border-style:solid;--divider-color:#000;--divider-border-width:1px;}.elementor-1288 .elementor-element.elementor-element-1ed885a .elementor-divider-separator{width:100%;}.elementor-1288 .elementor-element.elementor-element-1ed885a .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-1288 .elementor-element.elementor-element-9c50ee9{--display:flex;}/* Start custom CSS for html, class: .elementor-element-278ca83 *//* Light Mode Variables */
:root {
    --primary-bg-color: #f5f5f5;
    --secondary-bg-color: #eaeaea;
    --primary-text-color: #333333;
    --secondary-text-color: #666666;
    --button-bg-color: #bc9164;
    --button-text-color: #ffffff;
    --progress-bar-bg: #e0e0e0;
    --progress-bar-fill: #00796b;
    --glass-effect: rgba(255, 255, 255, 0.3);
    --border-color: rgba(255, 255, 255, 0.5);
    --link-hover-color: #005f4f;
}

/* Dark Mode Variables */
:root[data-theme="dark"] {
    --primary-bg-color: #1e212b;
    --secondary-bg-color: #2d303a;
    --primary-text-color: #f5f5f5;
    --secondary-text-color: #c0c0c0;
    --progress-bar-bg: #4a5568;
    --progress-bar-fill: #81c784;
    --glass-effect: rgba(45, 55, 72, 0.5);
    --border-color: rgba(255, 255, 255, 0.2);
    --link-hover-color: #66bb6a;
}

/* General Page Styling */
body {
    font-family: 'Poppins', sans-serif;
    background: var(--primary-bg-color);
    color: var(--primary-text-color);
    margin: 20px;
    transition: background 0.4s ease, color 0.4s ease;
}

h1 {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: var(--primary-text-color);
    margin-bottom: 40px;
    text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

/* Bundle Container */
.bundle-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

/* Bundle Box */
.bundle-box {
    background: var(--secondary-bg-color);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px;
    width: 45%;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.5s ease;
    transform: perspective(500px) rotateX(0deg);
}

.bundle-box:hover {
    transform: perspective(500px) rotateX(5deg) scale(1.07);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.bundle-box h2 {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px;
    color: var(--primary-text-color);
    letter-spacing: 1px;
}

/* Bundle Item */
.bundle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bundle-item img {
    width: 25px;
    height: 25px;
    margin-right: 15px;
    transition: transform 0.3s ease;
}

.bundle-item img:hover {
    transform: scale(1.2);
}

.bundle-item .item-name {
    flex-grow: 1;
    margin-right: 10px;
    color: var(--primary-text-color);
    font-size: 14px;
    font-weight: 500;
}

.bundle-item button {
    padding: 6px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 12px;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 50px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.bundle-item button:hover {
    background-color: #ff8a8a;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.count-display {
    font-weight: bold;
    color: var(--primary-text-color);
    font-size: 14px;
    margin: 0 5px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-bfaedd9 *//* Light Mode Variables */
:root {
    --primary-bg-color: #f5f5f5; /* Very light grey */
    --secondary-bg-color: #eaeaea; /* Slightly darker grey */
    --primary-text-color: #333333; /* Dark grey */
    --secondary-text-color: #666666; /* Mid-grey */
    --button-bg-color: #bc9164; /* Logo color for buttons */
    --button-text-color: #ffffff; /* White text for buttons */
    --progress-bar-bg: #e0e0e0; /* Light grey for the background */
    --progress-bar-fill: #00796b; /* Teal-green for the progress bar */
    --glass-effect: rgba(255, 255, 255, 0.3);
    --border-color: rgba(255, 255, 255, 0.5);
    --link-hover-color: #005f4f; /* Deeper green for hover */
}

/* Dark Mode Variables */
:root[data-theme="dark"] {
    --primary-bg-color: #1e212b; /* Deep slate background */
    --secondary-bg-color: #2d303a; /* Slightly lighter slate-grey */
    --primary-text-color: #f5f5f5; /* Light grey text */
    --secondary-text-color: #c0c0c0; /* Muted grey for secondary text */
    --button-bg-color: #bc9164; /* Logo color for buttons */
    --button-text-color: #ffffff; /* White text for buttons */
    --progress-bar-bg: #4a5568; /* Darker background for progress bar */
    --progress-bar-fill: #81c784; /* Fresh muted green for progress bar */
    --glass-effect: rgba(45, 55, 72, 0.5);
    --border-color: rgba(255, 255, 255, 0.2);
    --link-hover-color: #66bb6a; /* Lighter green for hover */
}

/* General Page Styling */
body {
    font-family: 'Poppins', sans-serif;
    background: var(--primary-bg-color);
    color: var(--primary-text-color);
    margin: 20px;
    transition: background 0.4s ease, color 0.4s ease;
}

h1 {
    text-align: center;
    font-size: 28px; /* Slightly smaller */
    font-weight: bold;
    color: var(--primary-text-color);
    margin-bottom: 40px;
    text-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

/* Bundle Box Styling */
.bundle-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

/* Bundle Box Redesign */
.bundle-box {
    background: var(--secondary-bg-color);
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 20px; /* Reduced padding */
    width: 45%; /* Adjusted for a cleaner look */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
    transition: all 0.5s ease;
    transform: perspective(500px) rotateX(0deg); /* Perspective for 3D effect */
}

.bundle-box:hover {
    transform: perspective(500px) rotateX(5deg) scale(1.07); /* 3D tilt and zoom on hover */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.bundle-box h2 {
    font-size: 18px; /* Smaller font size */
    font-weight: 600;
    text-align: center;
    margin-bottom: 15px; /* Reduced space */
    color: var(--primary-text-color);
    letter-spacing: 1px;
}

/* Bundle Item Styling */
.bundle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 5px 0; /* Reduced padding */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.bundle-item img {
    width: 25px; /* Smaller image size */
    height: 25px; /* Smaller image size */
    margin-right: 15px;
    transition: transform 0.3s ease;
}

.bundle-item img:hover {
    transform: scale(1.2); /* Enlarge icons on hover */
}

.bundle-item .item-name {
    flex-grow: 1;
    margin-right: 10px;
    color: var(--primary-text-color);
    font-size: 14px; /* Smaller font size */
    font-weight: 500;
}

/* Button Redesign */
.bundle-item button {
    padding: 6px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 12px; /* Smaller font size */
    background: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 50px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.bundle-item button:hover {
    background-color: #ff8a8a; /* Change button color on hover */
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3); /* Glow effect */
}

.count-display {
    font-weight: bold;
    color: var(--primary-text-color);
    font-size: 14px; /* Smaller font size */
    margin: 0 5px;
}

/* Progress Bar Redesign */
.progress-bar-container {
    width: 100%;
    background: var(--progress-bar-bg);
    border-radius: 30px;
    overflow: hidden;
    margin: 15px 0; /* Reduced margin */
    position: relative;
}

.progress-bar {
    height: 20px; /* Thinner progress bar */
    width: 0;
    background: var(--progress-bar-fill);
    border-radius: 30px;
    text-align: center;
    font-size: 10px; /* Smaller font size */
    line-height: 20px;
    color: #fff;
    transition: width 0.5s ease-in-out;
}

.progress-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    opacity: 0.5;
    mix-blend-mode: overlay;
}

/* Dark Mode Toggle Button Redesign */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 10px 20px;
    background: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 14px; /* Smaller font size */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Glow for dark mode toggle */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.dark-mode-toggle:hover {
    background-color: #68d391;
    transform: scale(1.1);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .bundle-box {
        width: 45%;
    }
}

@media (max-width: 768px) {
    .bundle-box {
        width: 100%;
    }
}/* End custom CSS */