body{background-color:  #f5f5f7 margin: 0px; padding: 0px; width: 100%; height: 100%; font-family: 'Nunito', sans-serif; font-weight:normal; font-size: 14px; }
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,400;1,600&display=swap');

h1,h2,h3,h4,h5{font-family: 'Roboto Slab', serif;position: relative; margin-bottom: 20px;}
p, a{font-family: 'Nunito', sans-serif;}
a, a img { outline:none; border:none; text-decoration: none;}

h1::before, h2::before, h3::before {    content: ""; right: 0; margin: auto;    background: #ffcc29;    height: 3px;
    width: 70px;    position: absolute;    bottom: -15px;    left: 0;}
.font-16{font-size: 16px}
.learnmore{margin-top: 20px; display: block;}
.btn-info{background-color: #ffcc29; border: none;}


/*-----------------Top CSS Start here--------------------------------------*/
.top{padding:0px}
.top .header-top-area{background:linear-gradient(to right, #0052b0 ,#b340b3); padding-top: 10px; padding-bottom: 10px;}
.top .header-top-area .header-left{}
.top .header-top-area .header-left ul{padding: 0; display: flex; list-style: none; margin: 6px 0 }
.top .header-top-area .header-left ul li{ color: #fff;margin: 0 10px}
.top .header-top-area .header-left ul li a{ color: #fff; opacity: .8 }


.top .header-top-item .header-right { float: right; }
.top .header-top-item .header-right ul { display: flex;margin: 0 ; list-style: none;}
.top .header-top-item .header-right ul li { margin: 0 4px; }
.top .header-top-item .header-right ul li a {color: #fff;display: block; opacity: .8 ;width: 30px; height: 30px; text-align: center;line-height: 30px; border-radius: 50%; border: 1px solid #fff}

/*-----------------nav CSS Start here--------------------------------------*/
.side-nav a{color: #fff}
/*-----------------Slider CSS Start here--------------------------------------*/
.carousel-caption{top:30%; background-color:rgb(0, 0 , 0 , .6); border-radius: 20px; bottom: auto; padding:50px;
margin: auto; width: 40%}
.carousel-inner h5{font-size: 36px;}


/*-----------------welcome CSS Start here--------------------------------------*/
.welcome{margin-top:120px; padding:40px 0; }
.welcome .left{background: url(../image/welcome-bg.png);background-size: cover; background-repeat: no-repeat;    background-position: top center;}
.welcome h2{font-size:40px;margin-bottom: 10px; color:#2d2f32; text-align: center;animation:spgroup 1s infinite; }
@keyframes spgroup{
	0%{ color:#1f4fab  }
	25%{ color:#52259C }
	50%{ color:#1f4fab  }
	100%{ color:#52259C  }
}
.welcome h2::before{display: none;}
.welcome h3::before{display: none;}
.welcome h3{font-size:62px; text-transform: uppercase; color:#3c4193; text-align: center; font-weight: 600; letter-spacing: -3px;}
.welcome h4{font-size: 18px; color:#2d2f32; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 20px; text-align: center; margin-bottom:80px;}
.welcome p{font-size: 16px; }
.welcome .feature_part_text_iner { background:linear-gradient(to right, #0052b0 ,#b340b3);    border-radius:20px; height: 210px;  border-top-right-radius: 50px;    border-top-right-radius: 0;       text-align: center;
    padding: 34px 27px 31px;    -webkit-transition: .5s;	transition: .5s;}
.welcome h5{font-weight: bold; font-size:30px; color: #fff }
.welcome .welp{color: #fff}
/*-----------------home services CSS Start here--------------------------------------*/
.homeservices{ background-color: #ffcc29; padding: 50px 0 }
.homeservices .card-title{ color: #222 }
.homeservices .card-text{ color: #444 }

/*-----------------home services CSS Start here--------------------------------------*/
.moreservices{padding: 50px 20px; background: #3c4193}
.moreservices .box{padding: 30px; background: #ccc;}
.moreservices .card-title{ color: #222}
.moreservices .card-text{ color: #444}
.moreservices h2{text-align: center;margin: 0; padding: 0}
.moreservices h3{text-align: center; margin: 0; padding: 0; }
.moreservices h3::before{display: none;}
.moreservices p{text-align: center;}
.moreservices a{text-align: center;}

.homeastrology{background: url(../image/astrology-bg.jpg) center!important ; padding: 50px 0}
.homeastrology h2{text-align: center; color: #fff}

#client{padding:70px 0 100px 0}
.c-no { }
.counter-Txt {text-align: center;font-size: 20px;    margin-top: 20px;    background-color: #eee;    padding: 20px;}
.counter-Txt span { display: block;    font-size: 36px;}
.astrovastu{padding: 50px}
.astrovastu h4{}

/*-----------------form CSS Start here--------------------------------------*/
.inq{padding: 100px 0}
.form_box {display: inline-block; width: 100%;margin-top: 15px;}
.form-group { margin-bottom: 1rem;}
.input_field {    width: 100%;    padding: 5px 15px;    border: solid 1px #c7c7c7;    position: relative;    border-radius: 5px;}
.input_field label {    position: absolute;    top: -13px;    left: 15px;    background: #fff;
    margin-bottom: 0;    padding: 0px 5px;    font-size: 14px;    color: #2b3034;}
.input_field input, .input_field select, .input_field textarea { background-color: #fff;outline: none;    padding:8px 5px;
    width: 100%;    font-size: 14px;    border: none;    color: #2b3034;}

/*-----------------clientsay CSS Start here--------------------------------------*/

.clientsay{padding: 50px 0}
.clientsay .owl-dots{display: none;}
.clientsay h2{ text-align: center;margin-bottom: 60px;}
.clientsay .tem{}
.clientsay .h5{}
.clientsay .star a{ color: #ff6022; }
.clientsay .owl-nav { text-align: center; }
.clientsay .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
  width:30px; height: 30px; background-color: #d9d9d9; border-radius: 50%; margin:10px;
}
.clientsay .owl-carousel .owl-nav button.owl-prev{ width:30px; height: 30px; background-color:#d9d9d9; border-radius: 50%; margin:10px;

}



.con{background-image: url("image/3d-abstract-background-flowing-curves-scaled.jpg");
  background-position:
bottom left;
  background-repeat: no-repeat;
  background-size: cover;}

/*-----------------footer CSS Start here--------------------------------------*/
footer{background-color: #232220;padding: 4rem;}
footer .links{}
footer .social{display: flex;}
footer .social {}
footer .social li a{ padding:0 6px!important; display: block; }
footer .links .heading{font-weight: bold; }
footer .links ul{ list-style: none; }
footer .links ul li{}
footer .links ul li a { padding: 5px 0;   color: #ccc; display: block;}
footer .links ul li a:hover{color: #ffcc29}
footer .links ul li h5{font-size: 18px; color: #fff; margin-bottom: 10px;}

.copyright {padding: 10px 0px 0; background-color: #111;}
.copyright p {    color: #c7cace !important;    text-align: left !important;    line-height: 22px;    opacity: .6;}
.whatsapp {width: 50px;   height: 50px;right: 30px;bottom: 90px; background: #25d366;    position: fixed;    text-align: center;
    color: #ffffff;    cursor: pointer;    border-radius: 50%;    z-index: 70;    display: inline-block;    line-height:50px;    font-size: 28px;}
#back-to-top.show { opacity: 1;}
#back-to-top { position: fixed;      bottom: 40px;      right: 40px;      z-index: 9999;      width: 32px;
      height: 32px;      text-align: center;      line-height: 30px;      background: #f5f5f5;
      color: #444; cursor: pointer;      border: 0;      border-radius: 2px;      text-decoration: none;      transition: opacity 0.2s ease-out;      opacity: 0;
      }




.page-title-area {
    background-image: url(../image/cntact-vasuvani.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height: 280px;
    background-attachment: fixed;
}
.page-title-area::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #07092b;
    opacity: 0.8;
}
.d-table-cell {
    vertical-align: middle;
}
.page-title-area .title-item {
    text-align: center;
    position: relative;
    margin-top: 65px;
}
.page-title-area .title-item h2 {
    color: #fff;
    font-weight: 500;
    font-size: 35px;
    margin-bottom: 10px;
   
}
.page-title-area .title-item ul {
    margin: 0;
    padding: 0;
}
.page-title-area .title-item ul li {
    list-style-type: none;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    font-size: 16px;
}
.page-title-area .title-item ul li a {
    display: inline-block;
    color: #fff;
}
.page-title-area .title-item {
    text-align: center;
}
.officeform {
    padding:0 200px 30px 200px;
    text-align: center;
}
.ttt{position: absolute; }
.officeform .con-box { background: #eee; min-height:120px;border-radius:10px; margin-top: 45px;position: relative;}
.officeform .con-box .icon {position: absolute;left: 0;right: 0;
    width: 50px; line-height:45px; font-size: 18px; color: #a8a8a8;   height:50px;border-radius: 50%; margin: 0 auto;  border: 3px solid #eee;    display: inline-block;
    background-color: #fff;    margin-top: -28px;}
.officeform .con-box span{ font-style: 20px}
.officeform .con-box .socialmdedia{margin-top:10px}
.officeform .con-box .socialmdedia ul{padding: 0}
.d-table {
    width: 100%;
    height: 100%;
}
.officeform .con-box .socialmdedia ul li{display: inline-block; margin-left: 0px;}
.officeform .con-box .socialmdedia ul li a {}
.officeform .con-box .socialmdedia ul li a i {font-size: 16px;}
.officeform .con-box .socialmdedia .socialicons{    background-color: #fff;
    display: inline-block;    width:30px;    font-size: 1.125rem;    height:30px;    line-height: 30px;
      text-align: center;    border-radius: 50px;    transition: all 0.4s ease;
}
.formcontact{box-shadow:0 10px 20px rgba(0,0,0,0.1),0 10px 30px rgba(50,50,93,0.1) ; padding: 50px; width:60%; margin:30px auto;}

/*-----------------residentialvastu CSS Start here--------------------------------------*/
.residentialvastu{background: url(../image/vastu-for-farm-house.jpg)!important;background-position: center!important; padding: 50px; }
.for{background: #fff; padding:15px 40px 30px;}
.for h2{font-size: 24px}
.for h2::before{background: none}
.home{margin: 50px 0}
.home .card{margin:15px 0}

/*-----------------Astrology CSS Start here--------------------------------------*/
.astrology{text-align: left;background: url(../image/astrology-backgroundg.jpg); padding:80px;}
.astrology h1{color: #fff; text-align: left;  margin-top: 50px}
.astrology h1::before{margin:unset; text-align: left;}
.astrology span{color: #fff; text-align: left; font-size: 18px}
.astrology .ims{width:400px; margin-left: 40px;animation: rounded 50s infinite linear;}
@-webkit-keyframes rounded {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rounded {
    100% {
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rounded {
    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
    }
}
.typing-demo {
  width: 24ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange }
}
.astservices{padding: 50px 0 ; text-align: center; }
.astservices h2{text-align: center;color: #ffcc29 }
.astservices .pear{color: #bcbec9; padding:0  50px}
.astservices h5{color: #e9e7ef; margin-top: 20px; margin-bottom: 0}
.astservices p{color: #bcbec9; margin-top:0px; padding:5px;}
.astservices .owl-nav{margin-top: 20px;}
.astservices .owl-dots{display: none;}
.astservices .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot{
    background: #ccc!important; 
}
.astservices  .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    width: 30px;
    height: 30px;
    background-color: #7c8189 ;
    border-radius: 50%;
    margin: 10px;
}
.msa{padding: 20px 0 30px 0}
.msa .counter-Txt{background: #0f172f; color: #bcbec9}
.msa .counter-Txt i{color:  #ccc}
.msa .counter-Txt span{color:#e9e7ef}

.courses{padding: 50px 0; margin: 20px; background: #fff; border-radius: 5px;}

.commercial{text-align: left;background: url(../image/vastu-for-commercial.jpg)!important; padding:80px;}
.phone-call {
  width: 60px;
  height: 60px;
  left: 30px;
  bottom:85px;
  background: #000;
  position: fixed;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  z-index: 70;
  display: inline-block;
  line-height: 62px;
  opacity: .9;
}
.video{border-radius: 10px;}

.meditation{text-align: center;}
.meditation h1{text-align: center!important;}
.meditation span{text-align: center!important;}
.meditation h1::before{margin: auto!important;}
.up_down{width: 100%; margin:40px 0 0  auto;}
.up_down .content {font-size: 35px;line-height:50px;color: #fff; }
.up_down .content .visible {font-weight: 600;overflow: hidden; height: 50px;padding: 0 50px; display:inline-block; padding-left:60px}
.up_down .content p {display: inline;float: left;margin: 0;}
.up_down .content ul {margin-top:0; display: inline-block; padding: 0px;  text-align: left;list-style: none;animation-name: change;animation-duration: 6s;animation-iteration-count: infinite;}
.up_down .content ul li {line-height: 50px;margin: 0;  font-size:35px; padding-top:0px; padding-left: 10px;}
.up_down { text-align: center;}
.up_down h2 {font-size: 25px; color: #FFF; }
@keyframes change {
  0%, 14%, 100% {   
            transform: translateY(0);
  }
  22%,36% {   
            transform: translateY(-33%);
  }
  50%,62% {   
            transform: translateY(-66%);
  }
  74%,86% {   
            transform: 1(-33%);
  } 
} 
@-moz-keyframes change {
  0%, 14%, 100% {   
            -moz-transform: translateY(0);
  }
  22%,36% {   
            -moz-transform: translateY(-33%);
  }
  50%,62% {   
            -moz-transform: translateY(-66%);
  }
  74%,86% {   
            -moz-transform: translateY(-33%);
  } 
} 
/*---
/*-----------------max-width:480px CSS Start here--------------------------------------*/
@media screen and (max-width:480px){
.welcome{margin: 0}
.welcome h2{font-size:36px;}
.welcome h3{font-size:36px;}
.welcome .feature_part_text_iner{height: auto; margin-bottom: 10px;}
.inq{padding: 30px 0; }
.form_box{margin-top: 45px;}
footer{padding:40px 0}
.astrology{padding: 20px}
.form_box{margin-top: 12px;}
.for{padding: 20px; margin-top: 15px}
.msa .counter-Txt{margin: 5px!important;}
.astrology .ims{width: 280px; margin-top:20px;}
.officeform{padding: 20px;}
.formcontact{width: 90%; padding: 20px}
.carousel-caption{width: 80%; right: 10%; left:10%; padding: 5px;}
.carousel-inner h5{font-size: 26px; margin-bottom: 5px;}
.mean-container .mean-bar{background: #000}
.mean-container a.meanmenu-reveal span{background: #e0e0e0;}
.typing-demo {font-size: 25px}
.dm-none{display: none;}
.up_down .content .visible{padding: 0}
.up_down .content ul li{font-size: 24px;}
.up_down .content p{font-size: 24px;}
.meditation{padding:20px 0}
.video{width:90%}
    }