body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: white;
}

nav {
    background-image: linear-gradient(to right, white, #C8EEFF);
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2rem;
}

nav img {
    width: 220px;
}

.menu-icon i {
    font-size: 30px;
    display: flex;
    align-items: center;
    color: #007BB2;
    display: none;
}

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

.text-nav a {
    text-decoration: none;
    color: #495057;
    font-weight: 600;
    padding: 10 0;
}

.text-nav a:hover {
    color: #00A977;
    border-bottom: 3px solid #0EA5E9;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;
}

.hero-text {
    padding-left: 3rem;
}

.hero-text h1,
p {
    padding: 0;
    margin: 0;
}

.hero-text h1 {
    font-size: 30px;
    max-width: 500px;
    color: #343a40;
}

.stylefont {
    background: linear-gradient(90deg, #00D193, #0097AA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.hero-text p {
    padding-top: 15px;
    font-size: 20px;
    color: #343a40;
}

.button {
    padding-top: 40px;
}

.button a {
    text-decoration: none;
    margin-right: 15px;
    font-weight: 500;
    color: white;
    background-color: #00D193;
    padding: 15px 20px;
    border-radius: 50px;
}

.button a:hover {
    background-color: #0EA5E9;
    padding: 17px 22px;
}

.gambar img {
    width: 400px;
    padding-right: 3rem;
}

.btn1 {
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn1 a {
    display: inline-flex;
    gap: 8px;
    background-color: #EAB308;
    color: #343a40;
    padding: 12px 17px;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
    border-radius: 50px;
}

.btn1 a:hover {
    background-color: white;
    color: #EAB308;
    border: 2px solid #343a40;
    font-size: 20px;
    padding: 14px 19px;
}

.all-pallete {
    padding-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.headline-cl {
    display: flex;
    align-items: center;
    gap: 10px;
}

.headline-cl h1 {
    background: linear-gradient(90deg, #00D193, #0097AA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-size: 30px;

}

.headline-cl i {
    color: #007BB2;
    font-size: 30px;
}

.color {
    padding-top: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.color-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-size: 16px;
}

.color-item a {
    text-decoration: none;
    color: #343a40;
}

.color-item span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
}

.title {
    text-align: center;
    color: teal;
}

.color {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem 3rem;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.color-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    column-gap: 10px;
    font-size: 16px;
}

.color-item a {
    text-decoration: none;
    color: #343a40;
    cursor: pointer;
}

.color-item span {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
}


.c-red {
    background: #ef4444;
}

.c-orange {
    background: #f97316;
}

.c-yellow {
    background: #eab308;
}

.c-green {
    background: #22c55e;
}


.c-teal {
    background: #14b8a6;
}

.c-cyan {
    background: #06b6d4;
}


.c-blue {
    background: #3b82f6;
}

.c-indigo {
    background: #6366f1;
}

.c-violet {
    background: #8b5cf6;
}

.c-purple {
    background: #a855f7;
}

.c-pink {
    background: #ec4899;
}

.c-gray {
    background: #6b7280;
}

.c-slate {
    background: #64748b;
}


.jg {
    padding-top: 50px;
    padding-bottom: 100px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.garis {
    background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #84cc16, #10b981, #0ea5e9, #a855f7, #d946ef, #ec4899, #f43f5e);
    font-size: 30px;
    width: 600px;
    height: 8px;
    border-radius: 50px;
}

.all-c {
    max-width: 1200px;
    margin: auto;

}

.red-label {
    display: inline-flex;
    background-color: #ef4444;
    color: white;
    border-radius: 50px;
}

.red-label h3 {
    font-size: 20px;
    margin: 8px 25px;

}

.item-color {
    padding-top: 50px;
    padding-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}



.bg-color {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bg-color h4 {
    color: #343a40;
    font-weight: 600;
    font-size: 15px;
}

.bg-color p {
    color: #343a40;
    font-size: 14px;
    border-bottom: 2px solid #8a8a8a;
}


.color-red-50 {
    width: 100px;
    height: 60px;
    background: #fef2f2;
    border-radius: 6px;
}

.color-red-100 {
    width: 100px;
    height: 60px;
    background: #fee2e2;
    border-radius: 6px;
}

.color-red-200 {
    width: 100px;
    height: 60px;
    background: #fecaca;
    border-radius: 6px;
}

.color-red-300 {
    width: 100px;
    height: 60px;
    background: #fca5a5;
    border-radius: 6px;
}

.color-red-400 {
    width: 100px;
    height: 60px;
    background: #f87171;
    border-radius: 6px;
}

.color-red-500 {
    width: 100px;
    height: 60px;
    background: #ef4444;
    border-radius: 6px;
}

.color-red-600 {
    width: 100px;
    height: 60px;
    background: #dc2626;
    border-radius: 6px;
}

.color-red-700 {
    width: 100px;
    height: 60px;
    background: #b91c1c;
    border-radius: 6px;
}

.color-red-800 {
    width: 100px;
    height: 60px;
    background: #991b1b;
    border-radius: 6px;
}

.color-red-900 {
    width: 100px;
    height: 60px;
    background: #7F1D1D;
    border-radius: 6px;
}

/* warna batas */

.orange-label {
    display: inline-flex;
    background-color: #f97316;
    color: white;
    border-radius: 50px;
}

.orange-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}


.color-orange-50 {
    width: 100px;
    height: 60px;
    background: #fff7ed;
    border-radius: 6px;
}

.color-orange-100 {
    width: 100px;
    height: 60px;
    background: #ffedd5;
    border-radius: 6px;
}

.color-orange-200 {
    width: 100px;
    height: 60px;
    background: #fed7aa;
    border-radius: 6px;
}

.color-orange-300 {
    width: 100px;
    height: 60px;
    background: #fdba74;
    border-radius: 6px;
}

.color-orange-400 {
    width: 100px;
    height: 60px;
    background: #fb923c;
    border-radius: 6px;
}

.color-orange-500 {
    width: 100px;
    height: 60px;
    background: #f97316;
    border-radius: 6px;
}

.color-orange-600 {
    width: 100px;
    height: 60px;
    background: #ea580c;
    border-radius: 6px;
}

.color-orange-700 {
    width: 100px;
    height: 60px;
    background: #c2410c;
    border-radius: 6px;
}

.color-orange-800 {
    width: 100px;
    height: 60px;
    background: #9a3412;
    border-radius: 6px;
}

.color-orange-900 {
    width: 100px;
    height: 60px;
    background: #7c2d12;
    border-radius: 6px;
}

/* warna batas */

.yellow-label {
    display: inline-flex;
    background-color: #eab308;
    color: white;
    border-radius: 50px;
}

.yellow-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-yellow-50 {
    width: 100px;
    height: 60px;
    background: #fefce8;
    border-radius: 6px;
}

.color-yellow-100 {
    width: 100px;
    height: 60px;
    background: #fef9c3;
    border-radius: 6px;
}

.color-yellow-200 {
    width: 100px;
    height: 60px;
    background: #fef08a;
    border-radius: 6px;
}

.color-yellow-300 {
    width: 100px;
    height: 60px;
    background: #fde047;
    border-radius: 6px;
}

.color-yellow-400 {
    width: 100px;
    height: 60px;
    background: #facc15;
    border-radius: 6px;
}

.color-yellow-500 {
    width: 100px;
    height: 60px;
    background: #eab308;
    border-radius: 6px;
}

.color-yellow-600 {
    width: 100px;
    height: 60px;
    background: #ca8a04;
    border-radius: 6px;
}

.color-yellow-700 {
    width: 100px;
    height: 60px;
    background: #a16207;
    border-radius: 6px;
}

.color-yellow-800 {
    width: 100px;
    height: 60px;
    background: #854d0e;
    border-radius: 6px;
}

.color-yellow-900 {
    width: 100px;
    height: 60px;
    background: #713f12;
    border-radius: 6px;
}

/* warna batas */

.green-label {
    display: inline-flex;
    background-color: #22c55e;
    color: white;
    border-radius: 50px;
}

.green-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-green-50 {
    width: 100px;
    height: 60px;
    background: #f0fdf4;
    border-radius: 6px;
}

.color-green-100 {
    width: 100px;
    height: 60px;
    background: #dcfce7;
    border-radius: 6px;
}

.color-green-200 {
    width: 100px;
    height: 60px;
    background: #bbf7d0;
    border-radius: 6px;
}

.color-green-300 {
    width: 100px;
    height: 60px;
    background: #86efac;
    border-radius: 6px;
}

.color-green-400 {
    width: 100px;
    height: 60px;
    background: #4ade80;
    border-radius: 6px;
}

.color-green-500 {
    width: 100px;
    height: 60px;
    background: #22c55e;
    border-radius: 6px;
}

.color-green-600 {
    width: 100px;
    height: 60px;
    background: #16a34a;
    border-radius: 6px;
}

.color-green-700 {
    width: 100px;
    height: 60px;
    background: #15803d;
    border-radius: 6px;
}

.color-green-800 {
    width: 100px;
    height: 60px;
    background: #166534;
    border-radius: 6px;
}

.color-green-900 {
    width: 100px;
    height: 60px;
    background: #14532d;
    border-radius: 6px;
}

/* warna batas */

.teal-label {
    display: inline-flex;
    background-color: #0d9488;
    color: white;
    border-radius: 50px;
}

.teal-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-teal-50 {
    width: 100px;
    height: 60px;
    background: #f0fdfa;
    border-radius: 6px;
}

.color-teal-100 {
    width: 100px;
    height: 60px;
    background: #ccfbf1;
    border-radius: 6px;
}

.color-teal-200 {
    width: 100px;
    height: 60px;
    background: #99f6e4;
    border-radius: 6px;
}

.color-teal-300 {
    width: 100px;
    height: 60px;
    background: #5eead4;
    border-radius: 6px;
}

.color-teal-400 {
    width: 100px;
    height: 60px;
    background: #2dd4bf;
    border-radius: 6px;
}

.color-teal-500 {
    width: 100px;
    height: 60px;
    background: #14b8a6;
    border-radius: 6px;
}

.color-teal-600 {
    width: 100px;
    height: 60px;
    background: #0d9488;
    border-radius: 6px;
}

.color-teal-700 {
    width: 100px;
    height: 60px;
    background: #0f766e;
    border-radius: 6px;
}

.color-teal-800 {
    width: 100px;
    height: 60px;
    background: #115e59;
    border-radius: 6px;
}

.color-teal-900 {
    width: 100px;
    height: 60px;
    background: #134e4a;
    border-radius: 6px;
}

.cyan-label {
    display: inline-flex;
    background-color: #06b6d4;
    color: white;
    border-radius: 50px;
}

.cyan-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-cyan-50 {
    width: 100px;
    height: 60px;
    background: #ecfeff;
    border-radius: 6px;
}

.color-cyan-100 {
    width: 100px;
    height: 60px;
    background: #cffafe;
    border-radius: 6px;
}

.color-cyan-200 {
    width: 100px;
    height: 60px;
    background: #a5f3fc;
    border-radius: 6px;
}

.color-cyan-300 {
    width: 100px;
    height: 60px;
    background: #67e8f9;
    border-radius: 6px;
}

.color-cyan-400 {
    width: 100px;
    height: 60px;
    background: #22d3ee;
    border-radius: 6px;
}

.color-cyan-500 {
    width: 100px;
    height: 60px;
    background: #06b6d4;
    border-radius: 6px;
}

.color-cyan-600 {
    width: 100px;
    height: 60px;
    background: #0891b2;
    border-radius: 6px;
}

.color-cyan-700 {
    width: 100px;
    height: 60px;
    background: #0e7490;
    border-radius: 6px;
}

.color-cyan-800 {
    width: 100px;
    height: 60px;
    background: #155e75;
    border-radius: 6px;
}

.color-cyan-900 {
    width: 100px;
    height: 60px;
    background: #164e63;
    border-radius: 6px;
}

.blue-label {
    display: inline-flex;
    background-color: #3b82f6;
    color: white;
    border-radius: 50px;
}

.blue-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-blue-50 {
    width: 100px;
    height: 60px;
    background: #eff6ff;
    border-radius: 6px;
}

.color-blue-100 {
    width: 100px;
    height: 60px;
    background: #dbeafe;
    border-radius: 6px;
}

.color-blue-200 {
    width: 100px;
    height: 60px;
    background: #bfdbfe;
    border-radius: 6px;
}

.color-blue-300 {
    width: 100px;
    height: 60px;
    background: #93c5fd;
    border-radius: 6px;
}

.color-blue-400 {
    width: 100px;
    height: 60px;
    background: #60a5fa;
    border-radius: 6px;
}

.color-blue-500 {
    width: 100px;
    height: 60px;
    background: #3b82f6;
    border-radius: 6px;
}

.color-blue-600 {
    width: 100px;
    height: 60px;
    background: #2563eb;
    border-radius: 6px;
}

.color-blue-700 {
    width: 100px;
    height: 60px;
    background: #1d4ed8;
    border-radius: 6px;
}

.color-blue-800 {
    width: 100px;
    height: 60px;
    background: #1e40af;
    border-radius: 6px;
}

.color-blue-900 {
    width: 100px;
    height: 60px;
    background: #1e3a8a;
    border-radius: 6px;
}

.indigo-label {
    display: inline-flex;
    background-color: #6366f1;
    color: white;
    border-radius: 50px;
}

.indigo-label h3 {
    font-size: 20px;
    margin: 8px 25px;

}

.color-indigo-50 {
    width: 100px;
    height: 60px;
    background: #eef2ff;
    border-radius: 6px;
}

.color-indigo-100 {
    width: 100px;
    height: 60px;
    background: #e0e7ff;
    border-radius: 6px;
}

.color-indigo-200 {
    width: 100px;
    height: 60px;
    background: #c7d2fe;
    border-radius: 6px;
}

.color-indigo-300 {
    width: 100px;
    height: 60px;
    background: #a5b4fc;
    border-radius: 6px;
}

.color-indigo-400 {
    width: 100px;
    height: 60px;
    background: #818cf8;
    border-radius: 6px;
}

.color-indigo-500 {
    width: 100px;
    height: 60px;
    background: #6366f1;
    border-radius: 6px;
}

.color-indigo-600 {
    width: 100px;
    height: 60px;
    background: #4f46e5;
    border-radius: 6px;
}

.color-indigo-700 {
    width: 100px;
    height: 60px;
    background: #4338ca;
    border-radius: 6px;
}

.color-indigo-800 {
    width: 100px;
    height: 60px;
    background: #3730a3;
    border-radius: 6px;
}

.color-indigo-900 {
    width: 100px;
    height: 60px;
    background: #312e81;
    border-radius: 6px;
}

/* warna batas */

.violet-label {
    display: inline-flex;
    background-color: #8b5cf6;
    color: white;
    border-radius: 50px;
}

.violet-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-violet-50 {
    width: 100px;
    height: 60px;
    background: #f5f3ff;
    border-radius: 6px;
}

.color-violet-100 {
    width: 100px;
    height: 60px;
    background: #ede9fe;
    border-radius: 6px;
}

.color-violet-200 {
    width: 100px;
    height: 60px;
    background: #ddd6fe;
    border-radius: 6px;
}

.color-violet-300 {
    width: 100px;
    height: 60px;
    background: #c4b5fd;
    border-radius: 6px;
}

.color-violet-400 {
    width: 100px;
    height: 60px;
    background: #a78bfa;
    border-radius: 6px;
}

.color-violet-500 {
    width: 100px;
    height: 60px;
    background: #8b5cf6;
    border-radius: 6px;
}

.color-violet-600 {
    width: 100px;
    height: 60px;
    background: #7c3aed;
    border-radius: 6px;
}

.color-violet-700 {
    width: 100px;
    height: 60px;
    background: #6d28d9;
    border-radius: 6px;
}

.color-violet-800 {
    width: 100px;
    height: 60px;
    background: #5b21b6;
    border-radius: 6px;
}

.color-violet-900 {
    width: 100px;
    height: 60px;
    background: #4c1d95;
    border-radius: 6px;
}

.purple-label {
    display: inline-flex;
    background-color: #a855f7;
    color: white;
    border-radius: 50px;
}

.purple-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-purple-50 {
    width: 100px;
    height: 60px;
    background: #faf5ff;
    border-radius: 6px;
}

.color-purple-100 {
    width: 100px;
    height: 60px;
    background: #f3e8ff;
    border-radius: 6px;
}

.color-purple-200 {
    width: 100px;
    height: 60px;
    background: #e9d5ff;
    border-radius: 6px;
}

.color-purple-300 {
    width: 100px;
    height: 60px;
    background: #d8b4fe;
    border-radius: 6px;
}

.color-purple-400 {
    width: 100px;
    height: 60px;
    background: #c084fc;
    border-radius: 6px;
}

.color-purple-500 {
    width: 100px;
    height: 60px;
    background: #a855f7;
    border-radius: 6px;
}

.color-purple-600 {
    width: 100px;
    height: 60px;
    background: #9333ea;
    border-radius: 6px;
}

.color-purple-700 {
    width: 100px;
    height: 60px;
    background: #7e22ce;
    border-radius: 6px;
}

.color-purple-800 {
    width: 100px;
    height: 60px;
    background: #6b21a8;
    border-radius: 6px;
}

.color-purple-900 {
    width: 100px;
    height: 60px;
    background: #581c87;
    border-radius: 6px;
}

.pink-label {
    display: inline-flex;
    background-color: #ec4899;
    color: white;
    border-radius: 50px;
}

.pink-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-pink-50 {
    width: 100px;
    height: 60px;
    background: #fdf2f8;
    border-radius: 6px;
}

.color-pink-100 {
    width: 100px;
    height: 60px;
    background: #fce7f3;
    border-radius: 6px;
}

.color-pink-200 {
    width: 100px;
    height: 60px;
    background: #fbcfe8;
    border-radius: 6px;
}

.color-pink-300 {
    width: 100px;
    height: 60px;
    background: #f9a8d4;
    border-radius: 6px;
}

.color-pink-400 {
    width: 100px;
    height: 60px;
    background: #f472b6;
    border-radius: 6px;
}

.color-pink-500 {
    width: 100px;
    height: 60px;
    background: #ec4899;
    border-radius: 6px;
}

.color-pink-600 {
    width: 100px;
    height: 60px;
    background: #db2777;
    border-radius: 6px;
}

.color-pink-700 {
    width: 100px;
    height: 60px;
    background: #be185d;
    border-radius: 6px;
}

.color-pink-800 {
    width: 100px;
    height: 60px;
    background: #9d174d;
    border-radius: 6px;
}

.color-pink-900 {
    width: 100px;
    height: 60px;
    background: #831843;
    border-radius: 6px;
}

.slate-label {
    display: inline-flex;
    background-color: #64748b;
    color: white;
    border-radius: 50px;
}

.slate-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-slate-50 {
    width: 100px;
    height: 60px;
    background: #f8fafc;
    border-radius: 6px;
}

.color-slate-100 {
    width: 100px;
    height: 60px;
    background: #f1f5f9;
    border-radius: 6px;
}

.color-slate-200 {
    width: 100px;
    height: 60px;
    background: #e2e8f0;
    border-radius: 6px;
}

.color-slate-300 {
    width: 100px;
    height: 60px;
    background: #cbd5e1;
    border-radius: 6px;
}

.color-slate-400 {
    width: 100px;
    height: 60px;
    background: #94a3b8;
    border-radius: 6px;
}

.color-slate-500 {
    width: 100px;
    height: 60px;
    background: #64748b;
    border-radius: 6px;
}

.color-slate-600 {
    width: 100px;
    height: 60px;
    background: #475569;
    border-radius: 6px;
}

.color-slate-700 {
    width: 100px;
    height: 60px;
    background: #334155;
    border-radius: 6px;
}

.color-slate-800 {
    width: 100px;
    height: 60px;
    background: #1e293b;
    border-radius: 6px;
}

.color-slate-900 {
    width: 100px;
    height: 60px;
    background: #0f172a;
    border-radius: 6px;
}

.gray-label {
    display: inline-flex;
    background-color: #6b7280;
    color: white;
    border-radius: 50px;

}

.gray-label h3 {
    font-size: 20px;
    margin: 8px 25px;
}

.color-gray-50 {
    width: 100px;
    height: 60px;
    background: #f9fafb;
    border-radius: 6px;
}

.color-gray-100 {
    width: 100px;
    height: 60px;
    background: #f3f4f6;
    border-radius: 6px;
}

.color-gray-200 {
    width: 100px;
    height: 60px;
    background: #e5e7eb;
    border-radius: 6px;
}

.color-gray-300 {
    width: 100px;
    height: 60px;
    background: #d1d5db;
    border-radius: 6px;
}

.color-gray-400 {
    width: 100px;
    height: 60px;
    background: #9ca3af;
    border-radius: 6px;
}

.color-gray-500 {
    width: 100px;
    height: 60px;
    background: #6b7280;
    border-radius: 6px;
}

.color-gray-600 {
    width: 100px;
    height: 60px;
    background: #4b5563;
    border-radius: 6px;
}

.color-gray-700 {
    width: 100px;
    height: 60px;
    background: #374151;
    border-radius: 6px;
}

.color-gray-800 {
    width: 100px;
    height: 60px;
    background: #1f2937;
    border-radius: 6px;
}

.color-gray-900 {
    width: 100px;
    height: 60px;
    background: #111827;
    border-radius: 6px;
}

footer {
    text-align: center;
    background: linear-gradient(135deg, #fbd3e9 0%, #fce3ec 25%, #e0c3fc 50%, #c2e9fb 100%);
    padding: 2rem 3rem;
}

.hf h3,
p {
    padding: 0;
    margin: 0;
}

.hf h3 {
    font-size: 25px;
    color: #343a40;
}

.hf p {
    padding-top: 10px;
    font-size: 18px;
    font-weight: 400;
}

.schf {
    padding-top: 25px;
}

.schf a {
    text-decoration: none;
    margin-right: 10px;
    color:#7e22ce;
    font-weight: 500;
    font-size: 16px;
}

.schf a:hover {
    border-bottom: 2px solid #343a40;
}

.ahf p {
    padding-top: 20px;
    font-size: 16px;
}







/* responsife */
@media only screen and (max-width : 768px) {
    nav {
        flex-wrap: wrap;
    }

    .text-nav.hidden {
        display: none;
    }

    .text-nav {
        padding-top: 40px;
        flex-direction: column;
        width: 100%;
    }

    .menu-icon i {
        display: flex;
        align-items: center;
    }

    nav img {
        width: 170px;
        max-width: 100%;
    }

    .hero {
        flex-direction: column;
        text-align: center;
        padding-top: 30px;
    }

    .hero-text h1,
    p {
        padding: 0;
        margin: 0;
    }

    .hero-text {
        padding-left: 0;
    }

    .hero-text h1 {
        font-size: 20px;
        max-width: 100%;
        padding: 10px 20px;
    }

    .hero-text p {
        font-size: 18px;
        padding: 8px 30px;
        max-width: 100%;
    }

    .button {
        width: 100%;

    }

    .button a {
        flex-direction: column;
        font-size: 16px;
        padding: 15px 20px;
        font-weight: 500;
    }

    .gambar img {
        padding-top: 20px;
        padding-right: 0;
        width: 300px;
        padding-bottom: 20px;
    }

    .btn1 {
        padding-top: 50px;
        font-size: 14px;
        padding: 10px 15px;
        max-width: 100%;

    }

    .headline-cl h1 {
        font-size: 25px;
        max-width: 100%;
    }

    .headline-cl i {
        font-size: 25px;
        max-width: 100%;
    }

    .color {
        grid-template-columns: repeat(2, auto);
        max-width: 400px;
        padding-top: 30px;
        padding-left: 70px;
        padding-right: 70px;
        padding-bottom: 30px;
        cursor: pointer;
    }

    .color-item {
        font-size: 14px;
    }

    .color-item span {
        width: 15px;
        height: 15px;
    }

    .jg {
        padding-top: 40px;
    }

    .garis {
        width: 300px;
        max-width: 100%;
    }

    .bg-color h4 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item-color {
        gap: 20px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .red-label {
        display: flex;
        justify-content: center;
        width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .red-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .orange-label {
        display: flex;
        justify-content: center;
        width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .orange-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .yellow-label {
        display: flex;
        justify-content: center;
        width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .yellow-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .green-label {
        display: flex;
        justify-content: center;
        width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .green-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .teal-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;

    }

    .teal-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .cyan-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .cyan-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .blue-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .blue-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .indigo-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .indigo-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .violet-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .violet-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .purple-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .purple-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .pink-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .pink-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .slate-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .slate-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .gray-label {
        display: flex;
        justify-content: center;
        max-width: max-content;
        padding: 8px 20px;
        margin: 0 auto;
    }

    .gray-label h3 {
        margin: 0;
        font-size: 18px;
    }

    .hf h3 {
        font-size: 20px;
    }

    .hf p {
        font-size: 16px;
    }




}