/* Responsive css start here */
@media only screen and (max-width:1366px){
    body{
        font-size: 16px;
    }
    .banner{
        height: 650px;
    }
    .banner h1 {
        font-size: 60px;
    }
    /*.social_link ul li a{
        width: 60px;
        height: 60px;
        line-height: 60px;
    }*/
    .cstm-btn, .cstm-btn-2{
        padding: 7px 25px;
        font-size: 20px;
    }
    .img_back_shadow{
        top: -9%;
    }
   
}
@media only screen and (max-width:1280px){
     .cstm-btn, .cstm-btn-2{
        font-size: 18px;
    }
    .banner h1 {
        font-size: 60px;
    }
}
@media only screen and (max-width:1180px){
    .services .card .card-tittle h3{
        font-size: 20px;
    }
   
    .ai_astrology .astro_img{
        border-radius: 200px 0px 0px 0px;
    }
    .what_astrology::before{
        width: 200px;
        height: 200px;
    }
   /* .social_link ul li a{
        width: 50px;
        height: 50px;
        line-height: 50px;
    }*/
    .social_link ul li a svg{
        width: 25px;
    }
    .banner h1 {
        font-size: 58px;
    }
    .banner{
        height: 600px;
    }
    .why_astrology:after{
        width: 90px;
    }
    .astro_future .astro_cicle{
        right:50px;
    }
}
@media only screen and (max-width:1024px){
    .cstm-btn, .cstm-btn-2{
        font-size: 18px;
    }
    .user-access button img {
            width: 25px;
        }
    .banner h1 {
        font-size: 54px;
    }
    .banner{
        height: 550px;
    }
    .section_ttl h2 {
        font-size: 38px;
    }
    .services .card .card-tittle h3{
        font-size: 20px;
    }
    .ai_astrology .astro_img {
        border-radius: 200px 0px 0px 0px;
    }
    .ai_astrology .astro_over_img {
        width: 150px;
        height: 260px;
    }
    .why_astrology:after{
        width: 100px;
        top:-94px;
    }
    .ai_astrology .astro_cicle{
        width: 300px;
        height: 300px;
    }
    .astro_future .astro_img{
        width: 78%;
    }
    .astro_future .astro_cicle{
        bottom: -140px;
        right: 10px;
        width: 70%;
    }
    .what_astrology::before{
        width: 150px;
        height: 150px;
    }
    .img_back_shadow{
        left: 13%;
    }
   
}
@media only screen and (max-width:990px){
        .banner h1 {
        font-size: 39px;
    }
        .ai_astrology .astro_img {
        border-radius: 150px 0px 0px 0px;
    }
}
@media only screen and (max-width:767px){
    .site-logo img{
        height: 55px;
    }
    .cstm-btn, .cstm-btn-2{
        font-size: 12px;
    }
    .user-access button img {
        width: 22px;
    }
    .banner h1 {
    font-size: 39px;
    }
    .banner{
        height: 495px;
    }
    .section_ttl h2{
        font-size: 36px;
    }
    .ai_astrology .astro_img{
        border-radius: 150px 0px 0px 0px;
    }
    .ai_astrology .astro_over_img{
        width: 140px;
        height: 241px;
        right: 0px;
    }
    .why_astrology:after{
        width: 70px;
        height: 70px;
        top: -40px;
        right: 30px;
    }
    .ai_astrology .astro_cicle {
        width: 250px;
        height: 250px;
    }
    .astro_future .astro_img{
        width: 90%;
    }
    .astro_future .astro_over_img{
        width: 88px;
        top: -40px;
    }
    .astro_future .astro_cicle{
        bottom: -70px;
        right: 35px;
    }
    .what_astrology::before{
        top: inherit;
        left: inherit;
        bottom: 0px;
        right: 0px;
    }
    .why_astrology:before {
        width: 90px;
        height: 90px;
    }
    .astro_faq_img{
        width: 266px;
        height: 305px;
    }
    .img_back_shadow{
        width: 266px;
        height: 305px;
        left: 9%;
    }
     .mobile_user {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        padding: 13px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        background: linear-gradient(to left,#7545db, #7ab5f3 );
    }
    .user-access span{
        display: none;
    }
}

@media only screen and (max-width:475px){

    body{
        font-size: 16px;
    }
    /* .user-access .cstm-btn , 
    .user-access .cstm-btn-2{
        width: 48%;

    }  */
    .cstm-btn, .cstm-btn-2{
        padding: 8px 8px;
        font-size: 16px;
    }
    .user-access button img{
        width: 20px;
    }
    .site-logo img{
        height: 55px;
    }
    .banner{
        height: 450px;
    }
    .banner h1{
        font-size: 24px;
        font-weight: 600;
    }
    .banner p{
        padding: 5px 2px;
    }
    .services .card{
        height: 180px;

    }
    .services .card .card-image{
        height: 100px;
        width: 100px;
        line-height: 100px;
        padding: 20px;
    }
    .services .card .card-image img{
        width: 100%;
    }
    .services .card .card-tittle h3{
        font-size: 15px;
    }
    .section_ttl h2{
        font-size: 36px;
    }
    .section_ttl img{
        max-width: 200px;
    }
    .ai_astrology .astro_img{
        border-radius: 150px 0px 0px 0px;

    }
    .why_astrology:after{
        width: 70px;
        height: 70px;
        top: -50px;
    }
    .ai_astrology .astro_over_img{
        width: 120px;
        height: 200px;
        right: 15px;
        bottom: -45px;
    }
    .why_astrology:before{
        width: 70px;
        height: 70px;
    }
    .what_astrology::before{
        /* width: 150px;
        height: 150px;
        top: 50px;
        left: inherit;
        right: -60px; */
        display: none;
    }
    .astro_future .astro_cicle {
        right: 25px;
        width: 200px;
        bottom: -70px;

    }
    .astro_future .astro_over_img{
        width: 80px;
        top: -35px;
    }
    .astro_blog:before{
        top: 6%;
        left: 0px;
    }
    .astro_blog:after{
        width: 120px;
        height: 120px;
        bottom: -3%;
        right: 10px;
        z-index: -9;
    }
    .img_back_shadow{
        left: 4%;
    }
    /* .social_link ul li a{
        margin: 0px 7px;
    } */
    .footer{
        background-position: left;
    }
   

}