.Blog_Page{ .blogV2 { padding: 10px; background-color: var(--themeUltraLight); } .blogGrid { display: grid; grid-template-columns: auto 350px; gap: 10px; /*align-items: flex-start;*/ margin-top: 10px; } .blogV2Area { background-color: #ffffff; padding: 20px; border-radius: 5px; box-shadow: 0 0 30px #00000019; max-width: 100%; overflow: auto; } .blogForm { background-color: #ffffff; padding: 10px; border-radius: 5px; box-shadow: 0 0 30px #00000019; } .blogFormHead { font-weight: 600; font-size: 18px; } .blogFormField { margin-top: 10px; } .blogFormField label { font-weight: 600; font-size: 14px; } .blogFormField input, .blogFormField textarea { padding: 10px; background-color: var(--themeUltraLight); border: 0.5px solid var(--themeLightColor); width: -webkit-fill-available; border-radius: 5px; font-size: 14px; margin-top: 5px; } .blogFormField button { padding: 10px; width: -webkit-fill-available; background-color: var(--btnColor); color: var(--btnColorText); border: 0; border-radius: 5px; cursor: pointer; } .stickySidebar { position: sticky; top: 160px; } .relatedBlogs { margin-top: 10px; padding: 10px; border-radius: 5px; background-color: #ffffff; box-shadow: 0 0 30px #00000019; display: grid; grid-template-columns: 80px auto; gap: 10px; } .relatedBlogImg { aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; } .relatedBlogImg img { width: 100%; height: 100%; object-fit: cover; } .relatedBlogTitle { font-size: 14px; color: #000000; } .dateRelated { font-size: 12px; color: #000000aa; } .blur { margin-top: 5px; filter: blur(4px); min-height: 500px; overflow: hidden; } .formSec { width: 90%; max-width: 400px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 10px; overflow: hidden; background-color: var(--themeBg2); box-shadow: 0px 0px 10px 5px #ccc; } .formHeading { font-size: 18px; line-height: 28px; color: var(--headingColor1); font-weight: 600; } .input { padding: 10px 12px; background-color: var(--themeBg2); border: 1px solid var(--themeBg1); font-size: 14px; margin-bottom: 10px; width: -webkit-fill-available; outline: none; border-radius: 5px; transition: 0.3s; } .input:focus { border: 1px solid var(--themeColor1); } .formConGrid { grid-template-columns: 80px 1fr; } .btn { width: 100%; padding: 10px 12px; background-color: var(--btnColor); color: var(--btnTextColor); font-size: 14px; border: none; border-radius: 5px; cursor: pointer; transition: 0.3s; } .btn:hover { background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } .label { font-size: 13px; line-height: 24px; color: var(--headingColor1); font-weight: 600; } .red { color: red; } .inputSec { margin: 30px 0px; } .memberBtn { padding: 10px 15px; background-color: var(--btnColor); color: var(--btnTextColor); font-weight: 500; border-radius: 5px; border: none; margin-top: 30px; cursor: pointer; transition: 0.3s; } .memberBtn:hover{ background-color: var(--btnHoverColor); color: var(--btnHoverTextColor); } @media only screen and (max-width: 900px) { .blogGrid { grid-template-columns: 1fr; } } .formSec{ background-color: #111B2D; } .input{ color: #fff; } .blogFormHead{ color:#000000; } .blogV2{ padding-top: 150px } @media only screen and (max-width: 900px){ .blogV2{ padding: 10px; } } }.Blog_Page{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }