.Blog_Card{ .blogTextSec { padding: 20px 20px 20px; position: relative; border-bottom: 1px solid #eee9db; } .blogImgSec { line-height: 0px; aspect-ratio: 2/1.5; } .blogCard { background-color: var(--themeBg2); border-radius: 20px; overflow: hidden; transition: 0.3s; border: 1px solid #eee9db; } .dateSec { position: absolute; top: -15px; left: 17px; width: fit-content; font-size: 15px; line-height: 25px; background-color: var(--themeColor1); color: var(--paragraphColorWhite); padding: 0px 30px; border-radius: 20px; box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.1); } .cardHeading { font-size: 20px; font-weight: 600; line-height: 30px; margin: 5px 0px; color: var(--headingColor1); transition: 0.3s; } .cardSubPara { font-size: 14px; line-height: 24px; font-weight: 400; color: var(--paragraphColorBlack); } .btnSec { padding: 10px 20px; } .btnSec p { font-weight: 500; transition: 0.3s; } .arrow { width: 40px; height: 40px; background-color: var(--themeColor1); border-radius: 50%; transform: rotate(-20deg); transition: 0.3s; } .arrow i { color: var(--paragraphColorWhite); } .blogCard:hover .btnSec p { letter-spacing: 1px; } .blogCard:hover .arrow { transform: rotate(0deg); } .blogCard:hover .cardHeading { color: var(--themeColor1); } }.Blog_Card{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }