:root {
    --primary: #ff470f;
    --primary-dark: #e03d0d;
    --secondary: #1a1a2e;
    --dark: #0d0d0d;
    --light: #f1f1f1;
    --gray-100: #f1f1f1;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --transition: all 0.3s ease;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.12);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
}

/* Border Effect for Images */
.border-effect {
    border-style: solid;
    border-width: 3px;
    border-color: #000;
    border-radius: 12px;
    box-shadow: 5px 5px 0px 0px #000;
    overflow: hidden;
    line-height: 0;
}

.border-effect img {
    border-radius: 0;
    display: block;
    width: 100%;
    height: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.6;
    color: var(--gray-800);
    background: #f1f1f1;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
}

ul, ol {
    list-style: none;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.section-dark {
    background: var(--dark);
    color: var(--light);
}

.section-gray {
    background: var(--gray-100);
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-ai-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ff470f;
    font-size: 14px;
    font-weight: 500;
    margin-top: 12px;
}
.section-ai-text svg {
    color: #ff470f;
}

.about-ai-statement {
    margin-top: 20px;
    padding: 16px 20px;
    background: rgba(255, 71, 15, 0.08);
    border-left: 3px solid #ff470f;
    border-radius: 0 8px 8px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.section-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
        color: var(--dark);
    margin-bottom: 16px;
}

.section-subtitle {
    font-size: 18px;
    color: var(--gray-600);
    max-width: 600px;
    margin: 0 auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: var(--transition);
}

.btn-primary {
    background: var(--dark);
    color: var(--light);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 50px;
}

.btn-primary::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    background: #ff470f;
    transition: width 0.4s ease, height 0.4s ease;
    z-index: -1;
    border-radius: 0 100% 0 0;
}

.btn-primary:hover::before {
    width: 200%;
    height: 200%;
}

.btn-primary:hover {
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--dark);
    color: var(--dark);
}

.btn-outline:hover {
    background: var(--dark);
    color: var(--light);
}

.btn-white {
    background: var(--light);
    color: var(--dark);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 50px;
}

.btn-white::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    background: #ff470f;
    transition: width 0.4s ease, height 0.4s ease;
    z-index: -1;
    border-radius: 0 100% 0 0;
}

.btn-white:hover::before {
    width: 200%;
    height: 200%;
}

.btn-white:hover {
    color: #fff;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--light);
    transition: var(--transition);
}

.header.scrolled {
    box-shadow: var(--shadow);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
}

.logo-img {
    height: 50px;
    width: auto;
}

.cart-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.cart-icon svg {
    width: 24px;
    height: 24px;
    color: var(--dark);
}

.cart-icon:hover svg {
    color: var(--primary);
}

.cart-icon .cart-count {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    font-size: 15px;
    font-weight: 400;
    color: var(--dark);
    position: relative;
}

.nav-link:hover {
    color: var(--dark);
}

.nav-badge {
    color: #ff470f;
    font-size: 13px;
    font-weight: bold;
    padding: 0px 0px;
    border-radius: 3px;
    margin-left: 2px;
    vertical-align: super;
    position: relative;
    top: -13px;
}

.nav-link.has-dropdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link.has-dropdown svg {
    width: 16px;
    height: 16px;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--light);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 12px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: var(--dark);
}

.dropdown-item:hover {
    background: var(--gray-100);
    color: var(--dark);
}

.header-actions {
    display: flex;
    align-items: center;
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-toggle svg {
    width: 24px;
    height: 24px;
}

.hero-new {
    padding: 140px 0 80px;
    background: #f1f1f1!important;
}

.hero-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

/* Hero AI Badge */
.hero-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 71, 15, 0.1);
    color: #ff470f;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}
.hero-ai-badge svg {
    color: #ff470f;
}

.hero-title-new {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 28px;
    color: var(--dark);
}

.alttancizgi {
    position: relative;
    display: inline-block;
    padding-bottom: 14px;
    isolation: isolate;
}

.alttancizgi::after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    height: 20px;
    border: solid 8px #ff470f;
    border-color: #ff470f transparent transparent transparent;
    border-radius: 30%;
    z-index: -1;
}

.hero-text-new {
    font-size: 17px;
    color: var(--dark);
    margin-bottom: 36px;
    line-height: 1.7;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 50px;
}

.btn-hero {
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
}

.btn-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--dark);
    background: none;
    border: none;
    cursor: pointer;
}

.btn-text:hover {
    color: var(--primary);
}

.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.trust-avatars {
    display: flex;
}

.trust-avatars img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
    object-fit: cover;
    background: var(--gray-300);
}

.trust-avatars img:first-child {
    margin-left: 0;
}

.trust-info {
    text-align: left;
}

.trust-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.trust-stars {
    display: flex;
    gap: 2px;
}

.trust-stars svg {
    width: 14px;
    height: 14px;
}

.trust-score {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
}

.trust-text {
    font-size: 13px;
    color: var(--gray-600);
    margin: 0;
}

.hero-image-section {
    padding: 60px 0;
}

.hero-image-wrapper {
    text-align: center;
}

.hero-image-wrapper img {
    max-width: 100%;
    height: auto;
}

.partners {
    padding: 40px 0;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.partners-text {
    font-size: 16px;
    font-weight: 400;
    font-style: italic;
    color: #696969;
    text-align: center;
}

.partners-slider-wrapper {
    margin-top: 20px;
}

.partners-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}


.partner-slide {
    flex-shrink: 0;
}

.partner-slide img {
    height: 35px;
    width: auto;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: var(--transition);
}

.partner-slide img:hover {
    opacity: 1;
    filter: grayscale(0);
}


.page-header-section {
    padding: 140px 0 100px;
    text-align: center;
    background: #f1f1f1;
    border-bottom: 3px solid rgba(0,0,0,0.1);
}

.page-main-title {
    font-size: 100px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}

.breadcrumb {
    font-size: 14px;
    color: #666;
}

.breadcrumb a {
    color: #666;
}

.breadcrumb a:hover {
    color: #000;
}

.breadcrumb span {
    color: #ff470f;
}

.features {
    padding: 100px 0;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 3px solid var(--dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.feature-card {
    padding: 40px 30px;
    border-right: 3px solid var(--dark);
    border-bottom: 3px solid var(--dark);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: transparent;
}

.feature-card:nth-child(3n) {
    border-right: none;
}

.feature-card:nth-child(n+4) {
    border-bottom: none;
}


.feature-card:hover {
    background: var(--dark);
    color: var(--light);
}

.feature-card:hover .feature-icon svg {
    color: #ff470f;
}

.feature-card:hover .feature-text {
    color: rgba(255,255,255,0.7);
}

.feature-card:hover .feature-arrow {
    color: #ff470f;
}

.feature-card:hover .feature-icon .icon-image {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(4578%) hue-rotate(1deg) brightness(102%) contrast(107%);
}

.feature-icon .icon-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transition: none;
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.feature-icon svg {
    width: 48px;
    height: 48px;
    color: var(--dark);
    transition: all 0.3s ease;
}

.feature-icon .icon-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.feature-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
}

.feature-text {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.7;
    flex-grow: 1;
    transition: all 0.3s ease;
}

.feature-arrow {
    margin-top: 24px;
    font-size: 24px;
    font-weight: 900;
    color: var(--dark);
    transition: all 0.3s ease;
}

.about-section {
    padding: 100px 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: var(--radius-lg);
}

.solutions-image img{
    width: 100%;
    border-radius: var(--radius-lg);

}
.about-content h2 {
    font-size: 65px;
    font-weight: 700;
    line-height: 0.9em;
    letter-spacing: -1px;
    color: #000000;
    margin-bottom:35px;
}

.about-content p {
font-size: 20px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--dark);
}

.solutions-section {
    padding: 100px 0;
    background: #f1f1f1;
}

.solutions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.solutions-content h2 {
     font-size: 65px;
    font-weight: 700;
    line-height: 0.9em;
    letter-spacing: -1px;
    color: #000000;
    margin-bottom:35px;

}

.solutions-content p {
font-size: 20px;
    font-weight: 400;
    line-height: 1.6em;
    color: var(--dark);
}

.testimonials {
    padding: 100px 0;
    background: var(--dark);
    color: var(--light);
}

.testimonials-header {
    text-align: center;
    margin-bottom: 60px;
}

.testimonials-header h2 {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.testimonials-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.testimonial-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.testimonial-slider {
    flex: 1;
    overflow: hidden;
    cursor: grab;
    user-select: none;
}

.testimonial-slider:active {
    cursor: grabbing;
}

.testimonial-track {
    display: flex;
    gap: 16px;
    transition: transform 0.5s ease;
    will-change: transform;
}

.testimonial-nav {
    display: none;
}

.testimonial-card {
    background: #0d0d0d;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid rgb(255 255 255 / 18%);
    min-width: calc(33.333% - 11px);
    max-width: calc(33.333% - 11px);
    flex-shrink: 0;
}

.testimonial-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.testimonial-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    color: #fff;
}

.testimonial-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.testimonial-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.testimonial-stars {
    display: flex;
    gap: 2px;
}

.testimonial-stars svg {
    width: 12px;
    height: 12px;
    fill: #ff470f;
}

.testimonial-text {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

.faq-section {
    padding: 100px 0;
    background: #f1f1f1;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.faq-content h2 {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.0;
    margin-bottom: 30px;
    color: #000;
}

.faq-content p {
    font-size: 16px;
    color: var(--dark);
    line-height: 1.8;
    margin-bottom: 30px;
}

.faq-content .btn {
    background: transparent;
    color: #000;
    border: none;
    padding: 0;
    font-weight: 600;
    font-size: 15px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.faq-content .btn:hover {
    text-decoration: none;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border: none;
    border-radius: 0;
    overflow: hidden;
}

.faq-question {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    background: transparent;
    transition: var(--transition);
    gap: 20px;
    color: #000;
}

.faq-question:hover {
    background: transparent;
}

.faq-question svg {
    width: 24px;
    height: 24px;
    transition: var(--transition);
    flex-shrink: 0;
    margin-top: 2px;
}

.faq-item.active .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-item.active .faq-answer {
    padding: 0 0 24px 0;
    max-height: 500px;
}

.faq-answer p {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
}

.cta-section {
    padding: 40px 0;
    background: #f1f1f1;
}

.cta-box {
    background: var(--dark);
    border-radius: var(--radius-lg);
    padding: 135px;
    text-align: center;
    color: var(--light);
}

.cta-box h2 {
font-size: 65px;
    font-weight: 700;
    line-height: 0.9em;
    letter-spacing: -1px;
    margin-bottom: 16px;
}

.cta-box p {
    font-size: 16px;
    color: var(--light);
    margin-bottom: 30px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.footer {
    background: #f1f1f1;
    color: var(--dark);
    padding: 80px 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
}

.footer-grid-new {
    grid-template-columns: 1fr 2fr 1fr;
    gap: 0;
    position: relative;
}

.footer-grid-new .footer-col-left {
    padding-right: 40px;
    border-right: 1px solid #ddd;
}

.footer-grid-new .footer-col-center {
    padding: 0 40px;
}

.footer-grid-new .footer-col-right {
    padding-left: 40px;
    border-left: 1px solid #ddd;
}

.footer-col-left,
.footer-col-right {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.footer-col-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-brand {
    display: block;
    margin-bottom: 24px;
}

.footer-logo img {
    height: 80px;
    width: auto;
}

.footer-description {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 24px;
    max-width: 320px;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-contact a {
    font-size: 14px;
    color: #333;
    transition: var(--transition);
}

.footer-contact a:hover {
    color: #000;
}

.footer-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    font-size: 14px;
    color: #333;
}

.footer-links a:hover {
    color: #000;
}

.footer-bottom {
    padding: 24px 0;
    border-top: 1px solid #ddd;
    margin-top: 60px;
}

.footer-bottom p {
    font-size: 13px;
    color: #666;
}

.footer-social {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
}

.footer-social a {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    color: #333;
}

.footer-social a:hover {
    background: #333;
    color: #fff;
}

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

.footer-social i {
    font-size: 16px;
    color: #333;
}

.footer-social-right {
    justify-content: flex-start;
    margin-top: 16px;
}

/* Private Label Page Styles */
.pl-intro-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pl-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pl-intro-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.pl-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--dark);
}

.pl-intro-image {
    background: #d1d1d1;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4/5;
}

.pl-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pl-image-placeholder {
    width: 100%;
    height: 100%;
    background: #c5c5c5;
}

/* Formulations Slider */
.pl-formulations-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pl-formulations-section .section-title {
    margin-bottom: 50px;
}

.pl-formulations-slider {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.pl-formulations-track {
    display: flex;
    gap: 40px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
    position: relative;
}

.pl-formulations-track:active {
    cursor: grabbing;
}


.pl-formulation-slide {
    flex-shrink: 0;
    width: 200px;
    position: relative;
}

.pl-formulation-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.pl-form-placeholder {
    width: 200px;
    height: 200px;
    background: #e0e0e0;
    border-radius: 50%;
}

/* Why Choose Section */
.pl-why-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pl-why-box {
    background: #000;
    border-radius: 24px;
    padding: 70px;
}

.pl-why-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
}

.pl-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.pl-why-card {
    padding: 30px 20px;
    border-top: 3px solid rgba(255,255,255,0.2);
    transition: border-color 0.3s ease;
}

.pl-why-card:hover {
    border-top: 3px solid #ff470f;
}

.pl-why-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #ff470f;
}

.pl-why-icon i,
.pl-why-icon svg {
    font-size: 40px;
    color: #ff470f;
    fill: #ff470f;
    width: 40px;
    height: 40px;
    stroke-width: 3;
}

.pl-why-icon .icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(28%) sepia(95%) saturate(5000%) hue-rotate(360deg) brightness(95%) contrast(110%);
}

.pl-why-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.pl-why-card p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

/* Comparison Section */
.pl-comparison-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pl-comparison-section .section-title {
    margin-bottom: 50px;
}

.pl-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.pl-comparison-card {
    padding: 40px;
    border-radius: 16px;
}

.pl-card-dark {
    background: #000;
    color: #fff;
}

.pl-card-light {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #000;
}

.pl-card-logo {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #fff;
}

.comparison-logo-invert {
    filter: invert(1) hue-rotate(180deg);
}

.pl-card-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.pl-card-category {
    margin-bottom: 30px;
}

.pl-card-category h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.pl-check-list,
.pl-x-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pl-check-list li,
.pl-x-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.pl-check-list i {
    color: #fff;
    margin-top: 3px;
}

.pl-x-list i {
    color: #ff470f;
    margin-top: 3px;
}

.text-center {
    text-align: center;
}

/* Custom Formulation Page Styles */
.cf-intro-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.cf-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}


.cf-intro-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.cf-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--dark);
}

.cf-intro-image {
    background: #d1d1d1;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: 4/5;
    max-width: 380px;
    margin-left: auto;
}

.cf-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cf-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: #c5c5c5;
}

/* Why Choose Section - Custom Formulation */
.cf-why-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.cf-why-box {
    background: #000;
    border-radius: 24px;
    padding: 70px;
}

.cf-why-title {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 50px;
}

.cf-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.cf-why-card {
    padding: 30px 20px;
    border-top: 3px solid rgba(255,255,255,0.2);
    transition: border-color 0.3s ease;
}

.cf-why-card:hover {
    border-top: 3px solid #ff470f;
}

.cf-why-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #ff470f;
}

.cf-why-icon i,
.cf-why-icon svg {
    font-size: 40px;
    color: #ff470f;
    fill: #ff470f;
    width: 40px;
    height: 40px;
}

.cf-why-icon .icon-image {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(28%) sepia(95%) saturate(5000%) hue-rotate(360deg) brightness(95%) contrast(110%);
}

.cf-why-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.cf-why-card p {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.7);
}

/* Timeline Section */
.cf-timeline-section {
    padding: 100px 0;
    background: #f1f1f1;
}

.cf-timeline-title {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 80px;
    color: #000;
}

.cf-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.cf-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ddd;
    transform: translateX(-50%);
}

.cf-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
}

.cf-timeline-item.left {
    justify-content: flex-start;
    padding-right: 50%;
}

.cf-timeline-item.right {
    justify-content: flex-end;
    padding-left: 50%;
}

.cf-timeline-content {
    max-width: 350px;
    text-align: center;
}

.cf-timeline-item.left .cf-timeline-content {
    text-align: right;
    padding-right: 40px;
}

.cf-timeline-item.right .cf-timeline-content {
    text-align: left;
    padding-left: 40px;
}

.cf-step-label {
    display: inline-block;
    font-size: 13px;
    color: #ff470f;
    margin-bottom: 8px;
}

.cf-timeline-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin-bottom: 12px;
}

.cf-timeline-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
}

.cf-timeline-dot {
    position: absolute;
    left: 50%;
    top: 20px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 3px solid #ff470f;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* Comparison Section - Custom Formulation */
.cf-comparison-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.cf-comparison-section .section-title {
    margin-bottom: 50px;
}

.cf-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.cf-comparison-card {
    padding: 40px;
    border-radius: 16px;
}

.cf-card-dark {
    background: #000;
    color: #fff;
}

.cf-card-light {
    background: #fff;
    border: 1px solid #e0e0e0;
    color: #000;
}

.cf-card-logo {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
}

.cf-card-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.cf-card-category {
    margin-bottom: 30px;
}

.cf-card-category h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

.cf-check-list,
.cf-x-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cf-check-list li,
.cf-x-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.cf-check-list i {
    color: #fff;
    margin-top: 3px;
}

.cf-x-list i {
    color: #ff470f;
    margin-top: 3px;
}

/* Packaging Page Styles */
.pk-intro-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pk-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pk-intro-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.pk-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--dark);
}

.pk-intro-image {
    background: #000;
    border-radius: 24px;
    overflow: hidden;
    aspect-ratio: auto;
}

.pk-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pk-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: #333;
}

/* Both Section */
.pk-both-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pk-both-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 60px;
    color: #000;
}

.pk-alternating-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

.pk-alternating-item.image-right {
    direction: rtl;
}

.pk-alternating-item.image-right > * {
    direction: ltr;
}

.pk-alt-image {
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid #ddd;
    background: #fff;
}

.pk-alt-image img {
    width: 100%;
    height: auto;
}

.pk-alt-placeholder {
    width: 100%;
    aspect-ratio: 1;
    background: #e5e5e5;
}

.pk-alt-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000;
}

.pk-alt-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

.pk-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pk-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
    color: #333;
}

.pk-check-list i {
    color: #000;
    margin-top: 3px;
}

@media (max-width: 1024px) {
    .hero-inner,
    .about-grid,
    .solutions-grid,
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pl-intro-grid,
    .cf-intro-grid,
    .pk-intro-grid {
        grid-template-columns: 1fr;
    }
    .pl-why-grid,
    .cf-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pl-comparison-grid,
    .cf-comparison-grid {
        grid-template-columns: 1fr;
    }
    .pk-alternating-item {
        grid-template-columns: 1fr;
    }
    .pk-alternating-item.image-right {
        direction: ltr;
    }
}

@media (max-width: 768px) {
    .nav {
        display: none;
    }
    .mobile-toggle {
        display: block;
    }
    .hero-title {
        font-size: 36px;
    }
    .section-title,
    .about-content h2,
    .solutions-content h2,
    .faq-content h2 {
        font-size: 32px;
    }
    .features-grid,
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .hero-buttons {
        flex-direction: column;
    }
    .pl-intro-title,
    .cf-intro-title,
    .pk-intro-title {
        font-size: 36px;
    }
    .pl-why-grid,
    .cf-why-grid {
        grid-template-columns: 1fr;
    }
    .pl-why-box,
    .cf-why-box {
        padding: 30px;
    }
    .pk-both-title {
        font-size: 28px;
    }
    .page-main-title {
        font-size: 60px;
    }
    .cf-timeline-title {
        font-size: 28px;
    }
    .cf-timeline-item.left,
    .cf-timeline-item.right {
        padding: 0;
        justify-content: center;
    }
    .cf-timeline-item.left .cf-timeline-content,
    .cf-timeline-item.right .cf-timeline-content {
        text-align: center;
        padding: 0 0 0 50px;
    }
    .cf-timeline-line {
        left: 20px;
    }
    .cf-timeline-dot {
        left: 20px;
    }
}

/* ========================================
   BRAND DEVELOPMENT PAGE STYLES
======================================== */
.bd-intro-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.bd-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.bd-intro-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.bd-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--dark);
}

.bd-intro-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bd-scroll-container {
    position: relative;
    width: 100%;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd-product-image {
    max-width: 512px;
    max-height: 512px;
    z-index: 1;
    position: relative;
}

.bd-hand-image {
    position: absolute;
    right: -77%;
    top: 21%;
    transform: translateX(0);
    max-width: 1000px;
    z-index: 2;
    transition: transform 0.1s ease-out;
    pointer-events: none;
}

.bd-guess-text {
    position: absolute;
    top: -65px;
    left: -33px;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.5px;
    color: #000;
    z-index: 3;
    white-space: nowrap;
    pointer-events: none;
}

.bd-guess-arrow {
    position: absolute;
    top: -24px;
    left: 140px;
    width: 124px;
    height: auto;
    z-index: 10;
    pointer-events: none;
    transform: rotate(-283deg) scale(0.9);
}

.bd-guess-arrow img {
    width: 100%;
    height: auto;
}

/* What's Included Section */
.bd-included-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.bd-included-title {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 60px;
    color: #000;
}

.bd-sections-list {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.bd-section-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    background: #f1f1f1;
    border-radius: 24px;
    overflow: hidden;
}

.bd-section-item.image-right {
    direction: rtl;
}

.bd-section-item.image-right > * {
    direction: ltr;
}

.bd-section-image {
    background: #e0e0e0;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/3;
    margin: 30px;
}

.bd-section-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bd-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: #ccc;
}

.bd-section-content {
    padding: 40px;
    padding-left: 0;
}

.bd-section-item.image-right .bd-section-content {
    padding-left: 40px;
    padding-right: 0;
}

.bd-section-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
}

.bd-section-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
}

.bd-section-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bd-section-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    margin-bottom: 10px;
}

.bd-section-checklist li i {
    color: #000;
    font-size: 14px;
}

/* Brand Development Responsive */
@media (max-width: 1024px) {
    .bd-intro-grid {
        gap: 40px;
    }
    .bd-intro-title {
        font-size: 38px;
    }
    .bd-section-item {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .bd-intro-section {
        padding: 60px 0;
    }
    .bd-intro-grid {
        display: flex;
        flex-direction: column-reverse;
        gap: 40px;
    }
    .bd-intro-title {
        font-size: 32px;
    }
    .bd-scroll-container {
        height: 350px;
        touch-action: manipulation;
        pointer-events: none;
        position: relative;
        overflow: visible;
    }
    .bd-intro-visual {
        overflow: visible;
        max-width: 100%;
    }
    .bd-product-image {
        max-width: 350px;
    }
    .bd-hand-image {
        right: -115px;
        top: 130px;
        max-width: 408px;
        left: auto;
        transform: translateX(0);
    }
    .bd-guess-text {
        display: none;
    }
    .bd-guess-arrow {
        left: 75px;
        top: -65px;
        width: 99px;
    }
    .bd-included-section {
        padding: 60px 0;
    }
    .bd-included-title {
        font-size: 32px;
        margin-bottom: 40px;
    }
    .bd-section-item {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .bd-section-item.image-right {
        direction: ltr;
    }
    .bd-section-image {
        margin: 20px;
        aspect-ratio: 16/9;
    }
    .bd-section-content {
        padding: 30px;
    }
    .bd-section-item.image-right .bd-section-content {
        padding: 30px;
    }
    .bd-section-title {
        font-size: 24px;
    }
}

/* ========================================
   PRODUCT DESIGN PAGE STYLES
======================================== */
.pd-intro-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pd-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.pd-intro-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.pd-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.pd-intro-image {
    border-radius: 24px;
    overflow: hidden;
}

.pd-intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

.pd-image-placeholder {
    width: 100%;
    min-height: 400px;
    background: #f0f0f0;
    border-radius: 24px;
}

/* References Section */
.pd-references-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.pd-references-title {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #000;
}

.pd-references-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px;
}

.pd-references-image {
    width: 100%;
}

.pd-references-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Product Design Gallery Collage */
.pd-gallery-section {
    padding: 40px 0 80px;
    background: #f1f1f1;
    overflow: visible;
}

.pd-gallery-section .container {
    overflow: visible;
}

.pd-gallery-collage {
    position: relative;
    height: 480px;
    width: 100%;
}

.pd-gallery-item {
    position: absolute !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.pd-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pd-gallery-item:hover {
    transform: scale(1.03);
    z-index: 10 !important;
}

.pd-gallery-item-1 {
    width: 18%;
    height: 340px;
    top: 0;
    left: 0;
    z-index: 2;
}

.pd-gallery-item-2 {
    width: 20%;
    height: 320px;
    top: 80px;
    left: 14%;
    z-index: 3;
}

.pd-gallery-item-3 {
    width: 18%;
    height: 260px;
    top: 30px;
    left: 32%;
    z-index: 2;
}

.pd-gallery-item-4 {
    width: 18%;
    height: 300px;
    top: 120px;
    left: 48%;
    z-index: 4;
}

.pd-gallery-item-5 {
    width: 22%;
    height: 440px;
    top: 0;
    right: 0;
    left: auto;
    z-index: 1;
}

/* Product Design Responsive */
@media (max-width: 1024px) {
    .pd-intro-grid {
        gap: 40px;
    }
    .pd-intro-title {
        font-size: 38px;
    }
}

@media (max-width: 768px) {
    .pd-intro-section {
        padding: 60px 0;
    }
    .pd-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pd-intro-title {
        font-size: 32px;
    }
    .pd-references-section {
        padding: 60px 0;
    }
    .pd-references-title {
        font-size: 28px;
    }
    .pd-gallery-collage {
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .pd-gallery-item {
        position: relative;
        width: 100% !important;
        height: 200px !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
}

/* ========================================
   COMPLIANCE PAGE STYLES
======================================== */
.cp-intro-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.cp-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.cp-intro-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #000;
}

.cp-intro-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}

.cp-intro-image {
    border-radius: 24px;
    overflow: hidden;
}

.cp-intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

.cp-image-placeholder {
    width: 100%;
    min-height: 400px;
    background: #e0e0e0;
    border-radius: 24px;
}

/* Regulations Section */
.cp-regulations-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.cp-regulations-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 60px;
    color: #000;
}

.cp-regulations-title .underline-text {
    font-style: italic;
}

.cp-regulations-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.cp-regulation-item {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: center;
}

.cp-regulation-item.image-right {
    grid-template-columns: 1.5fr 1fr;
}

.cp-regulation-item.image-right .cp-regulation-image {
    order: 2;
}

.cp-regulation-item.image-right .cp-regulation-content {
    order: 1;
}

.cp-regulation-image {
    border-radius: 16px;
    overflow: hidden;
    border: 4px solid #1a1a2e;
}

.cp-regulation-image img {
    width: 100%;
    height: auto;
    display: block;
}

.cp-regulation-content h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #000;
}

.cp-regulation-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

.cp-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cp-checklist li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.cp-checklist li i {
    color: #333;
}

/* Certifications Section */
.cp-certifications-section {
    padding: 80px 0;
    background: #f1f1f1;
}

.cp-certifications-title {
    font-size: 42px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: #000;
}

.cp-certifications-title .underline-text {
    font-style: italic;
}

.cp-certifications-desc {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.cp-certifications-slider {
    padding-bottom: 50px;
    overflow: hidden;
}

.cp-certifications-slider .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.cp-certifications-slider .swiper-slide {
    height: auto !important;
    width: calc(25% - 23px) !important;
    flex-shrink: 0;
}

.cp-cert-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 16px;
    padding: 40px 30px;
    height: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}

.cp-cert-item:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.cp-cert-item img {
    max-width: 140px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

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

.cp-certifications-slider .swiper-pagination {
    position: relative;
    margin-top: 30px;
}

.cp-certifications-slider .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #999;
    opacity: 0.5;
}

.cp-certifications-slider .swiper-pagination-bullet-active {
    background: #666;
    opacity: 1;
}

.swiper-scrollbar {
    display: none !important;
}

/* Certification Logos Slider */
.cp-logos-section {
    padding: 0 0 80px;
    background: #f1f1f1;
}

.cp-logos-slider {
    padding-bottom: 50px;
}

.cp-logo-card {
    perspective: 1000px;
    cursor: pointer;
}

.cp-logo-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    transition: transform 0.4s ease;
    transform-style: preserve-3d;
}

.cp-logo-front,
.cp-logo-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

.cp-logo-front {
    background: #fff;
}

.cp-logo-front img {
    max-width: 120px;
    max-height: 100px;
    object-fit: contain;
}

.cp-logo-back {
    background: var(--hover-color, #ff470f);
    transform: rotateY(180deg);
    flex-direction: column;
    gap: 10px;
}

.cp-logo-back img {
    max-width: 100px;
    max-height: 80px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.cp-logo-title {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 4px;
}

.cp-logo-card:hover .cp-logo-inner {
    transform: rotateY(180deg);
}

@media (max-width: 768px) {
    .cp-logo-front,
    .cp-logo-back {
        padding: 20px;
    }
    .cp-logo-front img {
        max-width: 80px;
        max-height: 80px;
    }
}

/* Compliance Responsive */
@media (max-width: 1024px) {
    .cp-intro-grid {
        gap: 40px;
    }
    .cp-intro-title {
        font-size: 38px;
    }
    .cp-regulation-item {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .cp-intro-section {
        padding: 60px 0;
    }
    .cp-intro-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cp-intro-title {
        font-size: 32px;
    }
    .cp-regulations-section {
        padding: 60px 0;
    }
    .cp-regulations-title {
        font-size: 28px;
    }
    .cp-regulation-item,
    .cp-regulation-item.image-right {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .cp-regulation-item.image-right .cp-regulation-image,
    .cp-regulation-item.image-right .cp-regulation-content {
        order: unset;
    }
    .cp-certifications-section {
        padding: 60px 0;
    }
    .cp-certifications-title {
        font-size: 28px;
    }
}

/* ========================================
   PRODUCT CUSTOM FIELDS STYLES
======================================== */
.product-custom-fields {
    margin: 30px 0;
}

.field-wrapper {
    margin-bottom: 20px;
}

.field-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
    font-size: 14px;
}

.field-label .required {
    color: #ff470f;
    margin-left: 3px;
}

.field-input,
.field-select,
.field-textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
    outline: none;
    border-color: #ff470f;
}

.field-radio-group,
.field-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.radio-option,
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: all 0.2s;
}

.radio-option:hover,
.checkbox-option:hover {
    border-color: #ff470f;
}

.radio-option input:checked + span,
.checkbox-option input:checked + span {
    color: #ff470f;
}

.field-swatch-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.swatch-option {
    cursor: pointer;
}

.swatch-option input {
    display: none;
}

.swatch-color {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.swatch-option input:checked + .swatch-color {
    border-color: #ff470f;
    transform: scale(1.1);
}

.image-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.image-swatches .swatch-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    max-width: 80px;
}

.swatch-image {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    border: 3px solid #e0e0e0;
    transition: all 0.2s;
    background: #f5f5f5;
    padding: 8px;
}

.swatch-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.swatch-option input:checked + .swatch-image {
    border-color: #ff470f;
}

.swatch-option input:checked + .swatch-image + .swatch-label,
.swatch-option input:checked + .swatch-text {
    color: #ff470f;
    font-weight: 600;
}

.swatch-label {
    display: block;
    font-size: 12px;
    text-align: center;
    margin-top: 5px;
    color: #666;
}

.text-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.text-swatch-option {
    cursor: pointer;
}

.text-swatch-option input {
    display: none;
}

.swatch-text {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.text-swatch-option:hover .swatch-text {
    border-color: #999;
}

.text-swatch-option input:checked + .swatch-text {
    border-color: #1a1a2e;
    background: #1a1a2e;
    color: #fff;
}

.field-description {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.toggle-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.quote-form-section {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 16px;
    margin-top: 30px;
}

.quote-form-section h3 {
    margin-bottom: 20px;
    font-size: 20px;
}

.quote-submit-btn {
    background: #ff470f;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.quote-submit-btn:hover {
    background: #e02d09;
}

/* ========================================
   PRODUCT PAGE STYLES (New Design)
======================================== */
.pp-section {
    padding: 120px 0 80px;
    background: #f1f1f1;
}

.pp-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 60px;
}

/* Gallery */
.pp-gallery {
    position: sticky;
    top: 100px;
    align-self: start;
    max-width: 630px;
}

.pp-main-image {
    position: relative;
    width: 630px;
    height: 630px;
    margin-bottom: 20px;
    overflow: hidden;
}

.pp-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: opacity 0.4s ease-in-out;
}

.pp-main-image img.fade-out {
    opacity: 0;
}

.pp-ready-badge {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: 80px !important;
    height: 80px !important;
    z-index: 10;
    object-fit: contain !important;
    border-radius: 0 !important;
}

.pp-zoom-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 44px;
    height: 44px;
    background: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}

.pp-zoom-btn:hover {
    background: #f5f5f5;
    transform: scale(1.05);
}

.pp-thumbnails {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.pp-thumb {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    overflow: hidden;
}

.pp-thumb:hover {
    border-color: #ccc;
}

.pp-thumb.active {
    border-color: #1a1a2e;
}

.pp-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Product Info */
.pp-info {
    padding-top: 0;
    align-self: start;
}

.pp-badge {
    display: inline-block;
    background: #1a1a2e;
    color: #fff;
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

.pp-title {
    font-size: 48px;
    font-weight: 700;
    color: #000;
    margin-bottom: 25px;
    line-height: 1.15;
}

.pp-moq {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.pp-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.pp-avg {
    font-size: 22px;
    font-weight: 700;
    color: #000;
}

.pp-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 30px;
}

/* Product Page AI Consult Button */
.pp-ai-consult-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(26, 26, 46, 0.25);
}

.pp-ai-consult-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.pp-ai-consult-btn:hover::before {
    left: 100%;
}

.pp-ai-consult-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 71, 15, 0.35);
    background: linear-gradient(135deg, #ff470f 0%, #ff6b3d 100%);
}

.pp-ai-consult-btn:active {
    transform: translateY(0);
}

.pp-ai-consult-btn .ai-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pp-ai-consult-btn .ai-icon svg {
    width: 18px;
    height: 18px;
}

.pp-quote-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-top: 10px;
}

.pp-quote-divider::before,
.pp-quote-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

.pp-quote-divider span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #333;
}

.pp-success {
    background: #d4edda;
    color: #155724;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 20px;
}

.pp-success i {
    margin-right: 8px;
}

/* Form */
.pp-form {
    border-top: 1px solid #eee;
    padding-top: 25px;
}

.pp-field {
    margin-bottom: 20px;
}

.pp-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    margin-bottom: 10px;
}

.pp-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #000000;
    border-radius: 8px;
    font-size: 14px;
}

.pp-input:focus {
    outline: none;
    border-color: #000;
}

.pp-submit-btn {
    width: 100%;
    background: #1a1a2e;
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 20px;
}

.pp-submit-btn:hover {
    background: #000;
    transform: translateY(-2px);
}

.pp-already-in-cart {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f0f9f0;
    border: 1px solid #4caf50;
    border-radius: 50px;
    padding: 14px 24px;
    margin-top: 20px;
}

.pp-in-cart-text {
    color: #2e7d32;
    font-weight: 600;
    font-size: 15px;
}

.pp-view-cart-link {
    color: #1a1a2e;
    font-weight: 600;
    font-size: 14px;
    text-decoration: underline;
}

/* Tabs */
.pp-tabs-section {
    background: #f1f1f1;
    border-radius: 16px;
    margin-top: 40px;
}

.pp-tabs {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 0;
}

.pp-tab {
    background: none;
    border: none;
    font-size: 16px;
    font-weight: 500;
    color: #999;
    cursor: pointer;
    padding: 0 0 15px 0;
    position: relative;
    transition: color 0.3s ease;
}

.pp-tab:hover {
    color: #666;
}

.pp-tab.active {
    color: #000;
    font-weight: 600;
}

.pp-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: #ff470f;
    border-radius: 2px;
    animation: tabSlide 0.3s ease;
}

@keyframes tabSlide {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.pp-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(10px);
}

.pp-tab-content.active {
    display: block;
    animation: tabFadeIn 0.4s ease forwards;
}

@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pp-tab-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
}

.pp-tab-col h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #000;
}

.pp-ingredients-list,
.pp-standards-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pp-ingredients-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    color: #333;
    margin-bottom: 18px;
    line-height: 1.7;
}

.pp-ingredients-list li i {
    color: #000;
    margin-top: 6px;
    font-size: 12px;
    flex-shrink: 0;
    font-weight: 900;
}

.pp-ingredients-list li strong {
    color: #000;
    font-weight: 700;
}

.pp-standards-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #333;
    margin-bottom: 14px;
}

.pp-standards-list li i {
    color: #ff470f;
    font-size: 14px;
    flex-shrink: 0;
}

.pp-no-data {
    color: #999;
    font-size: 14px;
}

.pp-overview-text {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
}

.pp-inci-text {
    font-size: 15px;
    line-height: 1.9;
    color: #333;
}

/* Field Styles */
.pp-field {
    margin-bottom: 30px;
}

.pp-field-label {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
}

.pp-required { color: #ff470f; margin-left: 3px; }

.pp-input {
    width: 100%;
    padding: 14px 18px;
    border: 2px solid #000;
    border-radius: 10px;
    font-size: 15px;
    background: transparent;
    transition: border-color 0.2s;
}

.pp-input:focus {
    outline: none;
    border-color: #333;
}

.pp-textarea {
    resize: vertical;
    min-height: 120px;
    border-radius: 5px !important;
}

.pp-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 40px;
    cursor: pointer;
}

.pp-radio-group, .pp-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pp-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 30px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    background: transparent;
}

.pp-radio-option:hover {
    border-color: #ccc;
}

.pp-radio-option input {
    display: none;
}

.pp-radio-option:has(input:checked) {
    border-color: #1a1a2e;
    background: #1a1a2e;
    color: #fff;
}

/* Checkbox Option - Simple checkbox style */
.pp-checkbox-option {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 15px;
}

.pp-checkbox-option input {
    display: none;
}

.pp-checkbox-box {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.pp-checkbox-option:hover .pp-checkbox-box {
    border-color: #999;
}

.pp-checkbox-option input:checked + .pp-checkbox-box {
    background: #1a1a2e;
    border-color: #1a1a2e;
}

.pp-checkbox-option input:checked + .pp-checkbox-box::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
}

.pp-checkbox-text {
    color: #333;
}

.pp-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 14px;
}

.pp-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

/* Color Swatches */
.pp-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pp-color-swatch {
    cursor: pointer;
}

.pp-color-swatch input { display: none; }

.pp-color-swatch span {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    transition: all 0.2s;
}

.pp-color-swatch:hover span {
    transform: scale(1.1);
}

.pp-color-swatch input:checked + span {
    border-color: #1a1a2e;
    transform: scale(1.1);
}

/* Image Swatches - 2 columns, label inside */
.pp-image-swatches {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.pp-image-swatch {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    position: relative;
}

.pp-image-swatch input { display: none; }

/* Swatch box - contains image and label inside border */
.pp-swatch-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px solid #ddd;
    border-radius: 16px;
    padding: 20px 15px;
    transition: all 0.2s;
}

.pp-image-swatch:hover .pp-swatch-box {
    border-color: #000;
}

.pp-image-swatch input:checked + .pp-swatch-box {
    border-color: #1a1a2e;
    border-width: 3px;
}

.pp-swatch-img {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.pp-swatch-img img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}

.pp-swatch-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #333;
    line-height: 1.4;
}

.pp-swatch-label strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.pp-swatch-detail {
    display: block;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* Circular Image Swatches (for Lid Color etc.) */
.pp-image-swatches-circular {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pp-image-swatch-circle {
    cursor: pointer;
    display: inline-block;
    position: relative;
}

.pp-image-swatch-circle input { display: none; }

.pp-swatch-img-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pp-swatch-img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-image-swatch-circle:hover .pp-swatch-img-circle {
    border-color: #000;
}

.pp-image-swatch-circle input:checked + .pp-swatch-img-circle {
    border-color: #1a1a2e;
    box-shadow: 0 0 0 2px #1a1a2e;
}

/* Tooltip for circular swatches */
.pp-image-swatch-circle::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    right: 50%;
    left: auto;
    transform: translateX(50%);
    background: #1a1a2e;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    max-width: calc(100vw - 40px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: none;
}

.pp-image-swatch-circle::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    right: 50%;
    left: auto;
    transform: translateX(50%);
    border: 5px solid transparent;
    border-top-color: #1a1a2e;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}

.pp-image-swatch-circle:hover::after,
.pp-image-swatch-circle:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Text Swatches - Rounded pills with border */
.pp-text-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.pp-text-swatch {
    cursor: pointer;
}

.pp-text-swatch input { display: none; }

.pp-text-swatch:not(.pp-text-swatch-type) > span {
    display: inline-block;
    padding: 14px 32px;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.2s;
    min-width: 100px;
    text-align: center;
}

.pp-text-swatch:not(.pp-text-swatch-type):hover > span {
    border-color: #999;
}

.pp-text-swatch:not(.pp-text-swatch-type) input:checked + span {
    border-color: #1a1a2e;
    border-width: 2px;
    background: transparent;
    color: #000;
    font-weight: 500;
}

/* Type field - side by side boxes with 2-line format */
.pp-text-swatches-type {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.pp-text-swatch-type {
    cursor: pointer;
}

.pp-text-swatch-type input { display: none; }

.pp-type-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    border: 2px solid #ddd;
    border-radius: 12px;
    text-align: center;
    transition: all 0.2s;
    height: 100%;
    min-height: 100px;
}

.pp-type-box strong {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.pp-type-subtitle {
    font-size: 14px;
    color: #666;
    font-weight: 400;
}

.pp-text-swatch-type:hover .pp-type-box {
    border-color: #000;
}

.pp-text-swatch-type input:checked + .pp-type-box {
    border-color: #1a1a2e;
    border-width: 3px;
}

/* Lightbox */
.pp-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxFadeIn 0.3s ease;
}

.pp-lightbox.closing {
    animation: lightboxFadeOut 0.3s ease forwards;
}

.pp-lightbox-content {
    position: relative;
    max-width: 80%;
    max-height: 85%;
}

.pp-lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
}

.pp-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 10px 15px;
    line-height: 1;
    border-radius: 50%;
    transition: all 0.2s;
}

.pp-lightbox-close:hover {
    background: rgba(255,255,255,0.2);
}

.pp-lightbox-prev,
.pp-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 20px 18px;
    border-radius: 50%;
    transition: all 0.2s;
}

.pp-lightbox-prev { left: 30px; }
.pp-lightbox-next { right: 30px; }

.pp-lightbox-prev:hover,
.pp-lightbox-next:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-50%) scale(1.1);
}

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lightboxFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes slideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-100px); opacity: 0; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100px); opacity: 0; }
}

@keyframes slideInRight {
    from { transform: translateX(100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Sticky Quote Cart Button */
.quote-cart-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 1000;
    transition: all 0.3s ease;
}

.quote-cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 25px rgba(0,0,0,0.2);
}

.quote-cart-btn.panel-open {
    right: auto;
    left: 30px;
    bottom: auto;
    top: 30px;
}

.quote-cart-btn i {
    font-size: 22px;
    color: #1a1a2e;
}

.quote-cart-count {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 24px;
    height: 24px;
    background: #ff470f;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quote Panel Overlay */
.quote-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.quote-panel-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Quote Panel Sidebar */
.quote-panel {
    position: fixed;
    top: 0;
    right: -520px;
    width: 500px;
    max-width: 100%;
    height: 100%;
    background: #f1f1f1;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -5px 0 30px rgba(0,0,0,0.1);
}

.quote-panel.open {
    right: 0;
}

.quote-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 30px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.quote-panel-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.quote-panel-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #666;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.quote-panel-close:hover {
    color: #000;
}

.quote-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
}

.quote-empty {
    text-align: center;
    padding: 40px 20px;
}

.quote-empty p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
}

.quote-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.quote-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: transparent;
    padding: 25px 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    transition: all 0.2s;
}

.quote-item:last-child {
    border-bottom: none;
}

.quote-item-img {
    width: 80px;
    height: 80px;
    border-radius: 0;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent;
}

.quote-item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quote-item-info {
    flex: 1;
    min-width: 0;
}

.quote-item-name {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quote-item-remove {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    font-size: 22px;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.quote-item-remove:hover {
    color: #ff4444;
}

.quote-panel-footer {
    padding: 20px 30px;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.btn-dark {
    background: #1a1a2e;
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}

.btn-dark:hover {
    background: #000;
}

/* Responsive */
@media (max-width: 1200px) {
    .pp-main-image { width: 100%; height: auto; aspect-ratio: 1; }
    .pp-gallery { max-width: 100%; }
}

@media (max-width: 1024px) {
    .pp-main { gap: 40px; }
    .pp-title { font-size: 26px; }
    .pp-thumb { width: 100px; height: 100px; }
}

@media (max-width: 768px) {
    .pp-main { grid-template-columns: 1fr; gap: 30px; }
    .pp-gallery { position: static; }
    .pp-main-image { width: 100%; height: auto; aspect-ratio: 1; }
    .pp-thumb { width: 80px; height: 80px; }
    .pp-tab-grid { grid-template-columns: 1fr; gap: 30px; }
    .pp-tabs { gap: 15px; overflow-x: auto; }
    .pp-tab { white-space: nowrap; font-size: 13px; }
}

/* ========================================
   CATALOG PAGE STYLES
   ======================================== */
.catalog-hero {
    background: #f1f1f1;
    padding: 45px 0px 75px;
    text-align: center;
    margin-top: 80px;
    border-bottom: 3px solid black;
}

.catalog-title {
    font-size: 120px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 5px;
    letter-spacing: -2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.catalog-breadcrumb {
display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* font-size: 14px; */
    font-size: 15px;
    font-weight: 600;
    color: black;
}

.catalog-breadcrumb a {
    color: #000;
    text-decoration: none;
}

.catalog-breadcrumb a:hover {
    color: #1a1a2e;
}

.catalog-breadcrumb .current {
    color: #ff470f;
}

.catalog-section {
    background: #f1f1f1;
    padding: 40px 0 80px;
}

.catalog-section .container {
    max-width: 1600px;
}

.catalog-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.catalog-tab {
    flex: 1;
    padding: 18px 30px;
    border: 2px solid #1a1a2e;
    border-radius: 50px;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1a1a2e;
}

.catalog-tab:hover {
    background: #000;
    color:white;
}

.catalog-tab.active {
    background: #000;
    color: #fff;
}

.catalog-content {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 50px;
}

.catalog-filters {
    position: sticky;
    top: 100px;
    align-self: start;
    z-index: 100;
    max-height: calc(100vh - 120px);
    overflow: visible;
    padding-right: 10px;
}

.catalog-filters::-webkit-scrollbar {
    width: 6px;
}

.catalog-filters::-webkit-scrollbar-track {
    background: transparent;
}

.catalog-filters::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 3px;
}

.catalog-filters::-webkit-scrollbar-thumb:hover {
    background: #bbb;
}

.filters-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.filters-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a2e;
}

.clear-filters {
    font-size: 13px;
    color: #666;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
}

.clear-filters:hover {
    color: #1a1a2e;
}

.filter-group {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    position: relative;
}

.filter-group[data-group="ready-to-go"] {
    z-index: 200;
    overflow: visible;
}

.filter-group[data-group="ready-to-go"] .filter-checkbox-single {
    overflow: visible;
}

.filter-group:first-of-type {
    border-top: 1px solid #ddd;
}

.filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a2e;
    cursor: pointer;
    padding: 5px 0;
}

.filter-toggle svg {
    transition: transform 0.3s ease;
}

.filter-group.open .filter-toggle svg {
    transform: rotate(180deg);
}

.filter-group-content {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    flex-direction: column;
    gap: 12px;
    display: flex;
    transition: max-height 0.3s ease, padding-top 0.3s ease;
}

.filter-group.open .filter-group-content {
    max-height: 500px;
    padding-top: 15px;
}

.filter-checkbox,
.filter-checkbox-single {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.filter-checkbox input,
.filter-checkbox-single input {
    display: none;
}

.filter-checkbox .checkbox-box,
.filter-checkbox-single .checkbox-box {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-checkbox input:checked + .checkbox-box,
.filter-checkbox-single input:checked + .checkbox-box {
    background: #1a1a2e;
    border-color: #1a1a2e;
}

.filter-checkbox input:checked + .checkbox-box::after,
.filter-checkbox-single input:checked + .checkbox-box::after {
    content: '✓';
    color: #fff;
    font-size: 12px;
}

.filter-count {
    background: #ff470f;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: auto;
}

.filter-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #ff470f;
    color: #fff;
    border-radius: 50%;
    margin-left: auto;
    cursor: pointer;
    position: relative;
    font-size: 10px;
}

.filter-info-icon i {
    font-size: 10px;
    line-height: 1;
}

.filter-info-icon::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    transform: none;
    background: #ff470f;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    width: 280px;
    max-width: calc(100vw - 40px);
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 9999;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.filter-info-icon::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 12px;
    right: auto;
    transform: none;
    border: 6px solid transparent;
    border-top-color: #ff470f;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 9999;
}

.filter-info-icon:hover::before,
.filter-info-icon:hover::after {
    opacity: 1;
    visibility: visible;
}

.catalog-products {
    min-height: 500px;
    position: relative;
    z-index: 1;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.product-card {
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
    display: block;
    position: relative;
    z-index: 1;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card-image {
    position: relative;
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    background: #ebe5df;
    margin-bottom: 15px;
}

.product-card-image .ready-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 70px;
    height: 70px;
    z-index: 10;
    object-fit: contain;
    padding: 0;
}

.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.4s ease;
}

.product-card-image .img-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.product-card:hover .img-hover {
    opacity: 1;
}

.product-card:hover .img-main {
    opacity: 0;
}

.product-card-info h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a2e;
    margin-bottom: 5px;
}

.product-card-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px;
    color: #999;
}

@media (max-width: 1024px) {
    .catalog-content {
        grid-template-columns: 1fr;
    }
    
    .catalog-filters {
        position: static;
    }
    
    .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .catalog-hero .catalog-title,
    .catalog-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
        letter-spacing: -1px;
        padding: 0 10px;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    .catalog-tabs {
        flex-direction: column;
    }
    
    .products-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .catalog-hero .catalog-title,
    .catalog-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
        letter-spacing: -0.5px;
    }
    
    .catalog-breadcrumb {
        font-size: 13px;
        flex-wrap: wrap;
    }
}

/* ===== PRICING PAGE STYLES ===== */
.pricing-section {
    padding: 80px 0 100px;
    background: #f1f1f1;
}

.pricing-header {
    text-align: left;
    max-width: 1000px;
    margin: 0 auto 60px;
}

.pricing-main-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    color: #000;
    margin-bottom: 20px;
}

.pricing-main-title .highlight {
    color: #ff470f;
    font-style: italic;
}

.pricing-description {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
}

.pricing-table-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.pricing-table {
    width: 100%;
    min-width: 700px;
}

.pricing-table-header {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 0;
    padding: 30px 0;
    border-bottom: 1px solid #e0e0e0;
}

.pricing-col {
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.pricing-col-service {
    align-items: flex-start;
}

.service-label {
    font-size: 14px;
    font-weight: 700;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-col-plan {
    text-align: center;
}

.plan-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 12px;
    display: block;
}

.plan-price {
    font-size: 32px;
    font-weight: 700;
    display: block;
    margin-bottom: 6px;
}

.plan-subtitle {
    font-size: 14px;
    color: #1a1a2e;
    display: block;
    font-weight: 400;
}

.pricing-table-body {
    display: flex;
    flex-direction: column;
}

.pricing-row {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: 0;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.pricing-row:hover {
    background-color: transparent;
}

.pricing-row:last-child {
    border-bottom: none;
}

.feature-name {
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pricing-col-value {
    display: flex;
    align-items: center;
    justify-content: center;
}

.value-check {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.value-check svg {
    transition: transform 0.3s ease;
}

.pricing-row:hover .value-check svg {
    transform: none;
}

.value-x {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

.value-text {
    font-size: 14px;
    color: #1a1a2e;
    text-align: center;
    line-height: 1.4;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.value-text strong {
    font-weight: 700;
    font-size: 15px;
    color: #1a1a2e;
}

.value-subtext {
    font-size: 13px;
    font-weight: 400;
    color: #1a1a2e;
}

.pricing-notice {
    max-width: 1000px;
    margin: 40px auto 0;
    padding: 20px 30px;
    border-radius: 12px;
    text-align: center;
}

.pricing-notice p {
    font-size: 14px;
    margin: 0;
    color:white;
}

.pricing-empty {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.pricing-empty-box {
    background: #fff;
    border-radius: 20px;
    padding: 60px 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.pricing-empty-box h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
    color: #000;
}

.pricing-empty-box p {
    font-size: 16px;
    color: #666;
    margin-bottom: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Pricing Page Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes titleSlide {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pricing-title-animate {
    animation: titleSlide 0.8s ease-out forwards;
}

.animate-fade-up {
    opacity: 0;
    animation: fadeUp 0.6s ease-out forwards;
}

.animate-fade-right {
    opacity: 0;
    animation: fadeRight 0.5s ease-out forwards;
}

.animate-scale-in {
    opacity: 0;
    animation: scaleIn 0.5s ease-out forwards;
}

/* Pricing Responsive Styles */
@media (max-width: 1024px) {
    .pricing-main-title {
        font-size: 36px;
    }
    
    .pricing-table-header,
    .pricing-row {
        grid-template-columns: 1.5fr repeat(3, 1fr);
    }
    
    .plan-price {
        font-size: 24px;
    }
    
    .feature-name {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .pricing-section {
        padding: 60px 0 80px;
    }
    
    .pricing-header {
        margin-bottom: 40px;
    }
    
    .pricing-main-title {
        font-size: 28px;
    }
    
    .pricing-description {
        font-size: 14px;
    }
    
    .pricing-table-wrapper {
        margin: 0 -20px;
        padding: 0 20px;
    }
    
    .pricing-table {
        min-width: 600px;
    }
    
    .pricing-table-header {
        padding: 20px 0;
    }
    
    .pricing-col {
        padding: 0 10px;
    }
    
    .plan-price {
        font-size: 20px;
    }
    
    .plan-name {
        font-size: 12px;
    }
    
    .plan-subtitle {
        font-size: 10px;
    }
    
    .pricing-row {
        padding: 15px 0;
    }
    
    .feature-name {
        font-size: 12px;
    }
    
    .value-text {
        font-size: 10px;
        max-width: 80px;
    }
    
    .pricing-notice {
        margin: 30px 0 0;
        padding: 16px 20px;
    }
    
    .pricing-notice p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pricing-main-title {
        font-size: 24px;
    }
    
    .pricing-table {
        min-width: 500px;
    }
    
    .pricing-table-header,
    .pricing-row {
        grid-template-columns: 1.2fr repeat(3, 1fr);
    }
    
    .plan-price {
        font-size: 16px;
    }
    
    .feature-name {
        font-size: 11px;
    }
    
    .value-check svg,
    .value-x svg {
        width: 16px;
        height: 16px;
    }
}

/* ===== FAQ PAGE STYLES ===== */
.faq-page-section {
    padding: 80px 0 100px;
    background: #f1f1f1;
}

.faq-empty {
    text-align: center;
    padding: 80px 20px;
}

.faq-empty p {
    font-size: 18px;
    color: #666;
    margin-bottom: 30px;
}

.faq-category {
    max-width: 900px;
    margin: 0 auto 70px;
}

.faq-category:last-child {
    margin-bottom: 0;
}

.faq-category-title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 40px;
    color: #000;
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

.faq-accordion-item:first-child {
    border-top: 1px solid #e0e0e0;
}

.faq-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.faq-accordion-header:hover {
    opacity: 0.7;
}

.faq-accordion-question {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a2e;
    flex: 1;
    line-height: 1.5;
}

.faq-accordion-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-icon svg {
    color: #1a1a2e;
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.faq-accordion-item.active .faq-accordion-icon {
    transform: rotate(180deg);
}

.faq-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    opacity: 0;
}

.faq-accordion-item.active .faq-accordion-body {
    max-height: 500px;
    opacity: 1;
}

.faq-accordion-content {
    padding: 0 0 25px 0;
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    transform: translateY(-10px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-item.active .faq-accordion-content {
    transform: translateY(0);
}

.faq-accordion-content a {
    color: #ff470f;
    text-decoration: underline;
}

/* FAQ Page Responsive */
@media (max-width: 768px) {
    .faq-page-section {
        padding: 50px 0 70px;
    }
    
    .faq-category {
        margin-bottom: 50px;
    }
    
    .faq-category-title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    .faq-accordion-header {
        padding: 18px 0;
    }
    
    .faq-accordion-question {
        font-size: 18px;
    }
    
    .faq-accordion-content {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .faq-category-title {
        font-size: 20px;
    }
    
    .faq-accordion-question {
        font-size: 16px;
    }
    
    .faq-accordion-icon {
        width: 24px;
        height: 24px;
    }
    
    .faq-accordion-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* ===== GET STARTED PAGE STYLES ===== */
.getstarted-section {
    padding: 80px 0 100px;
    background: #f1f1f1;
}

.getstarted-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
}

.getstarted-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #000;
}

.getstarted-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
}

.getstarted-packages {
    display: grid;
    grid-template-columns: repeat(var(--package-count, 2), 1fr);
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    grid-auto-rows: 1fr;
}

.getstarted-package {
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s;
    position: relative;
    z-index: 1;
}

.getstarted-package:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    z-index: 100;
}

.package-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
    opacity: 0.9;
}

.package-icon svg {
    width: 100%;
    height: 100%;
}

.package-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.package-desc {
    font-size: 16px;
    line-height: 1.7;
    opacity: 0.85;
    margin-bottom: 25px;
}

.package-subtitle {
    margin-bottom: 25px;
}

.subtitle-label {
    display: inline;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    opacity: 1;
    margin-right: 8px;
}

.subtitle-value {
    font-size: 32px;
    font-weight: 700;
    display: inline-block;
    white-space: nowrap;
}

.subtitle-note {
    font-size: 32px;
    font-weight: 700;
    opacity: 1;
    display: inline;
}

.package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex: 1;
}

.package-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    padding: 12px 0;
    border-bottom: none;
}

.package-features li:last-child {
    border-bottom: none;
}

.package-features li svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.package-btn {
    display: block;
    text-align: center;
    padding: 16px 30px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.package-btn.btn-primary-pkg {
    background: #ff470f;
    color: #fff;
}

.package-btn.btn-primary-pkg:hover {
    background: #e63d0d;
    transform: scale(1.02);
}

.package-btn.btn-outline-pkg {
    background: transparent;
    border: 1px solid currentColor;
}

.package-btn.btn-outline-pkg:hover {
    background: rgba(0,0,0,0.05);
}

/* Get Started Responsive */
@media (max-width: 900px) {
    .getstarted-packages {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

@media (max-width: 768px) {
    .getstarted-section {
        padding: 60px 0 80px;
    }
    
    .getstarted-header {
        margin-bottom: 40px;
    }
    
    .getstarted-title {
        font-size: 28px;
    }
    
    .getstarted-package {
        padding: 30px;
    }
    
    .package-title {
        font-size: 22px;
    }
    
    .subtitle-value {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .getstarted-title {
        font-size: 24px;
    }
    
    .getstarted-package {
        padding: 25px;
        border-radius: 16px;
    }
    
    .package-icon {
        width: 50px;
        height: 50px;
    }
    
    .package-title {
        font-size: 20px;
    }
    
    .package-desc {
        font-size: 14px;
    }
}

/* ===== BLOG LISTING PAGE STYLES ===== */
.blog-listing-section {
    padding: 120px 0 100px;
    background: #f1f1f1;
}

.blog-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.blog-section-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
}

.underline-orange {
    position: relative;
    display: inline-block;
}

.recent-section-header {
    margin-top: 80px;
}

.blog-empty {
    text-align: center;
    padding: 80px 20px;
    color: #666;
}

/* Popular Posts Slider - sblcomp.com style */
.popular-posts-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto 60px;
}

.popular-posts-slider {
    flex: 1;
    overflow: hidden;
}

.popular-posts-track {
    display: flex;
    transition: transform 0.4s ease;
}

.popular-post-card {
    flex: 0 0 100%;
    padding: 0 10px;
}

.popular-post-link {
    display: block;
    text-decoration: none;
}

.popular-post-image {
    display: block;
    aspect-ratio: 16/10;
    background: #fff;
    overflow: hidden;
    border-radius: 12px;
    border: 3px solid #000;
    box-shadow: 5px 5px 0px 0px #000;
}

.popular-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.popular-post-card:hover .popular-post-image img {
    transform: scale(1.05);
}

.post-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e5e5 0%, #f5f5f5 100%);
}

.popular-post-title {
    padding: 25px 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #000;
    margin: 0;
}

.popular-slider-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #999;
}

.popular-slider-nav:hover {
    color: #000;
}

.popular-slider-nav svg {
    width: 24px;
    height: 24px;
}

/* Recent Posts List */
.recent-posts-list {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.recent-post-item {
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.3s ease;
}

.recent-post-item:first-child {
    border-top: 1px solid #e0e0e0;
}

.recent-post-item:hover {
    background: rgba(255,255,255,0.5);
}

.recent-post-image {
    flex-shrink: 0;
    width: 140px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    background: #e5e5e5;
}

.recent-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.recent-post-item:hover .recent-post-image img {
    transform: scale(1.05);
}

.recent-post-content {
    flex: 1;
}

.recent-post-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.recent-post-title a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.recent-post-title a:hover {
    color: #ff470f;
}

/* Featured Slider */
.featured-slider-wrapper {
    position: relative;
    max-width: 800px;
    margin: 0 auto 60px;
}

.featured-slider {
    position: relative;
    overflow: hidden;
}

.featured-slide {
    display: none;
    flex-direction: column;
    align-items: center;
}

.featured-slide.active {
    display: flex;
}

.featured-slide-image {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid #000;
    background: #f5f5f5;
}

.featured-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-slide-title {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 25px;
    text-align: center;
}

.featured-slide-title a {
    color: #000;
    text-decoration: none;
}

.featured-slide-title a:hover {
    color: #ff470f;
}

.slider-arrow {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: opacity 0.3s;
    z-index: 10;
}

.slider-arrow:hover {
    opacity: 0.6;
}

.slider-prev {
    left: -60px;
}

.slider-next {
    right: -60px;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s;
}

.slider-dot.active,
.slider-dot:hover {
    background: #000;
}

/* Blog Posts List - sblcomp.com style */
.blog-posts-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.blog-post-item {
    display: flex;
    align-items: center;
    gap: 40px;
    background: transparent;
    border-radius: 0;
    border: none;
    padding: 0;
}

.blog-post-image {
    flex-shrink: 0;
    width: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    display: block;
    border: 3px solid #000;
    box-shadow: 5px 5px 0px 0px #000;
}

.blog-post-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-post-item:hover .blog-post-image img {
    transform: scale(1.02);
}

.blog-post-title {
    flex: 1;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.blog-post-title a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-post-title a:hover {
    color: #ff470f;
}

/* Blog Pagination */
.blog-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 60px;
    padding-top: 40px;
}

.pagination-item {
    font-size: 16px;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    padding: 8px 4px;
    transition: color 0.3s;
}

.pagination-item:hover {
    color: #ff470f;
}

.pagination-item.active {
    color: #ff470f;
    font-weight: 700;
}

.pagination-next {
    font-weight: 600;
}

/* Blog Listing Responsive */
@media (max-width: 900px) {
    .popular-posts-slider-wrapper {
        max-width: 700px;
    }
    
    .popular-post-title {
        font-size: 20px;
    }
    
    .blog-post-image {
        width: 260px;
    }
    
    .blog-post-title {
        font-size: 24px;
    }
}

@media (max-width: 768px) {
    .blog-listing-section {
        padding: 100px 0 80px;
    }
    
    .blog-section-header {
        margin-bottom: 35px;
    }
    
    .blog-section-title {
        font-size: 26px;
    }
    
    .recent-section-header {
        margin-top: 60px;
    }
    
    .popular-posts-slider-wrapper {
        max-width: 100%;
        gap: 10px;
    }
    
    .popular-slider-nav {
        width: 36px;
        height: 36px;
    }
    
    .popular-post-title {
        font-size: 18px;
        padding: 20px 10px;
    }
    
    .blog-posts-list {
        gap: 40px;
    }
    
    .blog-post-item {
        gap: 25px;
    }
    
    .blog-post-image {
        width: 200px;
    }
    
    .blog-post-title {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .blog-listing-section {
        padding: 90px 0 60px;
    }
    
    .blog-section-title {
        font-size: 22px;
    }
    
    .popular-slider-nav {
        display: none;
    }
    
    .popular-posts-slider-wrapper {
        justify-content: center;
    }
    
    .popular-post-title {
        font-size: 16px;
        padding: 15px 10px;
    }
    
    .blog-post-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .blog-post-image {
        width: 100%;
        max-width: 350px;
    }
    
    .blog-post-title {
        font-size: 20px;
    }
    
    .blog-pagination {
        gap: 15px;
    }
    
    .pagination-item {
        font-size: 14px;
    }
}

/* ===== BLEDITOR FRONTEND STYLES ===== */
.bleditor-content {
    max-width: 100%;
}

.bleditor-content .ble-heading {
    margin: 0 0 15px;
    line-height: 1.2;
    color: #000;
    word-wrap: break-word;
}

/* Heading + Image yan yana layout (Profile Card style) */
.ble-profile-auto {
    display: flex;
    align-items: center;
    gap: 25px;
    background: #f1f1f1;
    padding: 35px 40px;
    border-radius: 12px;
    margin: 30px 0;
}

.ble-profile-auto .ble-profile-auto-title {
    flex: 1;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.ble-profile-auto .ble-profile-auto-image {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 12px;
    border: 3px solid #000;
    box-shadow: 5px 5px 0 #000;
    object-fit: cover;
}

@media (max-width: 600px) {
    .ble-profile-auto {
        flex-direction: column;
        text-align: center;
        padding: 25px;
    }
    .ble-profile-auto .ble-profile-auto-image {
        order: -1;
    }
}

.bleditor-content .ble-heading.with-lines {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    width: 100%;
}

.bleditor-content .ble-heading.with-lines::before,
.bleditor-content .ble-heading.with-lines::after {
    content: '';
    flex: 1;
    height: 0;
    border-top: 2px dashed #000;
    min-width: 50px;
}

.bleditor-content .ble-heading.with-lines span {
    flex-shrink: 0;
    white-space: nowrap;
}

.bleditor-content .ble-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.bleditor-content .ble-text p {
    margin-bottom: 15px;
}

.bleditor-content .ble-text p:last-child {
    margin-bottom: 0;
}

.bleditor-content .ble-text a {
    color: var(--link-color, #ff470f);
    text-decoration: underline;
}

.bleditor-content .ble-text a:hover {
    opacity: 0.8;
}

.bleditor-content .ble-text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20px auto;
    border-radius: 12px;
    border: 3px solid #000;
    box-shadow: 5px 5px 0 #000;
}

.bleditor-content .ble-profile-card {
    margin: 30px 0;
}

@media (max-width: 600px) {
    .bleditor-content .ble-profile-card {
        flex-direction: column !important;
        text-align: center;
    }
    .bleditor-content .ble-profile-card .ble-profile-image {
        order: -1;
    }
}

.bleditor-content .ble-image {
    margin: 30px 0;
    text-align: center;
}

.bleditor-content .ble-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bleditor-content .ble-image figcaption {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
    font-style: italic;
}

.bleditor-content .ble-divider {
    margin: 30px auto;
}

.bleditor-content .ble-spacer {
    display: block;
}

.bleditor-content .ble-button {
    margin: 30px 0;
}

.bleditor-content .ble-button a {
    transition: transform 0.2s, box-shadow 0.2s;
}

.bleditor-content .ble-button a:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 70, 16, 0.3);
}

.bleditor-content .ble-list {
    margin: 20px 0;
    padding-left: 25px;
}

.bleditor-content .ble-list li {
    margin-bottom: 10px;
    line-height: 1.6;
}

.bleditor-content .ble-icon-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.bleditor-content .ble-icon-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.bleditor-content .ble-icon-list .ble-icon {
    flex-shrink: 0;
    font-weight: bold;
    font-size: 0.9em;
}

.bleditor-content .ble-text ul,
.bleditor-content .ble-text ol {
    padding-left: 20px;
    margin: 15px 0;
}

.bleditor-content .ble-text ul li,
.bleditor-content .ble-text ol li {
    margin-bottom: 8px;
    line-height: 1.6;
}

.bleditor-content .ble-quote {
    margin: 30px 0;
    padding: 25px 30px;
    background: #f5f5f5;
    border-left: 4px solid #ff470f;
    border-radius: 0 10px 10px 0;
}

.bleditor-content .ble-quote p {
    font-size: 18px;
    font-style: italic;
    margin: 0;
    line-height: 1.7;
}

.bleditor-content .ble-quote cite {
    display: block;
    margin-top: 15px;
    font-size: 14px;
    color: #666;
}

.bleditor-content .ble-html {
    margin: 20px 0;
}

/* Trust/Rating Section from Elementor HTML */
.bleditor-content .trust-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.bleditor-content .avatars-group {
    display: flex;
}

.bleditor-content .avatars-group .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
    background: #ddd;
    background-size: cover;
    background-position: center;
}

.bleditor-content .avatars-group .avatar-1 {
    background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=64&h=64&fit=crop&crop=face');
}

.bleditor-content .avatars-group .avatar-2 {
    background-image: url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=64&h=64&fit=crop&crop=face');
}

.bleditor-content .avatars-group .avatar-3 {
    background-image: url('https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=64&h=64&fit=crop&crop=face');
}

.bleditor-content .avatars-group .avatar-4 {
    background-image: url('https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=64&h=64&fit=crop&crop=face');
}

.bleditor-content .avatars-group .avatar:first-child {
    margin-left: 0;
}

.bleditor-content .rating-text-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bleditor-content .rating-section {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bleditor-content .rating-section .stars {
    display: flex;
    gap: 2px;
}

.bleditor-content .rating-section .star {
    width: 16px;
    height: 16px;
    fill: #FFD700;
}

.bleditor-content .rating-number {
    font-size: 14px;
    font-weight: 600;
}

.bleditor-content .trust-text {
    font-size: 13px;
    opacity: 0.9;
}

.bleditor-content .ble-container {
    margin: 30px 0;
    overflow: hidden;
}

/* CTA Container with background image - Premade Formulations style */
.bleditor-content .ble-container[style*="background-image"] {
    max-width: 600px;
}

.bleditor-content .ble-container[style*="background-image"] .ble-heading {
    font-size: 32px !important;
    line-height: 1.2;
    max-width: 280px;
    margin-bottom: 20px;
}

.bleditor-content .ble-container[style*="background-image"] .ble-icon-list {
    margin-bottom: 25px;
}

.bleditor-content .ble-container[style*="background-image"] .ble-icon-list li {
    font-size: 16px !important;
}

.bleditor-content .ble-container[style*="background-image"] .ble-button {
    text-align: left !important;
    margin-bottom: 20px;
}

.bleditor-content .ble-container[style*="background-image"] .trust-container {
    margin-top: 15px;
}

.bleditor-content .ble-container .ble-heading {
    color: inherit;
}

.bleditor-content .ble-container .ble-text {
    color: inherit;
}

.bleditor-content .ble-container .ble-icon-list {
    color: inherit;
}

.bleditor-content .ble-cta-box {
    margin: 40px 0;
}

.bleditor-content .ble-table-wrapper {
    overflow-x: auto;
    margin: 30px 0;
    border-radius: 12px;
    background: #f1f1f1;
    border: 2px solid #000;
}

.bleditor-content .ble-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.bleditor-content .ble-table th,
.bleditor-content .ble-table td {
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid #000;
}

.bleditor-content .ble-table th {
    background: #000;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
}

.bleditor-content .ble-table tbody tr:last-child td {
    border-bottom: none;
}

.bleditor-content .ble-table tbody tr:hover {
    background: rgba(0,0,0,0.05);
}

.bleditor-content .ble-columns {
    margin: 30px 0;
}

@media (max-width: 768px) {
    .bleditor-content .ble-columns {
        grid-template-columns: 1fr !important;
    }
    
    .bleditor-content .ble-heading {
        font-size: 0.85em;
    }
}

/* ===== BLOG POST PAGE STYLES ===== */

/* Blog Header - Title + Image */
.blog-header-section {
    padding: 120px 0 50px;
    background: #f1f1f1;
    text-align: center;
}

.blog-header-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.25;
    color: #000;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.blog-header-image {
    max-width: 700px;
    margin: 0 auto;
}

.blog-header-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    border: 3px solid #000;
}

/* Blog Divider */
.blog-divider {
    height: 3px;
    background: #000;
    max-width: 100%;
    margin: 0;
}

/* Blog Content Section */
.blog-post-section {
    padding: 60px 0 80px;
    background: #f1f1f1;
}

.blog-post-section .container {
    max-width: 1140px;
}

.blog-post-layout {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 50px;
    align-items: flex-start;
}

.blog-post-main {
    flex: 1 1 0%;
    min-width: 0;
    width: 0;
}

.blog-post-wrapper {
    max-width: 800px;
}

.blog-post-sidebar {
    flex: 0 0 300px;
    width: 300px;
    align-self: flex-start;
    position: sticky;
    top: 100px;
    height: fit-content;
}


.blog-cta-card {
    background: #f1f1f1;
    border-radius: 20px;
    padding: 30px 25px;
    border: 3px solid #000;
    box-shadow: 5px 5px 0px 0px #000;
}

.blog-cta-progress {
    height: 10px;
    background: #e5e5e5;
    border-radius: 10px;
    margin-bottom: 25px;
    overflow: hidden;
}

/* Hide mobile progress bar on desktop, show desktop one */
#mobileReadingProgress {
    display: none;
}

.blog-cta-card .blog-cta-progress {
    display: block;
}

.blog-cta-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff470f, #ff6b4a);
    border-radius: 10px;
    transition: width 0.1s ease-out;
}

.blog-cta-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
    color: #000;
}

.blog-cta-desc {
    font-size: 15px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

.blog-cta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.blog-cta-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    margin-bottom: 10px;
}

.blog-cta-list li svg {
    flex-shrink: 0;
}

.blog-cta-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: #000;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-cta-btn:hover {
    background: #222;
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .blog-post-layout {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }
    
    .blog-post-main {
        width: 100% !important;
        flex: 1 1 100% !important;
    }
    
    .blog-post-sidebar {
        display: none;
    }
}

.blog-post-back {
    margin-bottom: 30px;
}

.blog-post-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s;
}

.blog-post-back a:hover {
    color: #ff470f;
}

.blog-post-category {
    display: inline-block;
    padding: 6px 14px;
    background: #FFEBEE;
    color: #E53935;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.blog-post-title {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #000;
}

.blog-post-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    color: #666;
    font-size: 14px;
    margin-bottom: 40px;
}

.blog-post-image {
    margin-bottom: 40px;
    border-radius: 16px;
    overflow: hidden;
}

.blog-post-image img {
    width: 100%;
    display: block;
}

.blog-post-content {
    font-size: 17px;
    line-height: 1.9;
    color: #444;
}

@media (max-width: 768px) {
    .blog-post-section {
        padding: 120px 0 60px;
    }
    
    /* Hide the entire CTA card on mobile */
    .blog-post-section aside {
        display: none !important;
    }
    
    /* Show and position mobile progress bar at top */
    #mobileReadingProgress {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 4px;
        background: transparent;
        border-radius: 0;
        margin: 0;
        z-index: 9998;
    }
    
    #mobileReadingProgress .blog-cta-progress-bar {
        height: 100%;
        border-radius: 0;
    }
    
    .blog-post-title {
        font-size: 28px;
    }
    
    .blog-post-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ===== BLOG SOCIAL SHARE & MORE GUIDES ===== */
.blog-bottom-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.blog-bottom-left {
    width: 100%;
}

.blog-social-share {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 60px 0 40px;
}

.social-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.social-share-btn:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.social-share-btn.facebook {
    background: #1877f2;
}

.social-share-btn.twitter {
    background: #1da1f2;
}

.social-share-btn.linkedin {
    background: #0a66c2;
}

.social-share-btn.whatsapp {
    background: #25d366;
}

.social-share-btn.email {
    background: #ea4335;
}

/* More Useful Guides */
.more-useful-guides {
    margin-top: 60px;
    padding-top: 40px;
}

.more-guides-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    color: #000;
}

.more-guides-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
    max-width: 700px;
    margin: 0 auto;
}

.more-guide-card {
    text-align: center;
}

.more-guide-link {
    display: block;
    text-decoration: none;
}

.more-guide-image {
    width: 180px;
    height: 140px;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}

.more-guide-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.more-guide-card:hover .more-guide-image img {
    transform: scale(1.05);
}

.guide-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e5e5 0%, #f5f5f5 100%);
}

.more-guide-card-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #000;
    margin: 0;
    padding: 0 5px;
}

.more-guide-link:hover .more-guide-card-title {
    color: #ff470f;
}

@media (max-width: 768px) {
    .blog-post-content h1,
    .bleditor-content h1,
    .bleditor-content .ble-heading[style*="font-size: 42px"],
    .bleditor-content .ble-heading[style*="font-size: 40px"],
    .bleditor-content .ble-heading[style*="font-size: 38px"] {
        font-size: 36px !important;
    }
    
    .blog-post-content h2,
    .bleditor-content h2,
    .bleditor-content .ble-heading[style*="font-size: 36px"],
    .bleditor-content .ble-heading[style*="font-size: 34px"],
    .bleditor-content .ble-heading[style*="font-size: 32px"] {
        font-size: 28px !important;
    }
    
    .blog-post-content h3,
    .bleditor-content h3,
    .bleditor-content .ble-heading[style*="font-size: 28px"],
    .bleditor-content .ble-heading[style*="font-size: 26px"] {
        font-size: 24px !important;
    }
    
    .blog-post-content h4,
    .bleditor-content h4,
    .bleditor-content .ble-heading[style*="font-size: 24px"],
    .bleditor-content .ble-heading[style*="font-size: 22px"] {
        font-size: 20px !important;
    }
    
    .blog-post-content h5,
    .bleditor-content h5,
    .bleditor-content .ble-heading[style*="font-size: 20px"] {
        font-size: 18px !important;
    }
    
    .blog-post-content h6,
    .bleditor-content h6,
    .bleditor-content .ble-heading[style*="font-size: 18px"] {
        font-size: 17px !important;
    }
    
    .more-useful-guides {
        margin-top: 40px;
        padding-top: 30px;
    }
    
    .more-guides-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 15px;
        max-width: 100%;
        padding: 0;
    }
    
    .more-guides-title {
        font-size: 28px;
        margin-bottom: 35px;
    }
    
    .more-guide-image {
        width: 100%;
        height: 120px;
    }
    
    .more-guide-card-title {
        font-size: 14px;
    }
    
    .blog-social-share {
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .social-share-btn {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .blog-post-content h1,
    .bleditor-content h1,
    .bleditor-content .ble-heading[style*="font-size: 42px"],
    .bleditor-content .ble-heading[style*="font-size: 40px"],
    .bleditor-content .ble-heading[style*="font-size: 38px"] {
        font-size: 32px !important;
    }
    
    .blog-post-content h2,
    .bleditor-content h2,
    .bleditor-content .ble-heading[style*="font-size: 36px"],
    .bleditor-content .ble-heading[style*="font-size: 34px"],
    .bleditor-content .ble-heading[style*="font-size: 32px"] {
        font-size: 26px !important;
    }
    
    .blog-post-content h3,
    .bleditor-content h3,
    .bleditor-content .ble-heading[style*="font-size: 28px"],
    .bleditor-content .ble-heading[style*="font-size: 26px"] {
        font-size: 22px !important;
    }
    
    .blog-post-content h4,
    .bleditor-content h4,
    .bleditor-content .ble-heading[style*="font-size: 24px"],
    .bleditor-content .ble-heading[style*="font-size: 22px"] {
        font-size: 19px !important;
    }
    
    .blog-post-content h5,
    .bleditor-content h5,
    .bleditor-content .ble-heading[style*="font-size: 20px"] {
        font-size: 17px !important;
    }
    
    .blog-post-content h6,
    .bleditor-content h6,
    .bleditor-content .ble-heading[style*="font-size: 18px"] {
        font-size: 16px !important;
    }
    
    .more-guides-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 12px;
    }
    
    .more-guides-title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    
    .more-guide-image {
        width: 100%;
        height: 100px;
    }
    
    .more-guide-card-title {
        font-size: 13px;
        padding: 0 2px;
    }
}

/* ===== CART / QUOTE PAGE STYLES ===== */
.cart-hero {
    background: #f1f1f1;
    padding: 130px 0 60px;
    text-align: center;
}

.cart-hero-title {
    font-size: 120px;
    font-weight: 700;
    color: black;
    font-style: normal;
    margin-bottom: 20px;
}

.cart-hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.trust-avatars {
    display: flex;
}

.trust-avatars img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    object-fit: cover;
}

.trust-avatars img:first-child {
    margin-left: 0;
}

.trust-rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.trust-rating .stars {
    color: #ffc107;
    font-size: 14px;
}

.trust-rating .rating-text {
    font-weight: 600;
    font-size: 14px;
}

/* New Cart Hero Trust Section */
.cart-hero-trust-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.trust-avatars-stack {
    display: flex;
}

.trust-avatars-stack img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #f1f1f1;
    margin-left: -12px;
    object-fit: cover;
}

.trust-avatars-stack img:first-child {
    margin-left: 0;
}

.trust-info-below {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.trust-rating-inline {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stars-gold {
    color: #f5a623;
    font-size: 16px;
    letter-spacing: 1px;
}

.rating-number {
    font-weight: 600;
    font-size: 15px;
    color: #000;
}

.trust-text-small {
    color: #666;
    font-size: 13px;
}

.cart-hero-divider {
    width: 100%;
    height: 1px;
    background: #000;
    margin-top: 40px;
}

.trust-text {
    color: #666;
    font-size: 13px;
}

.cart-section {
    padding: 40px 0 80px;
    background: #f1f1f1;
}

.cart-layout {
    display: flex;
    gap: 60px;
    max-width: 1100px;
    margin: 0 auto;
    align-items: flex-start;
}

/* Form Side */
.cart-form-side {
    flex: 1;
    max-width: 500px;
}

.cart-form-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #000;
}

.cart-error {
    background: #FFEBEE;
    color: #C62828;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.cart-form-row {
    display: flex;
    gap: 16px;
}

.cart-form-row .cart-form-group {
    flex: 1;
}

.cart-form-group {
    margin-bottom: 20px;
}

.cart-form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-bottom: 8px;
}

.cart-form-group label .required {
    color: #E53935;
}

.cart-form-group input,
.cart-form-group select,
.cart-form-group textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid #000;
    border-left: 4px solid #000;
    border-radius: 12px;
    font-size: 15px;
    background: #f1f1f1;
    transition: border-color 0.2s;
}

.cart-form-group input:focus,
.cart-form-group select:focus,
.cart-form-group textarea:focus {
    outline: none;
    border-color: #000;
}

.cart-form-group textarea {
    resize: vertical;
    min-height: 100px;
}

.cart-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* Custom Select Dropdown */
.custom-select {
    position: relative;
    width: 100%;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 1px solid #000;
    border-left: 4px solid #000;
    border-radius: 12px;
    background: #f1f1f1;
    cursor: pointer;
    font-size: 15px;
    transition: border-color 0.2s;
}

.custom-select-trigger:hover {
    border-color: #999;
}

.custom-select.open .custom-select-trigger {
    border-color: #000;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.custom-select-value {
    color: #666;
}

.custom-select.selected .custom-select-value {
    color: #000;
}

.custom-select-arrow {
    transition: transform 0.2s;
}

.custom-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 0;
    overflow: hidden;
    z-index: 100;
    transition: max-height 0.2s;
}

.custom-select.open .custom-select-dropdown {
    max-height: 300px;
    overflow-y: auto;
}

.custom-select-search {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 14px;
    outline: none;
}

.custom-select-options {
    max-height: 240px;
    overflow-y: auto;
}

.custom-select-option {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
}

.custom-select-option:hover {
    background: #f5f5f5;
}

.custom-select-option.selected {
    background: #f0f0f0;
    font-weight: 500;
}

/* Quote Side */
.cart-quote-side {
    width: 380px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
}

.cart-quote-title {
    font-size: 28px;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 30px;
    color: #000;
}

.cart-items {
    margin-bottom: 24px;
    min-height: 100px;
}

.cart-empty {
    color: #999;
    font-size: 15px;
    padding: 30px 0;
}

.cart-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid #ddd;
}

.cart-item:first-child {
    padding-top: 0;
}

.cart-item-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 12px;
    background: #fff;
}

.cart-item-info {
    flex: 1;
}

.cart-item-name {
    font-size: 16px;
    font-weight: 700;
    color: #000;
    margin-bottom: 4px;
}

.cart-item-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 8px;
}

.cart-item-remove {
    font-size: 13px;
    color: #666;
    text-decoration: underline;
}

.cart-item-remove:hover {
    color: #E53935;
}

.cart-submit-btn {
    width: 100%;
    padding: 18px 32px;
    background: #ff470f;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart-submit-btn:hover {
    background: #e02d08;
    transform: translateY(-2px);
}

@media (max-width: 900px) {
    .cart-layout {
        flex-direction: column;
    }
    
    .cart-form-side {
        max-width: 100%;
    }
    
    .cart-quote-side {
        width: 100%;
        position: static;
    }
    
    .cart-form-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ===== PRODUCT EDIT POPUP ===== */
.product-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.product-edit-overlay.open {
    opacity: 1;
    visibility: visible;
}

.product-edit-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.product-edit-popup.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.product-edit-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
}

.product-edit-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.product-edit-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    line-height: 1;
}

.product-edit-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

.product-edit-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

/* Product Edit Form Styles */
.pe-product {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
}

.pe-product-img {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

.pe-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pe-product-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pe-product-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.pe-link {
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: color 0.2s;
}

.pe-link:hover {
    color: #000;
    text-decoration: underline;
}

.pe-link-sep {
    color: #ccc;
    font-size: 10px;
}

.pe-link-danger {
    color: #dc3545;
}

.pe-link-danger:hover {
    color: #a71d2a;
}

.pe-product-info p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.pe-field-group {
    margin-bottom: 20px;
}

.pe-field-group h4 {
    font-size: 14px;
    font-weight: 600;
    color: #666;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pe-field {
    margin-bottom: 16px;
}

.pe-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #333;
}

.pe-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.2s;
}

.pe-input:focus {
    outline: none;
    border-color: #000;
}

.pe-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.pe-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.pe-btn-secondary {
    background: #f1f1f1;
    color: #333;
}

.pe-btn-secondary:hover {
    background: #e5e5e5;
}

.pe-btn-primary {
    background: #ff470f;
    color: #fff;
}

.pe-btn-primary:hover {
    background: #e02d08;
}

/* Quote Item Options Text */
.quote-item-opts {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

.quote-item {
    cursor: pointer;
    transition: background 0.2s;
}

.quote-item:hover {
    background: transparent;
}

/* ========================================
   MOBILE MENU & NAVIGATION - PROFESSIONAL
======================================== */

/* Hamburger Button - SVG Icon */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.mobile-toggle svg {
    width: 24px;
    height: 24px;
    stroke: var(--dark);
    display: block;
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f1f1f1;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mobile-menu-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 24px;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.mobile-logo img {
    height: 36px;
    width: auto;
}

.mobile-menu-close {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-menu-close:hover {
    background: #e5e5e5;
    transform: rotate(90deg);
}

.mobile-menu-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--dark);
}

/* Mobile Navigation */
.mobile-nav {
    flex: 1;
    padding: 24px 0;
}

.mobile-nav-item {
    border-bottom: 1px solid rgba(0,0,0,0.06);
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s ease;
}

.mobile-menu-overlay.active .mobile-nav-item {
    opacity: 1;
    transform: translateX(0);
}

.mobile-menu-overlay.active .mobile-nav-item:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(5) { transition-delay: 0.3s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(6) { transition-delay: 0.35s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(7) { transition-delay: 0.4s; }
.mobile-menu-overlay.active .mobile-nav-item:nth-child(8) { transition-delay: 0.45s; }

.mobile-nav-item.has-submenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav-link:hover {
    color: var(--primary);
}

.mobile-nav-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
}

.mobile-submenu-toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.mobile-submenu-toggle svg {
    width: 20px;
    height: 20px;
    stroke: var(--gray-600);
    transition: transform 0.3s ease;
}

.mobile-nav-item.has-submenu.open .mobile-submenu-toggle svg {
    transform: rotate(180deg);
}

.mobile-submenu {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #f1f1f1;
    border-radius: 12px;
    margin-bottom: 8px;
}

.mobile-nav-item.has-submenu.open .mobile-submenu {
    max-height: 500px;
}

.mobile-submenu-link {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    color: var(--gray-700);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.mobile-submenu-link:last-child {
    border-bottom: none;
}

.mobile-submenu-link:hover {
    color: var(--primary);
    padding-left: 28px;
}

/* Mobile Menu Footer */
.mobile-menu-footer {
    padding: 24px 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.4s;
}

.mobile-menu-overlay.active .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.mobile-cta-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--dark);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
}

.mobile-cta-btn:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

.mobile-menu-social {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.mobile-menu-social a {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border-radius: 50%;
    color: var(--dark);
    font-size: 18px;
    transition: all 0.3s ease;
}

.mobile-menu-social a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-3px);
}

/* Body Lock when menu is open */
body.mobile-menu-open {
    overflow: hidden;
}

/* ========================================
   MOBILE RESPONSIVE IMPROVEMENTS
======================================== */

/* GLOBAL: Prevent horizontal scroll on mobile */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
    }
    
    .mobile-toggle {
        display: block;
    }
    
    .nav {
        display: none;
    }
    
    .header-actions .btn {
        display: none;
    }
    
    .header-inner {
        padding: 12px 0;
    }
    
    .logo-img {
        height: 34px;
    }
    
    /* Mobile header - sepet ve menü yakınlaştır */
    .header-actions {
        gap: 0;
    }
    
    .cart-link {
        margin-right: 0;
    }
}

/* ========================================
   TABLET STYLES (768px - 991px)
======================================== */
@media (max-width: 991px) and (min-width: 769px) {
    /* Hero */
    .hero-new {
        padding: 120px 0 60px;
    }
    
    .hero-title-new {
        font-size: 44px;
    }
    
    .hero-center {
        max-width: 600px;
    }
    
    /* Features */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .feature-card:nth-child(2n) {
        border-right: none;
    }
    
    .feature-card:nth-child(n+5) {
        border-bottom: none;
    }
    
    /* About & Solutions */
    .about-grid,
    .solutions-grid {
        gap: 40px;
    }
    
    .about-content h2,
    .solutions-content h2 {
        font-size: 48px;
    }
    
    /* Testimonials */
    .testimonial-card {
        min-width: calc(50% - 8px);
        max-width: calc(50% - 8px);
        flex-shrink: 0;
    }
    
    .testimonial-slider {
        cursor: grab;
        user-select: none;
    }
    
    .testimonial-slider:active {
        cursor: grabbing;
    }
    
    /* FAQ */
    .faq-grid {
        gap: 50px;
    }
    
    .faq-content h2 {
        font-size: 40px;
    }
    
    /* CTA */
    .cta-box {
        padding: 80px 60px;
    }
    
    .cta-box h2 {
        font-size: 48px;
    }
    
    /* Footer */
    .footer-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }
}

/* ========================================
   MOBILE STYLES (max-width: 768px)
======================================== */
@media (max-width: 768px) {
    /* CRITICAL: Prevent horizontal overflow */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }
    
    main {
        overflow-x: hidden;
    }
    
    section {
        overflow-x: hidden;
    }
    
    .container {
        padding: 0 16px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* ===== HERO SECTION ===== */
    .hero-new {
        padding: 100px 0 50px;
        overflow: hidden;
    }
    
    .hero-center {
        max-width: 100%;
        padding: 0;
    }
    
    .hero-title-new {
        font-size: 32px;
        margin-bottom: 20px;
        line-height: 1.15;
        word-wrap: break-word;
    }
    
    .hero-text-new {
        font-size: 15px;
        margin-bottom: 28px;
        line-height: 1.6;
        max-width: 100%;
    }
    
    .hero-buttons-new {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 36px;
        width: 100%;
    }
    
    .btn-hero {
        width: 100%;
        padding: 16px 28px;
        box-sizing: border-box;
    }
    
    .btn-text {
        padding: 8px 0;
    }
    
    .hero-trust {
        flex-direction: column;
        gap: 12px;
    }
    
    .trust-info {
        text-align: center;
    }
    
    /* ===== HERO IMAGE SECTION ===== */
    .hero-image-section {
        padding: 30px 0;
        overflow: hidden;
    }
    
    .hero-image-wrapper {
        overflow: hidden;
    }
    
    .hero-image-wrapper img {
        border-radius: 16px;
        width: 100%;
        height: auto;
    }
    
    /* ===== PARTNERS SECTION ===== */
    .partners {
        padding: 30px 0;
        overflow: hidden;
    }
    
    .partners-slider-wrapper {
        overflow: hidden;
        width: 100%;
    }
    
    .partners-text {
        font-size: 14px;
    }
    
    .partner-slide img {
        height: 28px;
    }
    
    /* ===== FEATURES SECTION ===== */
    .features {
        padding: 60px 0;
        overflow: hidden;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        border-width: 2px;
    }
    
    .feature-card {
        border-right: none !important;
        border-bottom: 2px solid var(--dark) !important;
        padding: 28px 20px;
    }
    
    .feature-card:last-child {
        border-bottom: none !important;
    }
    
    .feature-icon {
        margin-bottom: 16px;
    }
    
    .feature-title {
        font-size: 18px;
    }
    
    .feature-text {
        font-size: 14px;
    }
    
    /* ===== ABOUT SECTION ===== */
    .about-section {
        padding: 60px 0;
        overflow: hidden;
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .about-image {
        order: -1;
    }
    
    .about-image img {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }
    
    .about-content h2 {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 20px;
        word-wrap: break-word;
    }
    
    .about-content p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* ===== SOLUTIONS SECTION ===== */
    .solutions-section {
        padding: 60px 0;
        overflow: hidden;
    }
    
    .solutions-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .solutions-image {
        order: -1;
    }
    
    .solutions-image img {
        width: 100%;
        height: auto;
        border-radius: 16px;
    }
    
    .solutions-content h2 {
        font-size: 32px;
        line-height: 1.1;
        margin-bottom: 20px;
        word-wrap: break-word;
    }
    
    .solutions-content p {
        font-size: 16px;
        line-height: 1.6;
    }
    
    /* ===== TESTIMONIALS SECTION - MOBILE SLIDER ===== */
    .testimonials {
        padding: 60px 0;
        overflow: hidden;
        width: 100%;
    }
    
    .testimonials .container {
        overflow: visible;
        max-width: 100%;
        padding: 0 16px;
    }
    
    .testimonials-header {
        margin-bottom: 32px;
    }
    
    .testimonials-header h2 {
        font-size: 28px;
        line-height: 1.2;
        word-wrap: break-word;
    }
    
    .testimonials-rows {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }
    
    .testimonial-row {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }
    
    .testimonial-nav {
        display: none !important;
        width: 36px;
        height: 36px;
        min-width: 36px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .testimonial-nav svg {
        width: 16px;
        height: 16px;
    }
    
    .testimonial-prev {
        order: -1;
    }
    
    .testimonial-slider {
        flex: 1;
        overflow: hidden;
        width: 100%;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-y;
    }
    
    .testimonial-slider:active {
        cursor: grabbing;
    }
    
    .testimonial-track {
        display: flex;
        flex-direction: row;
        gap: 16px;
        width: max-content;
        padding: 0;
        transition: transform 0.3s ease;
        will-change: transform;
    }
    
    .testimonial-card {
        min-width: calc(100vw - 64px) !important;
        max-width: calc(100vw - 64px) !important;
        width: calc(100vw - 120px) !important;
        flex-shrink: 0;
        box-sizing: border-box;
        margin: 0;
    }
    
    /* ===== FAQ SECTION ===== */
    .faq-section {
        padding: 60px 0;
        overflow: hidden;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .faq-content h2 {
        font-size: 28px;
        line-height: 1.2;
        word-wrap: break-word;
    }
    
    .faq-content p {
        font-size: 15px;
    }
    
    .faq-question {
        font-size: 16px;
        padding: 20px 0;
        gap: 12px;
    }
    
    .faq-question svg {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
    }
    
    .faq-answer p {
        font-size: 14px;
    }
    
    /* ===== CTA SECTION ===== */
    .cta-section {
        padding: 30px 0;
        overflow: hidden;
    }
    
    .cta-box {
        padding: 50px 24px;
        border-radius: 16px;
        overflow: hidden;
    }
    
    .cta-box h2 {
        font-size: 28px;
        line-height: 1.1;
        word-wrap: break-word;
    }
    
    .cta-box p {
        font-size: 15px;
        max-width: 100%;
    }
    
    /* ===== FOOTER ===== */
    .footer {
        padding: 50px 0 0;
        overflow: hidden;
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding-bottom: 40px;
    }
    
    .footer-grid-new {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .footer-grid-new .footer-col-left,
    .footer-grid-new .footer-col-right {
        padding: 0;
        border: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    
    .footer-grid-new .footer-col-center {
        order: -1;
        padding: 0;
        padding-bottom: 40px;
        border-bottom: 1px solid #ddd;
    }
    
    .footer-title {
        font-size: 14px;
        margin-bottom: 16px;
    }
    
    .footer-links {
        gap: 12px;
    }
    
    .footer-links a {
        font-size: 13px;
    }
    
    .footer-bottom {
        padding: 20px 0;
    }
    
    .footer-bottom p {
        font-size: 12px;
        text-align: center;
    }
    
    /* ===== PAGE HEADER ===== */
    .page-header-section {
        padding: 100px 0 60px;
        overflow: hidden;
    }
    
    .page-main-title {
        font-size: 42px;
        word-wrap: break-word;
    }
    
    /* ===== SECTION TITLES ===== */
    .section-title {
        font-size: 26px;
        word-wrap: break-word;
    }
    
    .section-header {
        margin-bottom: 36px;
    }
    
    /* ===== BUTTONS ===== */
    .btn {
        padding: 12px 24px;
        font-size: 14px;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* ===== MOBILE HEADER ===== */
    .header-actions {
        gap: 0;
    }
    
    .cart-link {
        padding: 8px;
    }
    
    .cart-link svg {
        width: 22px;
        height: 22px;
    }
    
    .mobile-toggle {
        padding: 0px 0px 0px 8px;
        margin-left: 0;
    }
}

/* ========================================
   SMALL MOBILE STYLES (max-width: 480px)
======================================== */
@media (max-width: 480px) {
    .hero-title-new {
        font-size: 26px;
    }
    
    .hero-text-new {
        font-size: 14px;
    }
    
    .about-content h2,
    .solutions-content h2 {
        font-size: 28px;
    }
    
    .testimonials-header h2 {
        font-size: 24px;
    }
    
    .faq-content h2 {
        font-size: 24px;
    }
    
    .cta-box h2 {
        font-size: 24px;
    }
    
    .cta-box {
        padding: 40px 20px;
    }
    
    .page-main-title {
        font-size: 32px;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-grid-new {
        text-align: center;
    }
    
    .footer-grid-new .footer-col-left,
    .footer-grid-new .footer-col-right {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .footer-grid-new .footer-col-center {
        order: -1;
    }
    
    .footer-section {
        align-items: center;
    }
    
    .footer-social {
        flex-direction: row;
        justify-content: center;
    }
    
    .trust-avatars img {
        width: 32px;
        height: 32px;
    }
    
    .testimonial-card {
        min-width: calc(100vw - 64px) !important;
        max-width: calc(100vw - 64px) !important;
        width: calc(100vw - 64px) !important;
        padding: 20px;
        flex-shrink: 0;
    }
    
    .testimonial-track {
        padding: 0;
        gap: 12px;
    }
    
    .testimonial-slider {
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        touch-action: pan-y;
    }
    
    .testimonial-slider:active {
        cursor: grabbing;
    }
    
    .testimonial-nav {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }
    
    .testimonial-nav svg {
        width: 14px;
        height: 14px;
    }
    
    .feature-card {
        padding: 24px 16px;
    }
    
    .faq-question {
        font-size: 15px;
    }
    
    .section-title {
        font-size: 24px;
    }
}

/* ========================================
   SMOOTH SCROLL & ANIMATIONS
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Scroll Reveal Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Slide From Right Animation */
.slide-from-right {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-from-right.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Slide From Bottom Animation */
.slide-from-bottom {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-from-bottom.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback - JS yoksa görseller görünsün */
.no-js .slide-from-right,
.no-js .slide-from-bottom {
    opacity: 1;
    transform: none;
}

/* Mobile Touch Improvements */
@media (hover: none) and (pointer: coarse) {
    .feature-card:hover {
        background: transparent;
        color: inherit;
    }
    
    .feature-card:active {
        background: var(--dark) !important;
        color: var(--light) !important;
        transition: background 0s, color 0s;
    }
    
    .feature-card:active .feature-title {
        color: var(--light) !important;
    }
    
    .feature-card:active .feature-text {
        color: rgba(255,255,255,0.7) !important;
    }
    
    .feature-card:active .feature-icon svg {
        color: #ff470f !important;
    }
    
    .feature-card:active .feature-arrow {
        color: #ff470f !important;
        transition: none !important;
    }
    
    .feature-card:active .feature-icon .icon-image {
        filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(4578%) hue-rotate(1deg) brightness(102%) contrast(107%) !important;
    }
    
    .btn:active {
        transform: scale(0.98);
    }
    
    .mobile-nav-link:active {
        color: var(--primary);
    }
}

/* Safe Area Insets for notched devices */
@supports (padding: max(0px)) {
    .mobile-menu-container {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    
    .header .container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
}

/* ========================================
   MOBILE BOTTOM NAVIGATION BAR
======================================== */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #f1f1f1;
    border-top: 1px solid rgba(0,0,0,0.08);
    z-index: 9990;
    padding: 8px 0;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

.mobile-bottom-nav {
    display: none;
    grid-template-columns: repeat(5, 1fr);
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--gray-600);
    font-size: 10px;
    font-weight: 500;
    transition: all 0.2s ease;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

.mobile-bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke-width: 1.5;
    transition: all 0.2s ease;
}

.mobile-bottom-nav-item span:last-child {
    line-height: 1;
}

.mobile-bottom-nav-item.active {
    color: var(--primary);
}

.mobile-bottom-nav-item.active svg {
    stroke: var(--primary);
}

.mobile-bottom-nav-item:active {
    transform: scale(0.95);
}

/* Cart button special styling */
.mobile-bottom-nav-cart {
    position: relative;
}

.mobile-bottom-cart-count {
    position: absolute;
    top: 2px;
    right: 50%;
    transform: translateX(12px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Hide desktop quote cart button on mobile */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: grid;
    }
    
    .quote-cart-btn {
        display: none !important;
    }
    
    /* Add padding to footer for bottom nav */
    .footer {
        padding-bottom: 80px;
    }
    
    /* Adjust main content for bottom nav */
    main {
        padding-bottom: 70px;
    }
    
    /* Quote panel adjustments for mobile */
    .quote-panel {
        bottom: 70px;
        max-height: calc(100vh - 70px);
    }
    
    .quote-panel-overlay {
        background: rgba(0,0,0,0.2);
        bottom: 70px;
    }
    
    .quote-panel-overlay.open {
        opacity: 1;
    }
}

/* Hide mobile bottom nav on desktop */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none !important;
    }
}

/* ========================================
   ADDITIONAL MOBILE POLISH
======================================== */
@media (max-width: 768px) {
    /* Improve touch targets */
    .btn {
        min-height: 48px;
    }
    
    .nav-link, .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Better spacing for mobile */
    .section {
        padding: 50px 0;
    }
    
    /* Improve readability */
    body {
        font-size: 15px;
        line-height: 1.7;
    }
    
    /* Card improvements */
    .feature-card {
        touch-action: manipulation;
    }
    
    /* Smooth scrolling for testimonials */
    .testimonial-slider {
        scroll-padding: 16px;
        padding: 0 16px;
        margin: 0 -16px;
    }
    
    /* Better image handling */
    .about-image img,
    .solutions-image img {
        border-radius: 12px;
    }
    
    /* Alttancizgi mobile fix */
    .alttancizgi {
        padding-bottom: 6px;
    }
    
    .alttancizgi::after {
        bottom: -6px;
        height: 14px;
        border-width: 5px;
    }
}

/* ========================================
   GET IN TOUCH PAGE STYLES
   ======================================== */

.git-section {
    padding: 60px 0 80px;
}

.git-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

.git-left {
    position: sticky;
    top: 120px;
}

.git-title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 32px;
    color: #1a1a2e;
}

.git-rating {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 32px;
}

.git-avatars {
    display: flex;
}

.git-avatars img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #f5f0eb;
    margin-left: -12px;
    object-fit: cover;
}

.git-avatars img:first-child {
    margin-left: 0;
}

.git-rating-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.git-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.git-stars span {
    margin-left: 6px;
    font-weight: 600;
    color: #1a1a2e;
}

.git-rating-info p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.git-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.git-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: #1a1a2e;
}

.git-features svg {
    flex-shrink: 0;
}

/* Form Styles */
.git-form {
    background: transparent;
}

.git-progress {
    background: #e5e5e5;
    border-radius: 20px;
    height: 28px;
    margin-bottom: 32px;
    overflow: hidden;
    position: relative;
}

.git-progress-bar {
    background: #ff4510;
    height: 100%;
    border-radius: 20px;
    transition: width 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 12px;
    min-width: 60px;
}

.git-progress-text {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.git-step {
    display: none;
}

.git-step.active {
    display: block;
    animation: gitFadeIn 0.3s ease;
}

@keyframes gitFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.git-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.git-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.git-field-full {
    grid-column: 1 / -1;
}

.git-field-half {
    grid-column: span 1;
}

.git-label {
    font-size: 15px;
    font-weight: 500;
    color: #1a1a2e;
}

.git-required {
    color: #ff470f;
    margin-left: 2px;
}

.git-input,
.git-select,
.git-textarea {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    background: #fff;
    font-size: 15px;
    color: #1a1a2e;
    transition: box-shadow 0.2s ease;
    font-family: inherit;
}

.git-input:focus,
.git-select:focus,
.git-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 70, 16, 0.2);
}

/* Error shake animation */
@keyframes git-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

.git-input.git-error,
.git-select.git-error,
.git-textarea.git-error {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    animation: git-shake 0.4s ease-in-out;
}

.git-select-wrap.git-error .git-select {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
    animation: git-shake 0.4s ease-in-out;
}

.git-input::placeholder,
.git-textarea::placeholder {
    color: #999;
}

.git-select-wrap {
    position: relative;
}

.git-select {
    appearance: none;
    cursor: pointer;
    padding-right: 45px;
}

.git-select-arrow {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #666;
}

.git-textarea {
    resize: vertical;
    min-height: 120px;
}

.git-field-desc {
    font-size: 13px;
    color: #666;
    font-style: italic;
    margin: 4px 0 0;
    line-height: 1.5;
}

/* Radio & Checkbox */
.git-radio-group,
.git-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.git-radio-group.git-error .git-radio-circle {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.git-radio-group.git-error {
    animation: git-shake 0.4s ease-in-out;
}

.git-checkbox.git-error .git-checkbox-box {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.git-checkbox.git-error {
    animation: git-shake 0.4s ease-in-out;
}

.git-terms.git-error {
    animation: git-shake 0.4s ease-in-out;
}

.git-terms.git-error .git-checkbox-box {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.git-terms-error {
    color: #dc2626;
    font-size: 13px;
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    border-radius: 8px;
    border-left: 3px solid #dc2626;
    display: none;
}

.git-terms-error.show {
    display: block;
    animation: git-shake 0.4s ease-in-out;
}

.git-error-message {
    display: block;
    color: #dc2626;
    font-size: 13px;
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(220, 38, 38, 0.08);
    border-radius: 8px;
    border-left: 3px solid #dc2626;
}

.git-radio,
.git-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    font-size: 15px;
}

.git-radio input,
.git-checkbox input {
    display: none;
}

.git-radio-circle {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 1px;
}

.git-radio-circle::after {
    content: '';
    width: 10px;
    height: 10px;
    background: #1a1a2e;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.git-radio input:checked + .git-radio-circle {
    border-color: #1a1a2e;
}

.git-radio input:checked + .git-radio-circle::after {
    opacity: 1;
    transform: scale(1);
}

.git-checkbox-box {
    width: 22px;
    height: 22px;
    border: 2px solid #ccc;
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    margin-top: 1px;
}

.git-checkbox input:checked + .git-checkbox-box {
    background: #1a1a2e;
    border-color: #1a1a2e;
}

.git-checkbox input:checked + .git-checkbox-box::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

.git-radio-text,
.git-checkbox-text {
    color: #1a1a2e;
    line-height: 1.4;
}

.git-checkbox-text a {
    color: #ff470f;
    text-decoration: none;
}

.git-checkbox-text a:hover {
    text-decoration: underline;
}

/* Terms */
.git-terms {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

/* Buttons */
.git-buttons {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    justify-content: flex-end;
}

.git-btn {
    padding: 14px 32px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
}

.git-btn-prev {
    background: #1a1a2e;
    color: #fff;
}

.git-btn-prev:hover {
    background: #2d2d44;
}

.git-btn-primary {
    background: #ff470f;
    color: #fff;
}

.git-btn-primary:hover {
    background: #e63d0d;
}

.git-btn-submit {
    min-width: 180px;
}

/* Success */
.git-success {
    text-align: center;
    padding: 60px 40px;
}

.git-success-icon {
    margin-bottom: 24px;
}

.git-success h3 {
    font-size: 28px;
    margin-bottom: 12px;
    color: #1a1a2e;
}

.git-success p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
}

/* Partners */
.git-partners {
    margin-top: 60px;
    text-align: center;
}

.git-partners-title {
    font-size: 14px;
    color: #999;
    margin-bottom: 24px;
}

.git-partners-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.git-partners-logos img {
    height: 28px;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all 0.3s ease;
}

.git-partners-logos img:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* Responsive */
@media (max-width: 992px) {
    .git-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .git-left {
        position: static;
    }
    
    .git-title {
        font-size: 32px;
    }
}

/* Info Icon Tooltip */
.git-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    cursor: pointer;
    position: relative;
    color: #ff470f;
    vertical-align: middle;
}

.git-info-icon svg {
    width: 16px;
    height: 16px;
}

.git-info-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: #ff470f;
    color: #fff;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    width: 280px;
    max-width: calc(100vw - 40px);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    pointer-events: none;
}

.git-info-icon::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4px;
    border: 8px solid transparent;
    border-top-color: #ff470f;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 99999;
}

.git-info-icon:hover::after,
.git-info-icon:hover::before {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    
    .git-section {
        padding: 40px 0 60px;
    }
    
    .git-title {
        font-size: 28px;
    }
    
    .git-fields {
        grid-template-columns: 1fr;
    }
    
    .git-field-half {
        grid-column: 1;
    }
    
    .git-buttons {
        flex-direction: column-reverse;
    }
    
    .git-btn {
        width: 100%;
    }
    
    .git-partners-logos {
        gap: 24px;
    }
    
    .git-partners-logos img {
        height: 22px;
    }
}

/* ===== BLOG CTA BOX - New Design ===== */
.blog-cta-box {
    background: #0a0a0a;
    border-radius: 20px;
    padding: 40px 50px;
    max-width: 500px;
    margin: 40px 0;
}

.blog-cta-box .cta-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

.blog-cta-box .cta-stars svg {
    width: 24px;
    height: 24px;
}

.blog-cta-box .cta-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    margin: 0 0 24px 0;
}

.blog-cta-box .cta-list {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}

.blog-cta-box .cta-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 12px;
}

.blog-cta-box .cta-list li:last-child {
    margin-bottom: 0;
}

.blog-cta-box .cta-list li svg {
    flex-shrink: 0;
    color: #fff;
}

.blog-cta-box .cta-button {
    display: inline-block;
    background: #ff470f;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    padding: 16px 50px;
    border-radius: 50px;
    text-decoration: none;
    margin-bottom: 30px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.blog-cta-box .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(254, 51, 10, 0.4);
}

.blog-cta-box .cta-trust {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blog-cta-box .cta-avatars {
    display: flex;
}

.blog-cta-box .cta-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #0a0a0a;
    margin-left: -10px;
    object-fit: cover;
}

.blog-cta-box .cta-avatar:first-child {
    margin-left: 0;
}

.blog-cta-box .cta-rating {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blog-cta-box .cta-rating-stars {
    display: flex;
    gap: 2px;
}

.blog-cta-box .cta-rating-stars svg {
    width: 16px;
    height: 16px;
}

.blog-cta-box .cta-rating-score {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.blog-cta-box .cta-trust-text {
    color: rgba(255,255,255,0.7);
    font-size: 13px;
}

/* Slide-in Animations for Service Pages */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Initial hidden state */
.slide-in-right,
.slide-in-left,
.slide-in-bottom {
    opacity: 0;
}

/* Animated state when visible */
.slide-in-right.animated {
    animation: slideInFromRight 0.8s ease-out forwards;
}

.slide-in-left.animated {
    animation: slideInFromLeft 0.8s ease-out forwards;
}

.slide-in-bottom.animated {
    animation: slideInFromBottom 0.8s ease-out forwards;
}

/* Staggered delays for multiple items */
.slide-in-bottom.animated:nth-child(1) { animation-delay: 0s; }
.slide-in-bottom.animated:nth-child(2) { animation-delay: 0.1s; }
.slide-in-bottom.animated:nth-child(3) { animation-delay: 0.2s; }
.slide-in-bottom.animated:nth-child(4) { animation-delay: 0.3s; }
.slide-in-bottom.animated:nth-child(5) { animation-delay: 0.4s; }
.slide-in-bottom.animated:nth-child(6) { animation-delay: 0.5s; }

/* Gallery items with inline animation-delay */
.pd-gallery-item.slide-in-bottom.animated {
    animation: slideInFromBottom 0.8s ease-out forwards;
}

/* Legal Pages (Terms & Conditions, Privacy Policy) */
.legal-page-section {
    padding: 80px 0 120px;
    background: #f1f1f1;
}

.legal-content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: transparent;
    padding: 0 40px;
    border-radius: 0;
    box-shadow: none;
}

.legal-h1 {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin: 50px 0 30px;
    line-height: 1.4;
    text-align: left;
}

.legal-h1:first-child {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 50px;
}

.legal-h2 {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 50px 0 30px;
    line-height: 1.4;
    text-align: left;
}

.legal-h3 {
    font-size: 18px;
    font-weight: 600;
    color: #000;
    margin: 30px 0 15px;
    line-height: 1.5;
    text-align: left;
}

/* Legacy support */
.legal-heading {
    font-size: 20px;
    font-weight: 700;
    color: #000;
    margin: 30px 0 15px;
    padding-bottom: 0;
    border-bottom: none;
}

.legal-heading:first-child {
    margin-top: 0;
}

.legal-paragraph {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
    text-align: left;
}

.legal-paragraph.legal-numbered {
    margin-bottom: 30px;
    text-align: left;
}

.legal-list {
    margin: 20px 0;
    padding-left: 0;
    list-style: none;
}

.legal-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    text-align: left;
}

.legal-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
    font-size: 20px;
    line-height: 1.8;
}

/* Terms and Conditions - Centered styling */
.legal-page-centered .legal-h1 {
    text-align: center;
}

.legal-page-centered .legal-h2 {
    text-align: center;
}

.legal-page-centered .legal-h3 {
    text-align: center;
}

.legal-page-centered .legal-paragraph {
    text-align: center;
}

.legal-page-centered .legal-paragraph.legal-numbered {
    text-align: center;
}

.legal-page-centered .legal-list li {
    text-align: center;
}

.legal-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-600);
}

.legal-empty p {
    font-size: 18px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .legal-page-section {
        padding: 60px 0 80px;
    }
    
    .legal-content-wrapper {
        padding: 0 20px;
    }
    
    .legal-h1 {
        font-size: 26px;
        margin: 40px 0 20px;
    }
    
    .legal-h2 {
        font-size: 20px;
        margin: 30px 0 15px;
    }
    
    .legal-h3 {
        font-size: 17px;
        margin: 20px 0 10px;
    }
    
    .legal-heading {
        font-size: 18px;
    }
    
    .legal-paragraph {
        font-size: 15px;
    }
}

/* ============================================
   LANGUAGE SWITCHER STYLES
   ============================================ */
.language-switcher {
    position: relative;
    margin-right: 10px;
}

.lang-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    transition: var(--transition);
}

.lang-toggle:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.lang-toggle .current-lang {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: var(--transition);
    z-index: 1000;
}

.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    font-size: 14px;
    color: var(--gray-700);
    transition: var(--transition);
}

.lang-option:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

.lang-option.active {
    background: var(--primary);
    color: #fff;
}

.lang-option .lang-flag {
    font-size: 18px;
}

.lang-option .lang-name {
    font-weight: 500;
}

/* Mobile language switcher */
.mobile-lang-switcher {
    padding: 15px 20px;
    border-top: 1px solid var(--gray-200);
    margin-top: 15px;
}

.mobile-lang-switcher .lang-title {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 10px;
    font-weight: 600;
}

.mobile-lang-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-lang-options .lang-option {
    padding: 8px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.mobile-lang-options .lang-option.active {
    border-color: var(--primary);
}

@media (max-width: 768px) {
    .language-switcher {
        display: block;
        margin-right: 0;
    }
    .lang-toggle .current-lang {
        display: none;
    }
    .lang-toggle .chevron-icon {
        display: none;
    }
    .lang-toggle {
        padding: 8px;
        border: none;
    }
    .lang-toggle svg {
        width: 22px;
        height: 22px;
    }
    .header-actions {
        gap: 0 !important;
    }
    .header-actions .cart-icon {
        padding: 8px;
    }
    .header-actions .mobile-toggle {
        padding: 8px;
    }
}

/* Phone Input Split */
.phone-split-wrapper {
    display: flex;
    gap: 12px;
}

.phone-code-select-field {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    flex-shrink: 0;
    padding: 16px 30px 16px 12px;
    border: 1px solid #000;
    border-radius: 12px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.phone-code-select-field:focus {
    outline: none;
    border-color: #000;
}

.phone-number-field {
    flex: 1;
    min-width: 0;
    padding: 16px 20px;
    border: 1px solid #000;
    border-radius: 12px;
    font-size: 16px;
    background: #fff;
}

.phone-number-field:focus {
    outline: none;
    border-color: #000;
}

/* Thank You Page */
.thank-you-section {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.thank-you-container {
    text-align: center;
    max-width: 700px;
    width: 100%;
}

.thank-you-container .loading-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 50px;
    position: relative;
}

.thank-you-container .spinner {
    width: 100%;
    height: 100%;
    animation: thankYouSpin 1s ease-out forwards;
}

.thank-you-container .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: thankYouFadeIn 0.3s ease-out 1s forwards;
}

.thank-you-container .checkmark path {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
    animation: thankYouDrawCheck 0.4s ease-out 1.1s forwards;
}

@keyframes thankYouSpin {
    0% { transform: rotate(0deg); opacity: 1; }
    80% { transform: rotate(360deg); opacity: 1; }
    100% { transform: rotate(360deg); opacity: 0; }
}

@keyframes thankYouFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes thankYouDrawCheck {
    0% { stroke-dashoffset: 50; }
    100% { stroke-dashoffset: 0; }
}

.thank-you-title {
    font-size: 52px;
    font-weight: 700;
    color: #000;
    margin-bottom: 24px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.thank-you-subtitle {
    font-size: 17px;
    color: #666;
    margin-bottom: 50px;
    line-height: 1.7;
}

.thank-you-subtitle strong {
    color: #000;
}

.thank-you-container .btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.thank-you-container .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 36px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.thank-you-container .btn-back {
    background: transparent;
    color: #000;
}

.thank-you-container .btn-back:hover {
    opacity: 0.7;
}

.thank-you-container .btn-back svg {
    width: 18px;
    height: 18px;
}

.thank-you-container .btn-primary {
    background: #000;
    color: #fff;
}

.thank-you-container .btn-primary:hover {
    background: #222;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

@media (max-width: 600px) {
    .thank-you-section { padding: 60px 20px; }
    .thank-you-title { font-size: 36px; }
    .thank-you-container .btn-group { flex-direction: column; }
    .thank-you-container .btn { width: 100%; justify-content: center; }
}

/* Button Loading States */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.85;
}

.btn-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btnSpin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
}

@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

.btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    animation: btnPulse 0.4s ease-out;
}

.btn-check {
    display: inline-block;
    font-size: 18px;
    margin-right: 6px;
    animation: btnCheckPop 0.3s ease-out;
}

@keyframes btnPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes btnCheckPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

/* Cart Empty State */
.cart-empty-state {
    text-align: center;
    padding: 100px 20px;
    max-width: 500px;
    margin: 0 auto;
}

.cart-empty-icon {
    margin-bottom: 30px;
}

.cart-empty-icon svg {
    opacity: 0.4;
}

.cart-empty-title {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-bottom: 16px;
}

.cart-empty-desc {
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    line-height: 1.6;
}

.cart-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 40px;
    background: #000;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
}

.cart-empty-btn:hover {
    background: #222;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .cart-empty-state { padding: 60px 20px; }
    .cart-empty-title { font-size: 26px; }
}

/* ========================================
   INFO TOOLTIP SYSTEM - Reusable Component
   ======================================== */
.info-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #ff470f;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    z-index: 1;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-tooltip:hover {
    transform: scale(1.1);
}

.info-tooltip.active {
    z-index: 10000;
}

.info-tooltip-icon {
    font-size: 11px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, serif;
    color: #fff;
    line-height: 1;
    user-select: none;
}

.info-tooltip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: #ff470f;
    color: #fff;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
    width: 260px;
    max-width: calc(100vw - 40px);
    white-space: normal;
    text-align: left;
    line-height: 1.6;
    display: none;
    opacity: 0;
    visibility: hidden;
    z-index: 10001;
    pointer-events: none;
    box-shadow: 0 8px 24px rgba(255, 71, 15, 0.35), 0 4px 12px rgba(0, 0, 0, 0.1);
}

.info-tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #ff470f;
}

.info-tooltip.active .info-tooltip-bubble {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    pointer-events: auto;
}

/* Position variants */
.info-tooltip.tooltip-pos-left .info-tooltip-bubble {
    left: 0;
    transform: translateX(0) scale(0.9);
}

.info-tooltip.tooltip-pos-left.active .info-tooltip-bubble {
    transform: translateX(0) scale(1);
}

.info-tooltip.tooltip-pos-left .info-tooltip-bubble::after {
    left: 9px;
    transform: none;
}

.info-tooltip.tooltip-pos-right .info-tooltip-bubble {
    left: auto;
    right: 0;
    transform: translateX(0) scale(0.9);
}

.info-tooltip.tooltip-pos-right.active .info-tooltip-bubble {
    transform: translateX(0) scale(1);
}

.info-tooltip.tooltip-pos-right .info-tooltip-bubble::after {
    left: auto;
    right: 9px;
    transform: none;
}

/* Bottom position variant */
.info-tooltip.tooltip-pos-bottom .info-tooltip-bubble {
    bottom: auto;
    top: calc(100% + 8px);
}

.info-tooltip.tooltip-pos-bottom .info-tooltip-bubble::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #ff470f;
}

/* Mobile - hide inline bubble, use popup instead */
@media (max-width: 768px) {
    .info-tooltip-bubble {
        display: none !important;
    }
}

/* Mobile popup overlay */
.tooltip-mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
}

.tooltip-mobile-overlay.active {
    display: block;
}

/* Mobile popup */
.tooltip-mobile-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 24px;
    right: 24px;
    transform: translateY(-50%);
    background: #ff470f;
    color: #fff;
    padding: 20px 24px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.tooltip-mobile-popup.active {
    display: block;
}