:root {
  --brand: #4f7c6b;
  --brand-dark: #355e50;
  --bg-header: rgba(255,255,255,.9);
  --border-soft: #e5e7eb;
  --text-main: #1f2933;
  --text-muted: #6b7280;
}

* { box-sizing: border-box;}

html { font-size: 14px;}
body { margin: 0; font-size: 1rem; line-height: 1.6; font-family: Inter, system-ui, sans-serif; background: var(--bg-page); color: var(--text-main);}
h1 { font-size: 1.5rem; }   /* 21px */
h2 { font-size: 1.375rem; } /* 19.25px */
h3 { font-size: 1.125rem; } /* 15.75px */
h4 { font-size: .875rem; } /* 11.75px */

p { margin-top: 0; margin-bottom: var(--space-small);}
img { max-width: 100%; display: block;}
.container { max-width: 1400px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;}

@media (min-width: 768px) { .container { padding-left: 32px; padding-right: 32px;}}
@media (min-width: 1200px) { .container { padding-left: 48px; padding-right: 48px; }}

/*  HERO SLIDER */
.hero-slider { position:relative; height:420px; overflow:hidden; background:#111; }
@media (min-height: 600px) { .hero-slider {  height: 65vh;} }
@media (min-height: 900px) { .hero-slider { height: 680px;}}
.hero-track { height:100%; position:relative; }
.hero-slide { position:absolute; inset:0; opacity:0; transform:scale(1.05); transition:opacity .8s ease, transform 1.2s ease; }
.hero-slide.active { opacity:1; transform:scale(1); z-index:2; }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.hero-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.25) 60%, transparent 100%); }
.hero-content { position:absolute; z-index:3; left:2rem; top:50%; transform:translateY(-50%); max-width:560px; color:#fff; }
@media (min-width:768px) { .hero-content { left:4rem; } }
@media (min-width:1200px) { .hero-content { left:6rem; } }

.hero-content h1 { font-size: 2rem; margin-bottom: 1rem;}
@media (min-width: 768px) { .hero-content h1 { font-size: 2.6rem; margin-bottom:1rem;  }}
@media (min-width: 1200px) { .hero-content h1 { font-size: 3.4rem; margin-bottom:1rem;  }}

.hero-content p { font-size:1.1rem; opacity:.9; margin-bottom:1.5rem; }
.hero-content .btn-hero { padding:.7rem 1.6rem; border:1px solid var(--border-soft); color:#fff; text-decoration:none; font-weight:600; transition:all .2s ease; border-radius:999px; }
.hero-content .btn-hero:hover { background:var(--brand); border:1px solid var(--brand); color:#fff; }

.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; border-radius:50%; 
             border:none; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); font-size:26px; cursor:pointer; z-index:5; }
.hero-prev { left:20px; }
.hero-next { right:20px; }
.hero-dots { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); display:flex; gap:10px; 
            z-index:5; }
.dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.dot.active { background:#fff; }
/*  END HERO SLIDER */

.main-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; margin-bottom: .5rem;}

/*  SIDEBAR */
.sidebar { /* position:sticky;*/ display:flex; flex-direction:column; gap:1.25rem; top:90px; align-self:start; margin-top:2rem; margin-bottom:2rem; }
.filter-card { background:#fff; border-radius:20px; padding:1.25rem; box-shadow:0 10px 30px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.03); }
.filter-header { margin-bottom:1rem; }
.filter-header h3 { text-transform: uppercase; color:var(--text-muted); margin:0; }
.filter-links { list-style:none; padding:0; margin:0; }
.filter-links li { margin-bottom:4px; }
.filter-links a { display:flex; align-items:center; justify-content:space-between; padding:.55rem .6rem; 
                 border-radius:10px; text-decoration:none; color:var(--text-main); font-weight:500; transition:all .15s ease; }
.filter-links a:hover { background:#f6f8fb; color:var(--brand); transform:translateX(4px); }
.filter-links a::after { content:"→"; font-size:.85rem; opacity:.4; transition:.2s; }
.filter-links a:hover::after { opacity:1; transform:translateX(3px); }
.filter-links a.active { background:var(--brand); color:#fff; }
.filter-links a.active::after { color:#fff; opacity:1; }
/* END SIDEBAR */

/* PRODUCTS GRID */
.products {  margin-top: 2rem; margin-bottom: 2rem;}

/* PRODUCTS INTRO */
.products-intro { border-bottom:1px solid var(--border-soft); background:#fff; padding:1.6rem; border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.05); margin-bottom:2rem; }
.products-intro h1 { padding-top:0; margin-top:0; margin-bottom:1rem; line-height:1.2; }
.products-intro a { text-decoration:none; color:var(--main-text); }
.products-intro p { color:var(--text-muted); line-height:1.7; }
.product-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1.5rem; }
.product-card { background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04); border:1px solid rgba(0,0,0,.03); transition:all .25s ease; display:flex; flex-direction:column; }
.product-card:hover { transform:translateY(-6px); box-shadow:0 25px 60px rgba(0,0,0,.10); }
/* .product-image-wrap { position:relative; display:block; background:#f7f9fb; padding:1.5rem; aspect-ratio:4 / 3; } */
.product-image-wrap img { width:100%; height:100%; object-fit:contain; border-radius:22px; }

.product-badge { position:absolute; top:14px; left:14px; background:var(--brand); color:#fff; font-size:.7rem; font-weight:600; padding:4px 10px; border-radius:999px; }
.product-info-panel { position:sticky; top:110px; }
.product-info { padding:1rem; display:flex; flex-direction:column; flex-grow:1; }
.product-title { margin: 0; line-height:1.35;}
.product-title a { color:var(--text-main); text-decoration: none; }
.product-title a:hover { color:var(--brand); }
.product-meta { font-size:.75rem; color:var(--text-muted); margin-bottom:.5rem; }
.product-excerpt { line-height: 1.35; margin: 1rem 0;}
.product-price { font-size:1.2rem; font-weight:700; color:var(--brand); margin-bottom:.5rem; }
.product-actions { display:flex; gap:.6rem; margin-top:auto; }
.btn-primary { padding:.7rem 1.6rem; border:1px solid var(--brand); color:var(--brand); text-decoration:none; font-weight:600; transition:all .2s ease; border-radius:999px; }
.btn-outline { padding:.7rem 1.6rem; border:1px solid var(--border-soft); color:var(--brand); text-decoration:none; font-weight:600; transition:all .2s ease; border-radius:999px; }
.btn-primary:hover, .btn-outline:hover { background:var(--brand); color:#fff; }

.product-meta-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-bottom:.6rem; }
.product-rating { display:flex; align-items:center; gap:.35rem; }
.product-stock { font-size:.75rem; font-weight:600; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.in-stock { background:#e8f7ef; color:#1f9d55; }
.low-stock { background:#fff4e5; color:#d97706; }
.sold-out { background:#fee2e2; color:#dc2626; }

/* Star Rating Style */
.product-rating { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; } 
.stars { color: #fbbf24; font-size: 1.2rem; letter-spacing: -2px; } 
.rating-count { font-size: 0.8rem; color: var(--text-muted); }

@media (max-width: 420px) { .product-meta-row { flex-wrap: wrap; gap: .4rem; }}
/* END PRODUCTS GRID */

/* HOME ARTICLES LIST */
.home-articles { padding-top: 6px; padding-bottom: 6px;}
@media (min-width: 768px) { .home-articles { padding-top: 8px; padding-bottom: 8px;} }
@media (min-width: 1200px) { .home-articles { padding-top: 12px; padding-bottom: 12px;}}

.articles-header { margin-bottom:2rem; }
.articles-header h2 { margin-top:0; margin-bottom:.5rem; }
.articles-header p { color:var(--text-muted); line-height:1.6; }
.articles-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:1.6rem; }

@media (max-width: 1100px) { .articles-grid { grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 640px) { .articles-grid { grid-template-columns: 1fr; }}

.article-card { background:#fff; border-radius:18px; overflow:hidden; border:1px solid rgba(0,0,0,.04); box-shadow:0 10px 30px rgba(0,0,0,.05); transition:all .25s ease; display:flex; flex-direction:column; }
.article-card:hover { transform:translateY(-6px); box-shadow:0 25px 60px rgba(0,0,0,.12); }
.article-image { display:block; aspect-ratio:16 / 10; background:#f3f4f6; }
.article-image img { width:100%; height:100%; object-fit:cover; }
.article-content { padding:1.2rem; display:flex; flex-direction:column; flex-grow:1; }
.article-content h3 { font-size:1.05rem; line-height:1.35; margin-bottom:.5rem; }
.article-content h3 a { text-decoration:none; color:var(--text-main); }
.article-content h3 a:hover { color:var(--brand); }
.article-read { margin-top:auto; font-weight:600; font-size:.9rem; color:var(--brand); text-decoration:none; }
.articles-footer { margin-top:2.5rem; text-align:center; }
/* END HOME ARTICLES LIST */
/* BRAND LOGO SECTION  */
.brand-section { padding: .5rem 0; border-top: 1px solid var(--border-soft);}
@media (min-width: 600px) { .brand-section { padding: calc(1rem + 2vw) 0; border-top: 1px solid var(--border-soft); }}
@media (min-width: 1200px) { .brand-section { padding: 2rem 0; border-top: 1px solid var(--border-soft); }}

.brand-header { text-align:center; margin:0 auto 2.5rem; }
.brand-header h2 { margin-top:0; margin-bottom:.6rem; }
.brand-header p { color:var(--text-muted); line-height:1.6; }
.brand-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:4px; align-items:center; }

@media (min-width: 768px) { .brand-grid { gap: 6px;} }
@media (min-width: 1200px) { .brand-grid { gap: 8px;} }

.brand-item { display:flex; align-items:center; justify-content:center; padding:.5rem; border-radius:14px; transition:all .25s ease; }
.brand-item img { max-height:48px; width:auto; opacity:.7; filter:grayscale(100%); transition:all .25s ease; }
.brand-item:hover img { opacity:1; filter:grayscale(0%); transform:scale(1.05); }
/* END BRAND LOGO SECTION  */
/* FOOTER */

/* --- Modern Footer Styles --- */
.site-footer { margin-top: 10px; padding-top: 10px; background: #0f172a; color: #cbd5e1; font-size: .875rem;}
.site-footer a { color: #e2e8f0; text-decoration: none;}
.site-footer a:hover { color:var(--brand);}
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 3fr; gap: 20px; margin: 10px 0 10px 0; }
.footer-company { padding: .2rem 0; display: flex; flex-direction: column; align-items: center;   /* horizontal */
  justify-content: center; /* vertical */ text-align: center;}
.footer-heading { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; } 
.footer-contact { display: flex; flex-direction: column; gap: .1rem;}
.footer-item { font-size: .875rem;}
.footer-item strong { color: #94a3b8; margin-right: .4rem;}
.footer-links{ column-gap:40px; list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:8px; }
.footer-links-brand{ columns:4; column-gap:40px; list-style:none; padding:0; margin:0; }
.footer-links-brand li{ break-inside:avoid; margin-bottom:8px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08);}
.footer-bottom-row { display: flex; justify-content: center; padding: .5rem 0; font-size: .85rem; color: #94a3b8;}
.footer-contact { display: flex; flex-direction: column; gap: .1rem;}

@media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; }}
@media (max-width: 576px) {.footer-grid { grid-template-columns: 1fr; }}
@media (max-width: 768px) {.footer-bottom { flex-direction: column; gap: 20px; text-align: center; }}
/* END FOOTER */

/* PRODUCT SINGLE */
.product-single { padding: 3rem 0;}
.product-single-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; }

.gallery-main { background:#f7f9fb; border-radius:18px; padding:2rem; margin-bottom:1rem; }
.gallery-main img { width:100%; height:auto; object-fit:contain; }
.gallery-thumbs { display:grid; grid-template-columns:repeat(4, 1fr); gap:.6rem; }
.thumb { border-radius:12px; padding:.4rem; background:#f7f9fb; cursor:pointer; opacity:.7; transition:.2s; }
.thumb.active, .thumb:hover { opacity:1; box-shadow:0 8px 20px rgba(0,0,0,.08); }


.product-overview { color:var(--text-muted); line-height:1.7; margin-bottom:1.6rem; }
.product-cta .btn-primary { width:100%; text-align:center; padding:.9rem 1.2rem; font-size:1rem; }
.product-description { margin-bottom: 10px; padding:.5rem 0 5px 0; border-top:1px solid var(--border-soft); background:#f6f8fb; border-radius:12px; }
.product-article a { text-decoration:none; color:var(--text-main); }
.product-article h2 { font-size:1.6rem; margin-bottom:.8rem; }
.product-article h3 { font-size:1.2rem; margin-bottom:.6rem; }
.product-article p { color:var(--text-main); margin-bottom:1rem; }
.product-article ul { padding-left:1.2rem; margin-bottom:1.2rem; }
.product-article li { margin-bottom:.45rem; color:var(--text-main); }
.product-article ul li::marker { color:var(--brand); }
.product-description table { width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.95rem; }
.product-description table tr { border-bottom:1px solid var(--border-soft); }
.product-description table th { text-align:left; padding:.7rem .5rem; width:40%; color:var(--text-muted); font-weight:600; }
.product-description table td { padding:.7rem .5rem; color:var(--text-main); }
.product-description table tr:nth-child(even) { background:#fafbfc; }
.product-article hr { border:none; border-top:1px solid var(--border-soft); margin:2rem 0; }
.product-meta { display:flex; flex-wrap:wrap; gap:1rem 1.5rem; margin-bottom:.8rem; }
.meta-item { display:flex; align-items:center; gap:.4rem; }
.meta-label { color:var(--text-muted); font-weight:500; }
.product-meta a { color:var(--brand); text-decoration:none; font-weight:600; }
.product-meta a:hover { text-decoration:underline; }
.image-lightbox { position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.25s; z-index:9999; }
.image-lightbox.active { opacity:1; pointer-events:auto; }

.breadcrumb-bar { margin-top:10px; background:transparent; border-bottom:none; }
.breadcrumb-bar{ margin-top:10px; background:transparent; border-bottom:none; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none; padding:0; margin:0; font-size:.85rem; color:var(--text-muted); }
.breadcrumb a{ text-decoration:none; color:var(--text-muted); }
.breadcrumb a:hover{ color:var(--brand); }
.breadcrumb li[aria-current="page"]{ color:var(--text-main); font-weight:500; }
.breadcrumb li+li::before{ content:"›"; margin:0 .4rem; color:var(--text-muted); }

/* --- Related Products Section --- */
.related-product {  margin: 5px 0 30px 0; padding: 20px 0;}

/* CONTACT FORM */
.contact-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; }
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; } }
.contact-form-card { background:#fff; padding: 0 1.8rem 1rem 1.8rem; border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,.06); }
.contact-form { display:flex; flex-direction:column; gap:1rem; }
.form-row { display:flex; flex-direction:column; gap:.3rem; }
.form-row label { font-weight: 700; color:var(--text-muted); }
.contact-form input, .contact-form textarea { padding:.7rem .9rem; border-radius:10px; border:1px solid var(--border-soft); font-family:inherit; font-size:.95rem; }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-color:var(--brand); }

.contact-form .btn-submit { align-self: flex-start; width: auto; padding:.7rem 1.6rem; border:1px solid var(--brand); color: var(--text-main); font-weight:600; transition:all .2s ease; border-radius:999px; }
.contact-form .btn-submit:hover { cursor: pointer; background:var(--brand); border:1px solid var(--brand); color:#fff; }

.contact-info-card { background:#f8fafc; padding: 0 1.8rem 1rem 1.8rem; border-radius:20px; }
.info-item { margin-bottom:1.2rem; }
.info-item strong { display:block; margin-bottom:.3rem; }
.contact-info-card a { color:var(--brand); text-decoration:none; }
.contact-info-card a:hover { text-decoration:underline; }

.form-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
@media (max-width: 600px) { .form-row-inline { grid-template-columns: 1fr;}}

/* INFO PAGE */
.content-page { padding:2.5rem 0; }
@media (min-width:768px) { .content-page { padding:.2rem 0; } }
@media (min-width:1200px) { .content-page { padding:1rem 0; } }

.content-header { margin-bottom: 2rem;}
.content-header h1 { margin-bottom:.6rem; }
/* 
@media (min-width:768px) { .content-header h1 { font-size:2.3rem; } }
@media (min-width:1200px) { .content-header h1 { font-size:2.6rem; } }
*/

.content-intro{ color:var(--text-muted); line-height:1.6; }
.content-article{ line-height:1.75;}
.content-article h2{ margin-top:2rem; margin-bottom:.8rem; }
.content-article h3{ margin-top:1.5rem; margin-bottom:.6rem; }
.content-article p{ margin-bottom:1rem; }
.content-article ul{ padding-left:1.2rem; margin-bottom:1.2rem; }
.content-article table{ width:100%; border-collapse:collapse; margin:1.5rem 0; }
.content-article th, .content-article td{ padding:.7rem; border-bottom:1px solid var(--border-soft); text-align:left; }
.error-page{ padding:1rem 0; text-align:center; }
@media (min-width:768px){ .error-page{ padding:1.5rem 0; } }
@media (min-width:1200px){ .error-page{ padding:3rem 0; } }
.error-container{ max-width:640px; }
.error-code{ font-size:4rem; font-weight:700; color:var(--brand); line-height:1; margin-bottom:1rem; }
@media (min-width:768px){ .error-code{ font-size:5.5rem; } }
@media (min-width:1200px){ .error-code{ font-size:7rem; } }
.error-content h1{ margin-bottom:.8rem; }
.error-text{ color:var(--text-muted); line-height:1.6; margin-bottom:2rem; }
.error-actions{ display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }
@media (max-width:480px){ .error-actions{ flex-direction:column; } }

/* --- Modern Pagination Styling --- */
.pagination { display:flex; justify-content:center; align-items:center; gap:8px; margin:60px 0; }
.pag-btn,.pag-num { color: var(--text-main); text-decoration: none; padding:10px 18px; border: 1px solid #4f7c6b; border-radius:8px; font-weight:600; transition:var(--transition); }
.pag-num.active { background: #4f7c6b; color: #fff; border-color: #4f7c6b; box-shadow:0 4px 12px rgba(37,99,235,.2); }
.pag-num:hover:not(.active),.pag-btn:hover { background: #e5e7eb; border-color: #4f7c6b;; color: #4f7c6b; }
.pag-btn { min-width:100px; text-align:center; }

.blog-page { padding: .5rem 0; /* minimum */ }
@media (min-width: 800px) { .blog-page { padding: 3vw 0; /* fluid range */}}
@media (min-width: 1280px) { .blog-page { padding: 1rem 0; /* maximum */ }}

.blog-header { max-width: 100%; margin-bottom: 2.5rem;}
.blog-header h1 { font-size: 2rem; /* minimum */ margin-bottom: .6rem; }
@media (min-width: 1067px) { .blog-header h1 { font-size: 3vw; /* fluid range */ } }
@media (min-width: 1387px) { .blog-header h1 { font-size: 2.6rem; /* maximum */ }}

.blog-header p { color: var(--text-muted); line-height: 1.6;}
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); }}

@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; }}

.blog-card{ background:white; border-radius:20px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.05); transition:.25s; }
.blog-card:hover{ transform:translateY(-6px); }
.blog-image{ display:block; aspect-ratio:16/10; }
.blog-image img{ width:100%; height:100%; object-fit:cover; }
.blog-content{ padding:1.2rem; }
.blog-date{ font-size:.875rem; color:var(--text-muted); margin-bottom:.5rem; }
.blog-title{ margin-bottom:.5rem; }
.blog-title a{ text-decoration:none; color:var(--text-main); }
.blog-title a:hover{ color:var(--brand); }
.blog-excerpt{ color:var(--text-muted); font-size:.9rem; line-height:1.6; margin-bottom:1rem; }
.blog-read{ font-weight:600; color:var(--brand); text-decoration:none; }

/* HEADER TEBARU */
.site-header{ /* position:sticky; */ top:0; z-index:1000; background:#ffffff; border-bottom:1px solid var(--border-soft); }
.site-header::before{ content:""; display:block; height:4px; background:var(--brand); }
.header-top{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:5rem; padding:12px 0; }
.logo img{ height:48px; }
.search-form{ display:flex; align-items:center; border-bottom:2px solid var(--brand); max-width:500px; width:100%; }
.search-form input{ flex:1; border:none; padding:.8rem 0; outline:none; }
.search-form button{ border:none; background:transparent; cursor:pointer; color:var(--brand); }
.header-cta{ padding:.7rem 1.6rem; border:1px solid var(--brand); color:var(--brand); text-decoration:none; font-weight:600; transition:all .2s ease; border-radius:999px; }
.header-cta:hover{ background:var(--brand); color:#fff; }
.header-bottom{ border-top:1px solid var(--border-soft); padding:14px 0; }
.main-nav{ display:flex; gap:34px; }
.main-nav a{ text-decoration:none; color:var(--text-main); font-weight:500; position:relative; }
.main-nav a:hover{ color:var(--brand); }
.main-nav a::after{ content:""; position:absolute; bottom:-6px; left:0; width:0%; height:2px; background:var(--brand); transition:width .25s ease; }
.main-nav a:hover::after{ width:100%; }
@media (max-width:1024px){ .header-top{ grid-template-columns:auto auto; } .search-form{ grid-column:1/-1; margin-top:10px; } .main-nav{ flex-wrap:wrap; gap:20px; } }
.mobile-menu-btn{ display:none; background:none; border:none; cursor:pointer; }
@media (max-width:768px){ .main-nav{ display:none; flex-direction:column; gap:16px; padding:20px 0; } .main-nav.active{ display:flex; } .mobile-menu-btn{ display:block; } .header-bottom{ justify-content:space-between; } }