/* Variables for consistent styling */
:root {
    /* Colors */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-dark: #1A1A1A;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #E5E7EB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-primary: #FFBB00;
    
    /* Fonts */
    --font-primary: 'Roboto', sans-serif;
    --font-logo: 'Pacifico', cursive;
    
    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    color: var(--color-gray-900);
    line-height: 1.5;
    /*background-color: var(--color-white);*/
}

/*main {*/
/*    background-color: var(--color-white);*/
/*}*/

a {
    text-decoration: none;
    color: white;
}

ul {
    list-style: none;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Header */
.header {
    height: 64px;
    background-color: var(--color-white);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    max-width: 1280px;
    margin: 0 auto;
}

.logo {
    font-family: var(--font-logo);
    font-size: 24px;
    line-height: 32px;
    color: var(--color-black);
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
}

.nav-link {
    font-size: 16px;
    color: var(--color-gray-600);
    transition: color 0.3s ease;
}

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

/* Hero section */
.hero {
    padding: var(--spacing-xxl) 0;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    line-height: 60px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.hero-divider {
    width: 436px;
    height: 1px;
    background-color: var(--color-gray-100);
    margin-bottom: var(--spacing-sm);
}

.hero-description {
    max-width: 837px;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-md);
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 12px 32px;
}

.btn-primary:hover {
    background-color: #E5A800; /* Darkened primary color */
}

/* Products section */
.products {
    margin-bottom: var(--spacing-xl);
}

.products .container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.product-card {
    flex: 0 0 calc(33.333% - var(--spacing-md));
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.product-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
}

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

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

.product-title {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    margin-top: var(--spacing-sm);
    color: var(--color-black);
    text-align:center;
}

/* Quote section */
.quote-section {
    background-color: var(--color-black);
    padding: var(--spacing-xxl);
    color: var(--color-white);
    border-radius: 12px;
    margin-bottom: var(--spacing-xxl);
}

.quote-header {
    text-align: center;
    max-width: 896px;
    margin: 0 auto var(--spacing-xl);
}

.quote-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: var(--spacing-sm);
}

.quote-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-gray-400);
}

.quote-form {
    max-width: 768px;
    margin: 0 auto;
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.form-group {
    flex: 1;
    margin-bottom: var(--spacing-md);
}

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

.form-control {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--color-gray-800);
    border-radius: 4px;
    background-color: var(--color-gray-900);
    color: var(--color-white);
    font-size: 16px;
    line-height: 24px;
}

.form-control::placeholder {
    color: var(--color-gray-400);
}

textarea.form-control {
    min-height: 128px;
    resize: vertical;
}

.form-group span {
    display: block;
}

/* Related products section */
.related-products {
    margin-bottom: var(--spacing-xxl);
}

.related-products .container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    justify-content: space-between;
}

.related-products .product-card {
    flex: 0 0 calc(33.333% - var(--spacing-md));
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    margin-bottom: var(--spacing-xl);
    text-align: center;
    width: 100%; /* 确保标题占据整行 */
    /*color: black;*/
}

/* Footer */
.footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: var(--spacing-xl) 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
}

.footer-column {
    flex: 1;
    max-width: 288px;
}

.footer-logo {
    font-family: var(--font-logo);
    font-size: 24px;
    line-height: 32px;
    margin-bottom: var(--spacing-md);
}

.footer-heading {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    margin-bottom: var(--spacing-sm);
}

.footer-description {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-gray-400);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.footer-links a {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-gray-400);
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-white);
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.social-link:hover {
    opacity: 1;
}

.facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16' fill='%239CA3AF'%3E%3Cpath d='M2.26027 6.65625L2.26027 0L2.26027 6.65625L2.26027 0L6.23288 0L6.23288 6.65625L9.21233 6.65625L9.82877 9.71875L6.23288 9.71875L6.23288 10.7813Q6.23288 11.9688 6.81507 12.5Q7.39726 13.0313 8.73288 13.0313Q9.58904 13.0313 10 12.9688L10 15.75Q9.58904 15.8438 8.86986 15.9375Q8.15069 16 7.60274 16Q2.19178 16.0625 2.26027 11.0313L2.26027 9.6875L0 9.6875L0 6.65625L2.26027 6.65625Z'/%3E%3C/svg%3E");
}

.twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 13' fill='%239CA3AF'%3E%3Cpath d='M14.3438 9.75Q14.375 9.53125 14.375 9.34375Q14.375 7.125 13.2812 5Q12.2188 2.875 10.125 1.46875Q8.0625 0.0625 5.03125 0Q2.21875 0.03125 0 1.46875Q0.375 1.4375 0.78125 1.4375Q3.125 1.46875 4.875 2.84375Q3.75 2.875 2.9375 3.5Q2.125 4.125 1.8125 5.09375Q2.09375 5.0625 2.40625 5.0625Q2.875 5.0625 3.28125 5.15625Q2.125 5.40625 1.40625 6.28125Q0.6875 7.15625 0.65625 8.375L0.65625 8.4375Q1.3125 8.0625 2.125 8Q0.75 8.96875 0.65625 10.75Q0.6875 11.6562 1.125 12.4062Q2.34375 10.9062 4.09375 10Q5.8125 9.09375 7.875 8.96875Q7.8125 9.34375 7.8125 9.71875Q7.84375 11.0938 8.75 12.0312Q9.6875 12.9688 11.0625 13Q12.5312 12.9688 13.4688 11.9688Q14.5938 12.1875 15.5625 12.75Q15.1562 11.5938 14.125 10.9375Q15.0938 11.0625 16 11.4688Q15.3125 10.4688 14.3438 9.75Z'/%3E%3C/svg%3E");
}

.instagram {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%239CA3AF'%3E%3Cpath d='M7 10.5938Q5.46875 10.5625 4.46875 9.53125Q3.4375 8.53125 3.40625 7Q3.4375 5.46875 4.46875 4.46875Q5.46875 3.4375 7 3.40625Q8.53125 3.4375 9.53125 4.46875Q10.5625 5.46875 10.5938 7Q10.5625 8.53125 9.53125 9.53125Q8.53125 10.5625 7 10.5938ZM7 4.65625Q6 4.6875 5.34375 5.34375Q4.6875 6 4.65625 7Q4.6875 8 5.34375 8.65625Q6 9.3125 7 9.34375Q8 9.3125 8.65625 8.65625Q9.3125 8 9.34375 7Q9.3125 6 8.65625 5.34375Q8 4.6875 7 4.65625ZM11.5938 10.75Q11.5 9.96875 10.75 9.90625Q9.96875 9.96875 9.90625 10.75Q9.90625 11.0938 10.1562 11.3438Q10.375 11.5625 10.75 11.5625Q11.0938 11.5625 11.3438 11.3438Q11.5625 11.0938 11.5938 10.75ZM13.9688 9.875Q13.9688 11.5938 12.8125 12.8125Q11.5938 13.9688 9.90625 13.9688Q9.28125 14 8.125 14Q7 14 5.875 14Q4.71875 14 4.125 13.9688Q2.4375 13.9688 1.1875 12.8125Q0.03125 11.5938 0.0625 9.90625Q0 9.28125 0 8.125Q0 7 0 5.875Q0 4.75 0.0625 4.125Q0.03125 2.40625 1.1875 1.1875Q2.40625 0.03125 4.125 0.0625Q4.71875 0.03125 5.875 0Q7 0 8.125 0Q9.28125 0.03125 9.90625 0.0625Q11.5938 0.03125 12.8125 1.1875Q13.9688 2.40625 13.9688 4.125Q14 4.75 14 5.875Q14 7 14 8.125Q14 9.28125 13.9688 9.90625L13.9688 9.875ZM12.4688 2.875Q12.0625 1.9375 11.125 1.53125Q10.5 1.3125 9.4375 1.28125Q8.375 1.25 7.5 1.25Q7.21875 1.25 7 1.25Q6.78125 1.25 6.5 1.25Q5.625 1.25 4.5625 1.28125Q3.53125 1.3125 2.875 1.53125Q1.9375 1.9375 1.53125 2.875Q1.3125 3.53125 1.28125 4.5625Q1.25 5.625 1.25 6.5Q1.25 6.78125 1.25 7Q1.25 7.21875 1.25 7.5Q1.25 8.375 1.28125 9.4375Q1.3125 10.5 1.53125 11.125Q1.9375 12.0625 2.875 12.4688Q3.53125 12.6875 4.5625 12.7188Q5.625 12.7812 6.5 12.75Q6.78125 12.75 7 12.75Q7.21875 12.75 7.5 12.75Q8.375 12.75 9.4375 12.7188Q10.5 12.6875 11.125 12.4688Q12.0625 12.0625 12.4688 11.125Q12.6875 10.5 12.7188 9.4375Q12.7812 8.375 12.75 7.5Q12.75 7.21875 12.75 7Q12.75 6.78125 12.75 6.5Q12.7812 5.625 12.7188 4.5625Q12.6875 3.5 12.4688 2.875Z'/%3E%3C/svg%3E");
}

.footer-bottom {
    border-top: 1px dashed var(--color-gray-700);
    padding-top: var(--spacing-md);
    text-align: center;
}

.copyright {
    font-size: 16px;
    line-height: 24px;
    color: var(--color-gray-400);
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .product-card {
        flex: 0 0 calc(50% - var(--spacing-md));
    }
}

@media (max-width: 768px) {
    .product-card {
        flex: 0 0 100%;
    }
    
    .hero-title {
        font-size: 36px;
        line-height: 44px;
    }
    
    .hero-divider {
        width: 100%;
    }
    
    .form-row {
        flex-direction: column;
    }
    
    .footer-content {
        flex-wrap: wrap;
        gap: var(--spacing-xl);
    }
    
    .footer-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-xs);
    }
    
    .nav {
        flex-direction: column;
        padding: var(--spacing-xs) 0;
    }
    
    .nav-links {
        margin-top: var(--spacing-xs);
    }
    
    .hero {
        padding: var(--spacing-xl) 0;
    }
    
    .quote-section {
        padding: var(--spacing-xl) var(--spacing-xs);
    }
} 

.blog-pegi {
    background: var(--color-black);
}