.blogSubscribeSection{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 20px;border-radius:10px;margin:50px 0}.blogSubscribeSection h2{font-size:40px;font-weight:700;margin-bottom:15px}.blogSubscribeSection p{font-size:18px;line-height:1.6;margin-bottom:25px}.blogSubscribeForm{display:flex;position:relative;max-width:400px;width:100%;margin-top:20px}.blogSubscribeInput{width:100%;padding:14px 50px 14px 15px;border:1px solid black;border-radius:5px;background-color:transparent;color:black;font-size:16px;font-style:italic;outline:none}.blogSubscribeInput::placeholder{opacity:.7;font-size:14px}.blogSubscribeButton{position:absolute;right:5px;top:50%;transform:translateY(-50%);background-color:black;color:white;border:none;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:700;cursor:pointer}.blogSubscribeButton:hover{background-color:#333}@media (max-width:768px){.blogSubscribeSection h2{font-size:26px}.blogSubscribeSection p{font-size:16px}}.blogCategories{display:flex;gap:18px;margin:24px 0;justify-content:center}.blogCategories button{padding:12px 24px;font-weight:600;border-radius:20px;cursor:pointer;transition:all .3s ease-in-out;width:120px;height:35px;text-align:center;display:flex;align-items:center;justify-content:center;border:1px solid transparent}.blogCategories button.system{border-color:blue;background-color:transparent;color:rgb(2,107,255)}.blogCategories button.system:hover{background-color:blue;color:white}.blogCategories button.news{border-color:green;background-color:transparent;color:rgb(157,223,96)}.blogCategories button.news:hover{background-color:green;color:white}.blogCategories button.tutorial{border-color:red;background-color:transparent;color:rgb(255,97,12)}.blogCategories button.tutorial:hover{background-color:red;color:white}.blogCategories button.active{background-color:black!important;color:white!important}.blogList{display:flex;gap:40px;flex-wrap:wrap;justify-content:center;margin-bottom:50px;margin-top:30px}.blogCard{flex:1 1 calc(30% - 40px);max-width:calc(30% - 40px);box-sizing:border-box;text-align:left;padding:20px;border:1px solid transparent;border-radius:15px;transition:all .3s ease-in-out}.blogCard img{width:100%;height:180px;object-fit:cover;border-radius:10px}.blogCardTitle{font-size:20px;margin-top:10px}.blogCardReadMore{color:#555}.blogCard h3{font-size:20px;font-weight:700;margin:15px 0 10px}.blogCard p{color:#333;font-size:16px}@media (max-width:768px){.blogCard{flex:1 1 100%;max-width:100%;margin:0 20px}.blogList{margin-bottom:50px;margin-top:30px}}