.Blog_Card{ .blogTextSec{ padding: 20px 30px 30px; position: relative; border-bottom: 1px solid #eee9db; } .blogCard{ background-color: var(--themeColor2); 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 4px 7px 0px rgba(0, 0, 0, 0.1); } .cardHeading{ font-size: 25px; font-weight: 600; line-height: 35px; margin: 10px 0px; color: var(--headingColor1); transition: 0.3s; } .cardSubPara{ color: var(--paragraphColorBlack); } .btnSec{ padding: 15px 27px; } .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); } .blogCard:hover{ box-shadow: 0px 0px 10px 10px #e3e3e3; } }.Blog_Card{ @media only screen and (max-width: 900px) { background-attachment:scroll; } }