.astrology {
    scroll-behavior: smooth;
}
.astrology .container {
    width:1000px;
}
.astrology .hero {
    padding:4em 2em;
    background: url("../img/astrology/hero-bg.jpg") center bottom no-repeat;
    background-size:cover;
}
.astrology .hero .hero__title {
    margin-bottom:40px;
}
.astrology .hero h1 {
    color:#F8B37B;
    font-family:'Gilroy-ExtraBold',sans-serif;
    text-align:center;
    margin:0 auto;
    line-height:1;
    font-size:80px;
}
.astrology .hero h1 span {
    display:block;
    font-family:'Gilroy-Regular',sans-serif;
    font-size:24px;
    color: #D5565A;
    font-weight:400;
}
.astrology .hero img {
    transition:.3s ease all;
    max-height: 100px;
    display: block;
    margin: 10px auto;
}
.astrology .hero .hero__product h2 {
    color:#D5565A;
    text-align:center;
    font-size:18px;
    font-family: 'Gilroy-Regular',sans-serif;
    margin:0 auto 20px;
    font-weight:400;
    text-transform:capitalize;
}
.astrology .hero img:hover {
    transform:scale(1.05) rotate(0deg);
    animation:none;
}
.astrology .hero .rotate-right {
    animation: rotateRight 5s linear infinite;
}
.astrology .hero .rotate-left {
     animation: rotateLeft 5s linear infinite;
 }
.astrology .content {
    padding:2em;
    background: url("../img/astrology/body-bg.png") center top no-repeat;
    background-size:100%;
}
.astrology .content .content__card {
    position:relative;
    padding-bottom:75px;
    margin-bottom:80px;
}
.astrology .content .content__card img {
    transition:.3s ease all;
}
.astrology .content .content__card img:hover {
    transform:scale(1.05);
}
.astrology .content__card a.button {
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius:10px;
    width:100%;
    max-width:100%;
    font-family:'Gilroy-ExtraBold',sans-serif;
    transition:.3s ease all;
}
.astrology .content__card a.button:hover {
    background:#4d7cbe;
    transform:scale(1);
}
.astrology .content__card:nth-child(even) a.button {
    position: absolute;
    bottom: 0;
    left: 60px;
}
.astrology .content .content__card h2 {
    font-family:'Gilroy-ExtraBold',sans-serif;
    font-size:32px;
    text-transform:capitalize;
    color:#4d7cbe;
    margin:20px auto 5px;
    line-height:1;
}
.astrology .content .content__card h3 {
    font-family:'Gilroy-Regular',sans-serif;
    font-size:20px;
    color:#4d7cbe;
    font-weight:400;
    text-transform:capitalize;
    margin:0 auto 10px;
}
.astrology .content .content__card h4 {
    font-family:'Gilroy-ExtraBold',sans-serif;
    color:#103559;
    font-size:14px;
    text-transform:uppercase;
    margin:12px auto;
}
.astrology .content .content__card p {
    font-family:'Gilroy-Regular',sans-serif;
    color:#103559;
    font-size:14px;
    font-weight:400;
    line-height:24px;
}
@media (min-width:992px) {
    .astrology .content .content__card:nth-child( even ) {
        padding-left: 60px;
    }
    .astrology .content .content__card:nth-child( odd ) {
        padding-right: 60px;
    }
    .astrology .content .content__card a.button {
        width:calc(100% - 60px);
        max-width:calc(100% - 60px);
    }
}
@media (max-width:991px) and (min-width:768px) {
    .astrology .content .content__card:nth-child( even ) {
        padding-left: 20px;
    }
    .astrology .content .content__card:nth-child( odd ) {
        padding-right: 20px;
    }
    .astrology .content .content__card a.button {
        width:calc(100% - 20px);
        max-width:calc(100% - 20px);
        font-size:14px;
    }
    .astrology .content__card:nth-child(even) a.button {
        left:20px;
    }
}
@media (max-width:767px) {
    .astrology .hero .hero__product img {
        display: none;
    }
    .astrology .hero .hero__product {
        width:50%;
        max-width:50%;
    }
    .astrology .hero .hero__product a h2 {
        transition:.3s ease all;
    }
    .astrology .hero .hero__product a:hover h2 {
        color:#4d7cbe;
    }
    .astrology .content__card:nth-child(even) a.button {
        left:0;
    }
    .astrology .content__card a.button {
        position:unset !important;
        display:block;
        margin-top:20px;
    }
    .astrology .content .content__card {
        padding-bottom:10px;
        margin-bottom:60px;
    }
}
@keyframes rotateRight {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(3deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(-3deg);
    }
}
@keyframes rotateLeft {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-3deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(3deg);
    }
}
@keyframes scale {
    0%{
        transform: scale(1);
    }
    100%{
        transform:scale(1.05);
    }
}
@keyframes scaleOut {
    0%{
        transform: scale(1.05);
    }
    100%{
        transform:scale(1);
    }
}