@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');    
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap');
.main-container {
    float: left;
    width: 100%;
}
.header {
    float: left;
    width: 100%;
    background-color: #01282b;
}

.header-left {
    float: left;
    width: 100%;
}
.header-list {
    float: left;
    width: 100%;
    color: white;
}
.header-list a{
    color: white;
}
.header-list ul {
    list-style: none;
    display: inline-flex;
    font-size: 20px;
}
.header i.fa.fa-whatsapp {
    padding-left: 30px;
}
.header-right {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: white;
    font-weight: bold;
    /*font-family: 'Josefin Sans', sans-serif;*/
}
.header-float {
    float: left;
    width: 100%;
    font-size: 20px;
    background-color: #01282b;
    color: white;

font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
}
.header-img {
    float: left;
    width: 100%;
    padding: 10px;
    background-image: url(../images/fdffd.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.header-left {
    float: left;
    width: 100%;
}
.header-left img{
    float: left;
}
.icon-links {
    float: left;
    width: 100%;
}
.text-center {
    text-align: left!important;
}
.icon-links i {
    background: #f7b300;
    width: 40px;
    height: 40px;
    font-size: 28px;
    text-align: center;
    padding: 6px 0;
    border-radius: 2px;
}
.icon-links p a {
    font-size: 17px;
    color: #323232;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    top: -5px;
}
.icon-links p {
    margin: 0;
    font-size: 17px;
}
.specialist {
    font-size: 16px;
    color: #fff;
    background: #df0303;
    padding: 2px 7px;
    margin: 0;
    border-radius: 4px;
    text-align: center;
    float: left;
    width: 100%;
}

.icon-links p {
    margin: 0;
    font-size: 17px;
}
.header-left2 img{
    float: left;
    width: 100%;
}
.header-left2{
    float: left;
    width: 100%;
}
.banner_container {
    float: left;
    width: 100%;
}
.banner_container img{
    float: left;
    width: 100%;
}
.text4 {
    float: left;
    width: 100%;
    color: black;
    background: #f7b100;
    font-size: 20px;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
}
.about-astrologer {
    background:url(../images/best-bg.gif);
    padding: 50px 0px;
    float: left;
    width: 100%;
}
.abt-title {
    float: left;
    width: 100%;
    text-align: justify;
    font-size: 25px;
    color: #fff;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
}
.abt-header {
    float: left;
    width: 100%;
    text-align: justify;
    font-size: 35px;
    color: #f7b100;
    font-family: 'Reggae One', cursive;
}
.abt-desc {
    float: left;
    width: 100%;
    text-align: justify;
    font-size: 22px;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
    color: #fff;
}
.abt-desc p {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    font-family: 'Josefin Sans', sans-serif;
    color: #f7b100;
}

.about-right {
    float: left;
    width: 100%;
}
.abt-img1 {
    float: left;
    width: 100%;
}
.about-right img{
    float: left;
    width: 100%;
    margin-bottom: 20px;
  
}
.best-services {
    float: left;
    width: 100%;
    padding: 50px 0px;
    background-color: #01282b;
}
.best-header {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 45px;
    color: #f7b100;
    font-family: 'Reggae One', cursive;
}
.banner3 {
    float: left;
    width: 100%;
}
.banner3 img {
    float: left;
    width: 100%;
}
.best-header::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    background: #f7b100;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    float: none;
    margin: 0 auto;
    display: table;
    top: 67px;
    left: 750px;
}
.best-header::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 1px;
    float: none;
    margin: 0 auto;
    display: table;
    top: 72px;
    left: 552px;
    margin: 0 auto;
    background: #f7b100;
}
.best-title {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 25px;
    padding-top: 10px;
    color: white;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
    padding-bottom: 30px;
}
.best-border {
    float: left;
    width: 100%;
    background-color: white;
    padding: 10px;
}
.best-img {
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.best-img img{
    float: left;
    width: 100%;
}
.best-img-title {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: #01282b;
    padding: 5px 0px;
    font-family: 'Reggae One', cursive;
}
.best-desc {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 18px;
    color: black;
    font-weight: bold;
    font-family: 'Josefin Sans', sans-serif;
}
.best-call {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 5px 0px;
    background-color: #f7b100;
    color: #01282b;
    font-family: 'Reggae One', cursive;
}
.whu-us {
    float: left;
    width: 100%;
    padding: 50px 0px;
    background-color: #f7b100;
}
.why-right {
    float: left;
    width: 100%;
}
.why-right img
{
    float: left;
    width: 100%;
}
.why-header {
    float: left;
    width: 100%;
    text-align: justify;
    font-size: 45px;
    color: #01282b;
    font-family: 'Reggae One', cursive;
}
.why-title-one {
    float: left;
    width: 100%;
    text-align: justify;
    font-size: 25px;
    color: #01282b;
    font-family: 'Reggae One', cursive;
}
.wye-title-two {
    float: left;
    width: 100%;
    text-align: justify;
    font-size: 20px;
    color: black;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: bold;
    padding-bottom: 30px;
}

.why-left {
    float: left;
    width: 100%;
    background-color: black;
    padding: 20px 15px;
    margin-bottom: 25px;
}
.why-icon {
    float: left;
    width: 100%;
}
.why-icon img{
   float: none;
   margin: 0 auto;
   display: table;
   background-color: #fff;
}
.why-left:hover .why-icon img {
    -webkit-animation: mover2 0.5s infinite  alternate;
    animation: mover2 0.5s infinite  alternate;
}
   .last-row
    {
    float: left;
    width: 100%;
    }
    .cal
    {
    
    bottom: 0px;
    left: 10px;
    position: fixed;
    z-index: 1111;
    
    }
    
    .whatsaapp img {
        -webkit-animation: mover 0.5s infinite  alternate;
        animation: mover 0.5s infinite  alternate;
    }
    .cal img {
        -webkit-animation: mover 0.5s infinite  alternate;
        animation: mover 0.5s infinite  alternate;
    }
    @-webkit-keyframes mover {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
    @keyframes mover {
        0% { transform: translateY(0); }
        100% { transform: translateY(-10px); }
    }
    
    .whatsaapp
    {
    
    bottom: 0px;
    right: 16px;
    position: fixed;
    z-index: 1111;
    
    }
@keyframes mover2 {
    0% { transform:rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}
.why-desc {
    float: left;
    width: 100%;
    font-size: 30px;
    font-family: 'Reggae One', cursive;
    color: #f7b100;
}

.copyrt {
    width: 100%;
    
    float: left;  
    text-align: center;
    font-size: 16px;
    
    padding: 20px;
    color: black;
    background: white;
    }
    
    .contact-no {
        width: 178px;
        top: 100px;
        right: -142px;
        position: fixed;
        z-index: 1111;
        background-color: #ffffff;
        -webkit-transition: all 300ms, background-color 300ms;
        -moz-transition: all 300ms, background-color 300ms;
        -o-transition: all 300ms, background-color 300ms;
        transition: all 300ms, background-color 300ms;
        cursor: pointer;
        box-shadow: 0 0 5px 0 rgb(26 27 27 / 84%);
        padding: 1px;
        height: 37px;
    }
    .contact-no span i {
        background-color: #01282b;
        color: #FFFFFF;
        font-size: 18px;
        /* border-radius: 3px; */
        width: 35px;
        line-height: 35px;
        text-align: center;
        margin: 0 10px 0 0px;
    }
    
   
    .contact-no2 {
        width: 178px;
        top: 150px;
        right: -142px;
        position: fixed;
        z-index: 1111;
        background-color: #ffffff;
        -webkit-transition: all 300ms, background-color 300ms;
        -moz-transition: all 300ms, background-color 300ms;
        -o-transition: all 300ms, background-color 300ms;
        transition: all 300ms, background-color 300ms;
        cursor: pointer;
        box-shadow: 0 0 5px 0 rgb(26 27 27 / 84%);
        padding: 1px;
        height: 37px;
    }
    .contact-no2 span i {
        background-color: green;
        color: #FFFFFF;
        font-size: 18px;
        /* border-radius: 3px; */
        width: 35px;
        line-height: 35px;
        text-align: center;
        margin: 0 10px 0 0px;
    }
  
  
    .testimonial {
        float: left;
        width: 100%;
        padding: 50px 0px;
        background: #01282b;
    }
    .testi-header {
        float: left;
        width: 100%;
        text-align: center;
        font-size: 45px;
        color: #f7b100;
        font-family: 'Reggae One', cursive;
        padding-bottom: 30px;
    }
    .testi-border {
        float: left;
        width: 100%;
        border: 2px solid #f7b100;
        padding: 10px;
        background: black;
    }
    .test--img {
        float: left;
        width: 100%;
    }
    .test--img img{
        float: left;
        width: 100%;
    }
    .testi-desc {
        float: left;
        width: 100%;
        font-size: 18px;
        text-align: justify;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: bold;
        color: white;
        background: black;
    }
    .testi-name {
        float: left;
        width: 100%;
        color: #f7b100;
        font-family: 'Reggae One', cursive;
        font-size: 20px;
        text-align: center;
    }
    .other-services {
        float: left;
        width: 100%;
        padding: 50px 0px;
        background-image: url(../images/back-1.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
    }
    .other-header {
        float: left;
        width: 100%;
        text-align: center;
        font-size: 45px;
        color: #f7b100;
        font-family: 'Reggae One', cursive;
        padding-bottom: 30px;
    }
    .other-border {
        float: left;
        width: 100%;
        background-color: white;
        padding: 10px;
        margin-bottom: 30px;
    }
    .other-border p {
        margin-top: 0;
        margin-bottom: 1rem;
        text-align: center;
    }
    .other-border p a {
        padding: 8px 10px;
        background: #f7b300;
        color: #000;
        font-size: 20px;
        text-decoration: none;
        transition: 0.6s;
        position: relative;
        font-family: 'Josefin Sans', sans-serif;
        top: 10px;
        font-weight: 900;
    }
    .other-img {
        float: left;
        width: 100%;
        overflow: hidden;
        position: relative;
    }
    .other-border:hover  .other-img img{
        animation: scale 5s linear infinite;
    }
    .best-border:hover  .best-img img{
        animation: scale 5s linear infinite;
    }
    @keyframes scale {
        50% {
          -webkit-transform:scale(1.2);
          -moz-transform:scale(1.2);
          -ms-transform:scale(1.2);
          -o-transform:scale(1.2);
          transform:scale(1.2);
        }
      }
    .other-img img{
        float: left;
        width: 100%;
    }
    .other-title {
        float: left;
        width: 100%;
        text-align: center;
        font-size: 18px;
        color: #01282b;
        font-family: 'Reggae One', cursive;
        padding: 5px 0px;
    }
    .other-call {
        float: left;
        width: 100%;
        text-align: center;

       
    }
    .other-call li
    {
        list-style: none;
        display: inline;
        font-size: 30px;
    }
    .other-call i.fa.fa-whatsapp {
        padding: 0px 30px;
    }

    .other-call i.fa.fa-whatsapp:hover {
        -webkit-animation: mover4 0.5s infinite  alternate;
        animation: mover4 0.5s infinite  alternate;
    }
    @-webkit-keyframes mover4 {
        0% { transform: translatex(0); }
        100% { transform: translatex(-10px); }
    }
    .other-call i.fa.fa-phone:hover {
        -webkit-animation: mover4 0.5s infinite  alternate;
        animation: mover4 0.5s infinite  alternate;
    }
    .best-border:hover .best-call
    {
        background-color: black;
        color: white;
    }

    .footer {
        float: left;
        width: 100%;
        padding: 50px 0px;
        background: black;
    }
    .footer-border {
        float: left;
        width: 100%;
        padding: 50px 0px;
    }
    .f {
        float: left;
        width: 100%;
    }
    .f img {
        display: table;
        margin: 0 auto;
        float: none;
    }
    .footer-border img{
        float: left;
        width: 100%;
    }
    .footer-border a{
        color: #f7b100;
        font-size: 30px;
        padding: 13px 0 0 0;
        font-weight: 600;
        display: inline-block;
        text-align: center;
       font-family: 'Josefin Sans', sans-serif;
        float: left;
        width: 100%;
    }
    .ft-de {
        float: left;
        width: 100%;
        text-align: justify;
        font-size: 18px;
        color: white;
       font-family: 'Josefin Sans', sans-serif;
    }
    .footer-about {
        padding: 10px;
        float: left;
        width: 100%;
    }
    .footer-about2 {
        padding: 10px;
        float: left;
        width: 100%;
    }
    .footer-about1 {
        padding: 10px 0;
    }
    .quick-serv {
        padding: 20px 0;
        text-align: left;
    }
    .quick-serv ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .quick-serv ul li {
        color: #e0dcce;
        font-size: 18px;
        line-height: 28px;
        padding: 5px 0;
        text-transform: capitalize;
        font-weight: 400;
        font-family: 'Reggae One', cursive;
    }
    .quick-serv li i {
        color: #f7b100;
        padding: 0 5px 0 0;
    }
    .about-head {
        text-align: left;
        padding: 0;
        padding-bottom: 0px;
    }
    .about-head p {
        margin: 0;
        color: #f7b100;
        font-size: 27px;
        text-align: center;
        text-transform: capitalize;
        font-weight: 600;
        padding: 0px 0;
        font-family: 'Reggae One', cursive;
    }
    .about-head p2 {
        margin: 0;
        color: #f7b100;
        font-size: 18px;
        text-align: center;
        text-transform: capitalize;
        font-weight: 400;
        padding: 0px 0;
        font-family: 'Reggae One', cursive;
    }
    .f-top {
        float: left;
        width: 100%;
        border-bottom: 1px solid white;
    }
    .about-call {
        padding: 35px 0 0;
        text-align: center;
    }
    .about-call ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .about-call ul li {
        display: block;
        border: 1px solid #e0dcce;
        height: 62px;
        position: relative;
        font-size: 20px;
        text-align: center;
        margin-bottom: 38px;
        padding-top: 22px;
        letter-spacing: 0.5px;
        font-family: 'Reggae One', cursive;
    }
    .about-call li a {
        color: #e0dcce;
        font-size: 19px;
        text-transform: capitalize;
    }
    .about-call ul li:hover a
    {
        color: #f7b100;
    }
    .about-call ul li:hover i
    {
      transform: rotate(360deg);
    }
    .about-call li i {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background: #f7b100;
        line-height: 35px;
        text-align: center;
        color: #000000;
        font-size: 16px;
        position: absolute;
        top: -17px;
        left: 50%;
        transition: 0.4s;
        margin-left: -17px;
    }

    @media(min-width:320px) and (max-width:479px)
{
    .whats {
        display: none;
    }
    .header-list ul {
        
        font-size: 25px;
    }
    .header-left2 {
        display: none;
    }
    .header-float {
        font-size: 18px;
    }
    .text4 {
        font-size: 18px;
    }
    .abt-title {
        font-size: 18px;
        text-align: center;
    }
    .abt-header {
        font-size: 25px;
        text-align: center;
    }
    .abt-desc {
        font-size: 17px;
    }
    .best-header {
        font-size: 35px;
    }
    .best-title {
        font-size: 20px;
    }
    .best-border {
        margin-bottom: 30px;
    }
    .best-call {
        font-size: 18px;
    }
    .why-header {
        font-size: 30px;
    }
    .why-title-one {
        font-size: 20px;
    }
    .why-desc {
        font-size: 25px;
        text-align: center;
    }
    .testi-header {
        font-size: 35px;
    }
    .test--img img {
        float: left;
        width: 40%;
    }
    .testi-border {
        margin-bottom: 30px;
    }
    .other-header {
        font-size: 35px;
    }
    .services-header {
        font-size: 35px;
    }.header-left img {
        width: 100%;
        float: left;
      }
      .header-img .col-sm-8{display: none;}
.header-list {
  display: none;
}
.best-header::before {
  display: none;
}
.best-header::after {
  display: none;
}
}
@media(min-width:480px) and (max-width:639px)
{
    
    .header-left img {
        width: 100%;
        float: left;
      }
      .header-img .col-sm-8{display: none;}
    .header-left2 {
        display: none;
    }
    .header-float {
        font-size: 18px;
    }
    .text4 {
        font-size: 18px;
    }
    .abt-title {
        font-size: 18px;
        text-align: center;
    }
    .abt-header {
        font-size: 25px;
        text-align: center;
    }
    .abt-desc {
        font-size: 17px;
    }
    .best-header {
        font-size: 35px;
    }
    .best-title {
        font-size: 20px;
    }
    .best-border {
        margin-bottom: 30px;
    }
    .best-call {
        font-size: 18px;
    }
    .why-header {
        font-size: 30px;
    }
    .why-title-one {
        font-size: 20px;
    }
    .why-desc {
        font-size: 25px;
        text-align: center;
    }
    .testi-header {
        font-size: 35px;
    }
    .test--img img {
        float: left;
        width: 40%;
    }
    .testi-border {
        margin-bottom: 30px;
    }
    .other-header {
        font-size: 35px;
    }
    .services-header {
        font-size: 35px;
    }
        
.header-list {
  display: none;
}
.best-header::before {
  display: none;
}
.best-header::after {
  display: none;
}
}
@media(min-width:640px) and (max-width:767px){
    .header-left {
        text-align: center;
    }
    .header-left2 {
        display: none;
    }
    .best-border {
        margin-bottom: 30px;
    }
    .testi-border
    {
        margin-bottom: 30px;
    }
}
@media(min-width:768px) and (max-width:991px){
    .header-left {
        text-align: center;
    }
    .header-left2 {
        display: none;
    }
    .best-border {
        margin-bottom: 30px;
    }
    .testi-border
    {
        margin-bottom: 30px;
    }
    .header .col-sm-5
    {
        width: 100%;
        text-align: center;
    }
    .header .col-sm-7
    {
        width: 100%;
        text-align: center;
    }
    .header-img .col-sm-4
    {
        width: 100%;
      
    }
    .header-img img{width: 100%;};
    .best-header::before {
       
        top: 67px;
        left: 450px;
    }
    .header-img .col-sm-8
    {
        width: 100%;
        text-align: center;
        display: none;
      
    }
  
    .best-header::after {
      
        top: 72px;
        left: 252px;
       
    }
    .best-services .col-sm-3
    {
        width: 50%;
    }
    .whu-us .col-sm-8
    {
        width: 100%;
    }
    .whu-us .col-sm-4
    {
        width: 50%;
    }
    .testimonial .col-sm-4
    {
        width: 50%;
    }
    .other-services .col-sm-4
    {
        width: 50%;
    }
    .services .col-sm-4
    {
        width: 50%;
        margin-bottom: 30px;
    }
    .footer .col-sm-4{width: 50%;}
    .about-astrologer .col-sm-8{width: 100%;}
    .about-astrologer .col-sm-4{width: 100%;}
}
@media(min-width:992px) and (max-width:1200px){
    .best-border {
        margin-bottom: 30px;
    }
    .testi-border
    {
        margin-bottom: 30px;
    }
    
    .best-header::before {
       
        top: 67px;
        left: 450px;
    }
    .best-header::after {
      
        top: 72px;
        left: 352px;
       
    }
    .best-services .col-sm-3
    {
        width: 50%;
    }
   
    .testimonial .col-sm-4
    {
        width: 50%;
    }
    .other-services .col-sm-3
    {
        width: 50%;
    }
}
@media(min-width:1201px) and (max-width:1650px){
}