/* ========================================================= IGET ONE BLOG - GLOBAL SCOPE No background colors are defined ========================================================= */ .iget-one-blog { width: 100%; max-width: 1080px; margin: 0 auto; padding: 20px; color: #363636; font-family: Arial, Helvetica, sans-serif; line-height: 1.7; box-sizing: border-box; } .iget-one-blog *, .iget-one-blog *::before, .iget-one-blog *::after { box-sizing: border-box; } /* ========================================================= HEADER ========================================================= */ .iget-one-blog-header { max-width: 850px; margin: 0 auto 55px; text-align: center; } .iget-one-blog-label { display: inline-block; margin-bottom: 10px; color: #F28C28; font-size: 12px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; } .iget-one-blog-header h1 { margin: 0 0 16px; color: #363636; font-size: 36px; line-height: 1.25; font-weight: 700; } .iget-one-blog-intro { max-width: 700px; margin: 0 auto; color: #666666; font-size: 15px; line-height: 1.75; } /* ========================================================= BLOG SECTIONS ========================================================= */ .iget-one-blog-section { margin-bottom: 50px; } .iget-one-blog-section h2 { margin: 0 0 18px; color: #363636; font-size: 27px; line-height: 1.3; font-weight: 700; } .iget-one-blog-section h2::after { content: ""; display: block; width: 42px; height: 3px; margin-top: 10px; background: #F28C28; border-radius: 3px; } .iget-one-blog-section p { margin: 0 0 14px; color: #666666; font-size: 14px; line-height: 1.8; } /* ========================================================= FEATURE GRID ========================================================= */ .iget-one-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 25px; } .iget-one-feature { display: flex; gap: 15px; padding: 20px; border: 1px solid rgba(54, 54, 54, 0.08); border-radius: 10px; } .iget-one-feature-number { flex-shrink: 0; color: #F28C28; font-size: 13px; font-weight: 700; } .iget-one-feature h3 { margin: 0 0 6px; color: #363636; font-size: 15px; font-weight: 700; } .iget-one-feature p { margin: 0; color: #707070; font-size: 12px; line-height: 1.65; } /* ========================================================= FLAVOUR LIST ========================================================= */ .iget-one-flavour-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; } .iget-one-flavour-list span { display: inline-block; padding: 8px 13px; border: 1px solid rgba(54, 54, 54, 0.10); border-radius: 20px; color: #555555; font-size: 12px; } /* ========================================================= SHIPPING ========================================================= */ .iget-one-logistics { padding-top: 5px; } .iget-one-shipping-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 25px; } .iget-one-shipping-item { display: flex; align-items: flex-start; gap: 13px; padding: 18px; border: 1px solid rgba(54, 54, 54, 0.08); border-radius: 10px; } .iget-one-shipping-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; min-width: 38px; border-radius: 50%; background: #F28C28; color: #ffffff; font-size: 10px; font-weight: 700; } .iget-one-shipping-item h3 { margin: 0 0 5px; color: #363636; font-size: 14px; font-weight: 700; } .iget-one-shipping-item p { margin: 0; color: #707070; font-size: 11px; line-height: 1.6; } /* ========================================================= FAQ ========================================================= */ .iget-one-faq { margin-top: 25px; border-top: 1px solid rgba(54, 54, 54, 0.10); } .iget-one-faq details { border-bottom: 1px solid rgba(54, 54, 54, 0.10); } .iget-one-faq summary { position: relative; padding: 18px 35px 18px 0; color: #363636; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; } .iget-one-faq summary::-webkit-details-marker { display: none; } .iget-one-faq summary::after { content: "+"; position: absolute; right: 5px; top: 15px; color: #F28C28; font-size: 20px; font-weight: 400; } .iget-one-faq details[open] summary::after { content: "−"; } .iget-one-faq details p { margin: 0 0 18px; padding-right: 30px; color: #707070; font-size: 13px; line-height: 1.7; } /* ========================================================= CONCLUSION ========================================================= */ .iget-one-blog-conclusion { max-width: 850px; margin: 65px auto 20px; padding: 35px 25px; text-align: center; border-top: 1px solid rgba(54, 54, 54, 0.10); } .iget-one-blog-conclusion h2 { margin: 0 0 12px; color: #363636; font-size: 25px; line-height: 1.35; } .iget-one-blog-conclusion p { max-width: 700px; margin: 0 auto; color: #666666; font-size: 13px; line-height: 1.75; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 800px) { .iget-one-blog { padding: 18px; } .iget-one-blog-header h1 { font-size: 31px; } .iget-one-feature-grid { grid-template-columns: 1fr; } .iget-one-shipping-grid { grid-template-columns: 1fr; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .iget-one-blog { padding: 15px; } .iget-one-blog-header { margin-bottom: 40px; } .iget-one-blog-header h1 { font-size: 27px; } .iget-one-blog-intro { font-size: 13px; } .iget-one-blog-section { margin-bottom: 40px; } .iget-one-blog-section h2 { font-size: 23px; } .iget-one-blog-section p { font-size: 13px; } .iget-one-feature { padding: 16px; } .iget-one-shipping-item { padding: 16px; } .iget-one-blog-conclusion { margin-top: 45px; padding: 30px 15px; } .iget-one-blog-conclusion h2 { font-size: 22px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .iget-one-blog { padding: 12px; } .iget-one-blog-header h1 { font-size: 24px; } .iget-one-blog-section h2 { font-size: 21px; } }