* {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  background: transparent;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  outline: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
blockquote {
  quotes: none;
}
blockquote:before,
blockquote:after {
  content: "";
  content: none;
}
del {
  text-decoration: line-through;
}
header,
section,
article,
aside,
nav,
footer,
address {
  display: block;
}
body {
  font-family: "open_sansregular", Arial, Helvetica, sans-serif;
  font-size: 17px;
  color: #333;
  overflow-x: hidden;
  min-width: 320px;
  padding: 20px 50px;
}
input,
textarea,
select {
  font-family: "open_sansregular", Arial, Helvetica, sans-serif;
}
br.clear{
	clear: both;
}
html {
  scroll-behavior: smooth;
}
@font-face {
  font-family: "montserratregular";
  src: url("../fonts/montserrat-regular-webfont.woff2") format("woff2"),
    url("../fonts/montserrat-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "cormorant_garamondregular";
  src: url("../fonts/cormorantgaramond-regular-webfont.woff2") format("woff2"),
    url("../fonts/cormorantgaramond-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "cormorant_garamondbold_italic";
  src: url("../fonts/cormorantgaramond-bolditalic-webfont.woff2")
      format("woff2"),
    url("../fonts/cormorantgaramond-bolditalic-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "cormorant_garamondbold";
  src: url("../fonts/cormorantgaramond-bold-webfont.woff2") format("woff2"),
    url("../fonts/ormorantgaramond-bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sanslight";
  src: url("../fonts/opensans-light-webfont.woff2") format("woff2"),
    url("../fonts/opensans-light-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sansregular";
  src: url("../fonts/opensans-regular-webfont.woff2") format("woff2"),
    url("../fonts/opensans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "open_sanssemibold";
  src: url("../fonts/opensans-semibold-webfont.woff2") format("woff2"),
    url("../fonts/opensans-semibold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
p {
  line-height: 1.6em;
}
br.clear {
  clear: both;
}
.thumb {
  display: block;
}
.thumb img {
  display: block;
  width: 100%;
}
a:hover,
[type="submit"]:hover {
  filter: alpha(opacity = 85);
  -moz-opacity: 0.85;
  -khtml-opacity: 0.85;
  opacity: 0.85;
}
.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: 1200px;
}
header {
  background-image: url(../images/bg.jpg);
  display: flex;
  justify-content: space-between;
  color: #fff;
  border-radius: 10px;
  box-shadow: 1px -1px 10px -3px;
  height: 230px;
  position: relative;
  background-size: cover;
}
header div.left {
  width: 50%;
  padding-left: 30px;

}
header div.left h2 {
  font-size: 45px;
}
header div.right {
  width: 50%;
  padding: 30px;
}
header div.right div.top {
}
header div.right div.top span.menu-icon {
  display: none;
}
header div.right div.top ul {
  display: flex;
  justify-content: flex-end;
}
header div.right div.top ul li {
  font-size: 22px;
  margin-right: 35px;
}
header div.right div.top ul li.active {
  border-bottom: 1px solid #fff;
}
header div.right div.top ul li a {
  color: #fff;
  font-size: 17px;
}
header div.right div.bottom {
  display: flex;
  justify-content: flex-end;
}
header div.right div.bottom div.button {
  display: flex;
  justify-content: flex-end;
  margin-top: 140px;
  background: #fff;
  width: 140px;
  border-radius: 25px;
}
header div.right div.bottom a.button {
  color: #000;
  font-size: 14px;
}
header div.right div.bottom a.button.english {
  width: 70px;
  border-radius: 10px;
  padding: 3px;
}
header div.right div.bottom a.button.malayalam {
  border-radius: 10px;
  padding: 3px;
  width: 70px;
}
#top {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  padding: 15px 50px;
  border-radius: 10px;
  box-shadow: 1px -1px 10px -3px;
}
#top h3 {
  font-weight: bold;
}
#top span.icon {
  font-size: 30px;
}
#content {
  display: flex;
  justify-content: space-between;
  border: 1px solid #dce4ea;
  border-radius: 10px;
  overflow: hidden;
}
#content div.left {
  width: 50%;
  padding: 15px 50px;
  background-image: linear-gradient(
    to right,
    rgba(171, 134, 215, 1),
    rgba(171, 134, 215, 1)
  );
}
#content div.content div.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#content div.content div.box div.logo {
  width: 15%;
  text-align: center;
  margin-bottom: 20px;
}
#content div.content h3 {
  font-weight: bold;
  margin-bottom: 20px;
}
#content div.content div.box div.logo h5 {
  font-weight: bold;
  font-size: 17px;
  margin: 15px 0 5px;
  color: #fff;
}
#content h3 {
  color: #fff;
}
#content div.left div.box {
}
#content div.left div.box div.logo {
}
#content div.left div.box div.logo span.logo {
  background: #fff;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: inline-block;
}
#content div.left div.box div.logo span.logo img {
  display: block;
  margin: 23px auto 0;
}
#content div.left div.box div.logo span.logo img.odd {
  margin-top: 12px;
}
#content div.left div.box div.logo h5 {
}
#content div.left div.box div.logo p {
  font-size: 13px;
  color: #f9f9f9;
}
#content div.right {
  width: 50%;
  padding: 15px 50px;
  background-image: linear-gradient(
    to right,
    rgba(250, 135, 60, 1),
    rgba(261, 165, 60, 1)
  );
}
#content div.right div.box div.logo {
  height: 148px;
}
#content div.right div.box div.logo h5 {
  color: #fff;
}
#content div.right div.box div.logo span.logo {
  background: #fff;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: inline-block;
}
#content div.right div.box div.logo span.logo img {
  display: block;
  margin: 23px auto 0;
}
#content div.right div.box div.logo span.logo img.odd {
  margin-top: 12px;
}
#center {
  padding: 50px 0;
}
#center h3 {
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}
#center div.center {
  background: #fcfcfc;
  padding: 20px 30px 30px 50px;
  border: 1px solid #dce4ea;
  border-radius: 10px;
  margin-top: 25px;
}
#center div.box {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}
#center div.box div.left {
  width: 20%;
}
#center div.box div.left h4 {
  font-weight: bold;
}
#center div.box div.left span.box {
  background: #f8f8f8;
  display: block;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 15px;
  margin: 20px 0 30px;
}
#center div.box div.left span.box h5 {
  color: #909090;
}
#center div.box div.left span.box small {
  color: #909090;
}
#center div.box div.left div.search {
  text-align: right;
}
#center div.box div.left div.search a.button {
  background: #1d307e;
  width: 100px;
  border-radius: 25px;
  color: #fff;
  text-align: center;
  padding: 5px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 1px -1px 10px -3px;
}
#center div.box div.left div.search a.button button {
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}
#center div.box div.right {
  width: 75%;
}
#center div.box div.right div.responsive {
  display: none;
}
#center div.center div.button {
  text-align: right;
}
#center div.center a.button {
  background: #dce4ea;
  color: #333;
  padding: 5px 0;
  width: 100px;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
}
#center div.box div.right div.content {
  display: flex;
  justify-content: space-between;
}
#center div.box div.right div.content div.item {
  /* width: 18%; */
  text-align: center;
  box-shadow: 1px -1px 10px -3px;
  border-radius: 10px;
}
#center div.box div.right div.content div.item div.items {
  padding: 20px 20px 0;
}
#center div.box div.right div.content div.item span.round-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
}
#center div.box div.right div.content div.item span.round-icon img {
  margin: 0 auto;
  width: 100%;
  border-radius: 50%;
  display: inline-block;
}
#center div.box div.right div.content div.item h5 {
  margin: 10px 0;
  font-weight: bold;
  font-size: 17px;
}
#center div.box div.right div.content div.item p {
  color: #909090;
  font-size: 15px;
  overflow-wrap: break-word;
}
#center div.box div.right div.content div.item div.btn {
  text-align: right;
}
#center div.box div.right div.content div.item a.btn {
  background: #f79227;
  color: #fff;
  display: inline-block;
  margin-top: 10px;
  padding: 5px;
  text-align: center;
  width: 110px;
  border-radius: 20px 0 10px;
}
#testimonials {
}
#testimonials div.top {
}
#testimonials div.top h3 {
  text-align: center;
  font-weight: bold;
  font-size: 25px;
}
#testimonials div.bottom {
  display: flex;
  justify-content: space-between;
  padding: 50px 0;
}
#testimonials div.bottom span.icon {
  width: 10%;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
  background: #c0afc9;
  cursor: pointer;
  margin-top: 100px;
}
#testimonials div.bottom span.icon img {
  margin: 0 auto;
  display: block;
  margin-top: 10px;
}
#testimonials div.bottom div.items {
  width: 80%;
}
#testimonials div.bottom div.items div.owl-carousel {
}
.owl-carousel.owl-drag .owl-item {
  padding: 2px 5px;
}
#testimonials div.bottom div.items div.item {
  padding: 20px 30px;
  box-shadow: 1px -1px 10px -3px;
  border-radius: 10px;
}
#testimonials div.bottom div.items div.item img {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 20px;
}
#testimonials div.bottom div.items h5 {
  display: inline;
  font-size: 20px;
  color: #909090;
  font-weight: bold;
}
#testimonials div.bottom div.items p {
  margin-top: 20px;
  color: #909090;
}
footer {
  background: #1b143d;
  border-radius: 10px;
  padding: 50px;
  display: flex;
  color: #fff;
}
footer div.left {
  width: 20%;
}
footer div.left h3 {
  font-weight: bold;
  font-size: 40px;
  color: #fff;
  margin-top: 70px;
}
footer div.left span.logo {
}
footer div.left span.logo img {
}
footer div.middle {
  width: 70%;
}
footer div.middle div.top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #fff;
}
footer div.middle div.top div {
  width: 30%;
}
footer div.middle div.top h4 {
  font-weight: bold;
}
footer div.middle div.top span {
  width: 35px;
  height: 2px;
  color: #fff;
  background: #fff;
  display: block;
  margin: 5px 0;
}
footer div.middle div.top span.last {
  margin-bottom: 30px;
}
footer div.middle div.top a {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
}
footer div.middle div.top a.last {
  margin-bottom: 0;
}
footer div.middle div.top a.image {
  display: inline;
  margin-right: 10px;
}
footer div.middle div.bottom {
}
footer div.middle div.bottom p {
  text-align: center;
  margin-top: 20px;
}
footer div.middle div.bottom p a {
  color: #fff;
  font-weight: bold;
}
footer div.right {
}

/*Astrologer_list.html starts here */

#top span.icon p {
  color: #ea736f;
  display: inline;
  cursor: pointer;
  vertical-align: top;
  font-size: 20px;
  font-weight: bold;
}
#top span.icon img {
  cursor: pointer;
}
#top h3 {
  margin-top: 8px;
}
#center {
}
#cunsaltant {
  padding: 50px 0;
}
#cunsaltant div.content {
  display: flex;
  flex-wrap: wrap;
}
#cunsaltant div.content div.item {
  width: 18%;
  text-align: center;
  box-shadow: 1px -1px 10px -3px;
  border-radius: 10px;
  margin-bottom: 30px;
  margin-right: 42px;
}
#cunsaltant div.content div.item:nth-child(5n) {
  margin-right: 0;
}
#cunsaltant div.content div.item div.items {
  padding: 20px 20px 0;
}
#cunsaltant div.content div.item span.round-icon {
  display: inline-block;
  width: 80px;
  height: 80px;
}
#cunsaltant div.content div.item span.round-icon img {
  margin: 0 auto;
  width: 100%;
  border-radius: 50%;
  display: inline-block;
}
#cunsaltant div.content div.item h5 {
  margin: 10px 0;
  font-weight: bold;
  font-size: 17px;
}
#cunsaltant div.content div.item p {
  color: #909090;
}
#cunsaltant div.content div.item div.btn {
  text-align: right;
}
#cunsaltant div.content div.item a.btn {
  background: #f79227;
  color: #fff;
  display: inline-block;
  margin-top: 10px;
  padding: 5px;
  text-align: center;
  width: 110px;
  border-radius: 20px 0 10px;
}

/*Astrologer_list.html ends here */

/*login_home.html starts here*/

header div.right div.top ul li a span.round-icon {
  width: 40px;
  height: 40px;
  display: inline-block;
}
header div.right div.top ul li a span.round-icon img {
  display: inline-block;
  width: 100%;
  border-radius: 50%;
  height: 100%;
}
header div.right div.bottom div.button {
  margin-top: 70px;
}
header div.right div.answer {
  z-index: 10;
  width: 45%;
  background: #fff;
  color: #000;
  position: absolute;
  box-shadow: 1px -1px 10px -3px;
  border-radius: 0 0 10px 10px;
  display: none;
}
header div.right div.answer h3 {
  font-size: 30px;
  padding: 20px;
  border-bottom: 1px solid #dce4ea;
}
header div.right div.answer div.message {
  padding: 20px;
}
header div.right div.answer div.message div.info {
  display: flex;
}
header div.right div.answer div.message div.info img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: block;
}
header div.right div.answer div.message div.info h4 {
  vertical-align: middle;
  margin-top: 16px;
  margin-left: 10px;
  font-size: 20px;
  color: #ea736f;
  font-weight: bold;
}
header div.right div.answer div.message div.content {
  padding: 20px;
  margin-top: 20px;
  border-radius: 30px;
}
header div.right div.answer div.message div.content.latest {
  background: #dce4ea;
}
header div.right div.answer div.message div.content p {
}
header div.right div.answer div.message div.content p.date {
  text-align: right;
  font-size: 15px;
  margin-bottom: 10px;
}
header div.right div.answer div.message div.content p.message {
}
header div.right div.notification {
  z-index: 10;
  width: 45%;
  background: #fff;
  color: #000;
  position: absolute;
  box-shadow: 1px -1px 10px -3px;
  border-radius: 0 0 10px 10px;
  display: none;
}
header div.right div.notification h3 {
  font-size: 30px;
  padding: 20px;
  border-bottom: 1px solid #dce4ea;
}
header div.right div.notification ul li {
  padding: 20px;
  display: flex;
  border-bottom: 1px solid #dce4ea;
  cursor: pointer;
}
header div.right div.notification ul li div.left {
  width: 70px;
  height: 70px;
  padding: 0;
}
header div.right div.notification ul li div.left img {
  width: 100%;
  display: block;
  border-radius: 50%;
}
header div.right div.notification ul li div.right {
  width: 90%;
  padding: 0;
  margin-left: 20px;
}
header div.right div.notification ul li div.right div.top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
header div.right div.notification ul li div.right div.top h4 {
  font-weight: bold;
  color: #ea736f;
}
header div.right div.notification ul li div.right div.top p {
  font-size: 14px;
  color: #909090;
}
header div.right div.notification ul li div.right div.bottom {
  justify-content: flex-start;
}
header div.right div.notification ul li div.right div.bottom p {
}

/*login_home.html ends here*/

/*ask_question.html starts here*/

#notification {
  margin: 20px 0 40px;
}
#notification div.message {
}
#notification div.message div.content {
  background: #f5f5f5;
  border-radius: 10px;
  box-shadow: 1px -1px 10px -3px;
  padding: 20px 30px 50px;
  margin-bottom: 30px;
}
#notification div.message div.content p {
}
#notification div.message div.content p.date {
  text-align: right;
  font-size: 15px;
  margin-bottom: 20px;
}
#notification div.message div.content p.message {
}
#notification div.message div.button {
  text-align: right;
}
#notification div.message div.button a.button {
  display: block;
}
#notification div.message div.button a.button button{
  width: 130px;
  text-align: center;
  display: inline-block;
  padding: 8px;
  background: #f8a038;
  color: #fff;
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  font-weight: bold;
}

/*ask_question.html ends here*/

/*register.html starts here*/

#registration {
  padding: 50px 200px;
}
#registration form {
  border: 1px solid #dce4ea;
  border-radius: 10px;
  padding: 50px 100px;
}
#registration form div.top {
  display: flex;
  justify-content: space-between;
}
#registration form div.top div.left {
  width: 85%;
}
#registration form div.top div.left ul {
}
#registration form div.top div.left ul li {
  margin-bottom: 20px;
  display: flex;
}
#registration form div.top div.left ul li label {
  width: 30%;
}
#registration form div.top div.left ul li input {
  background: #fbfbfb;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  padding: 10px;
  width: 55%;
}
#registration form div.top div.left ul li label.gender {
  width: 10%;
}
#registration form div.top div.left ul li input[type="radio"] {
  width: 2%;
  margin-top: 4px;
  margin-right: 5px;
}
#registration form div.top div.right {
  width: 15%;
}
#registration form div.top div.right div.icon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  display: block;
}
#registration form div.top div.right div.icon img {
  width: 60%;
  display: block;
  margin: 10px auto 0;
}
#registration form div.top div.right div.icon span.icon {
  display: block;
  margin: 0 auto;
  text-align: center;
  margin-top: 10px;
  font-size: 20px;
  color: #bdbdbd;
}
#registration form div.bottom {
  text-align: right;
}
#registration form div.bottom input {
  width: 150px;
  text-align: center;
  display: inline-block;
  padding: 10px;
  background: #f8a038;
  color: #fff;
  border-radius: 10px 0 10px 0;
  cursor: pointer;
  font-weight: bold;
}

/*register.html ends here*/

/*edit-profile.html starts here*/

#registration form div.top div.edit {
  width: 15%;
}
#registration form div.top div.edit div.icon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid #e2e2e2;
  display: block;
}
#registration form div.top div.edit div.icon img.edit {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 50%;
  margin-top: 0;
  position: relative;
}
#registration form div.top div.edit div.icon span.icon {
  display: block;
  font-size: 20px;
  position: absolute;
  z-index: 10;
  margin-left: 75px;
  margin-top: -50px;
  cursor: pointer;
}

/*edit-profile.html ends here*/

/*signin.html starts here*/

#signin {
  padding: 50px 150px 80px;
  display: flex;
}
#signin div.left {
  width: 50%;
  background: linear-gradient(rgba(44, 62, 80, 0.8), rgba(44, 62, 80, 0.8)),
    url("../images/logo.svg") center;
  box-shadow: 1px -1px 10px -3px;
  border-radius: 10px 0 0 10px;
  position: relative;
}
#signin div.left h2 {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  z-index: 10;
  color: #fff;
  padding: 25px 0 0 35px;
}
#signin div.right {
  width: 50%;
  padding: 80px 100px;
  box-shadow: 1px -1px 10px -3px;
  border-radius: 0 10px 10px 0;
}
#signin div.right h3 {
  color: #f79227;
  font-size: 30px;
  margin-bottom: 8px;
}
#signin div.right h5 {
  color: #f79227;
  font-size: 14px;
  margin-bottom: 40px;
}
#signin div.right form {
}
#signin div.right form input {
  margin-bottom: 30px;
  width: 90%;
  padding: 20px 10px;
  border-bottom: 1px solid #e2e2e2;
}
#signin div.right form a.button {
  font-size: 18px;
  text-align: center;
  display: block;
  background: #f79227;
  width: 140px;
  padding: 2px 0;
  border-radius: 25px;
  margin: 0 auto;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
#signin div.right form p {
  text-align: center;
}
#signin div.right form p.first {
  margin: 30px 0 7px;
}
#signin div.right form p a {
  color: #f79227;
  margin-left: 10px;
  font-size: 18px;
}

/*sign-in.html ends here*/

/*profile.html starts here*/

#profile {
  padding: 30px 0;
}
#profile div.top {
  padding: 0 30px;
  display: flex;
}
#profile div.top div.left {
  width: 200px;
  padding: 20px 20px 40px;
  border-bottom: 1px solid #e2e2e2;
}
#profile div.top div.left img {
  border-radius: 50%;
  width: 100%;
  display: block;
}
#profile div.top div.right {
  padding: 60px 0;
  margin-left: 30px;
}
#profile div.top div.right h4 {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 10px;
}
#profile div.top div.right p {
  color: #f79227;
  font-weight: bold;
}
#profile div.middle {
  display: flex;
  width: 100%;
  padding: 30px;
}
#profile div.middle div.left {
  width: 14%;
}
#profile div.middle div.left div.expertise {
  padding: 0 30px 30px;
}
#profile div.middle div.left div.expertise h4 {
}
#profile div.middle div.left div h4 {
  font-weight: bold;
  font-size: 21px;
  margin-bottom: 20px;
}
#profile div.middle div.left div p {
  font-size: 15px;
  color: #909090;
}
#profile div.middle div.left div.expertise p {
}
#profile div.middle div.left div.education {
  padding: 0 30px 30px;
}
#profile div.middle div.left div.education h4 {
}
#profile div.middle div.left div.education p {
}
#profile div.middle div.right {
  width: 80%;
  padding-bottom: 40px;
  border-bottom: 1px solid #e2e2e2;
}
#profile div.middle div.right p {
  color: #909090;
}
#profile div.bottom {
  padding: 30px;
  display: flex;
  justify-content: flex-end;
}
#profile div.bottom div.services {
  width: 85%;
}
#profile div.bottom div.services h4.head {
  font-weight: bold;
  font-size: 25px;
}
#profile div.bottom div.services ul {
  margin-top: 30px;
  width: 100%;
}
#profile div.bottom div.services ul li {
  display: flex;
  width: 92%;
  /*padding: 20px;*/
  background: #fef6eb;
  margin-bottom: 15px;
  border: 1px solid #e2e2e2;
}
#profile div.bottom div.services ul li h4 {
  width: 70%;
  padding: 15px 20px;
  font-size: 20px;
}
#profile div.bottom div.services ul li p {
  width: 15%;
  text-align: center;
  padding: 15px 0;
  color: #fff;
  font-weight: bold;
  background: #412256;
}
#profile div.bottom div.services ul li p span {
  margin-right: 5px;
}
#profile div.bottom div.services ul li a.button {
  width: 15%;
  text-align: center;
  color: #fff;
  padding: 15px 0;
  background: #f79227;
  font-weight: bold;
}

/*profile.html ends here*/

/*payement.html starts here*/

#payement {
  padding: 40px 30px;
}
#payement h4.head {
  font-weight: bold;
  font-size: 19px;
}
#payement div.payement {
  display: flex;
  margin-top: 15px;
}
#payement div.payement div.left {
  width: 45%;
  margin-right: 80px;
}
#payement div.payement div.left div.input {
  width: 100%;
  padding: 10px;
  background: #f6f6f6;
  margin-bottom: 15px;
  border-radius: 10px;
}
#payement div.payement div.left div.input input:hover,
#payement div.payement div.left div.input label:hover {
  cursor: pointer;
}
#payement div.payement div.left div.input input {
  margin-right: 10px;
}
#payement div.payement div.left div.input input[type="radio"]:checked {
}
#payement div.payement div.left div.input label {
  color: #b2b2b2;
  font-weight: bold;
}
#payement div.payement div.right {
  border: 1px solid #dce4ea;
  width: 30%;
  height: 290px;
}
#payement div.payement div.right h4 {
  padding: 20px;
  border-bottom: 1px solid #dce4ea;
}
#payement div.payement div.right div.top {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  color: #b2b2b2;
  font-size: 21px;
  border-bottom: 1px solid #dce4ea;
  min-height: 150px;
}
#payement div.payement div.right div.top h6 {
}
#payement div.payement div.right div p {
  font-size: 17px;
}
#payement div.payement div.right div p span {
  margin-right: 5px;
}
#payement div.payement div.right div.bottom {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  color: #b2b2b2;
  font-size: 21px;
}
#payement div.payement div.right div.bottom h6 {
}
#payement div.payement div.right div.bottom p {
}
#payement div.payement div.right div.bottom p span {
}
#payement div.payement div.left div.input.checked {
  color: #f8a038;
  background: #fff;
  border: 1px solid #dce4ea;
}
#payement div.payement div.left div.input.checked input,
#payement div.payement div.left div.input.checked label {
  color: #f8a038;
}
#payement div.payement div.left div.input.checked div.details {
  padding: 30px;
  display: flex;
  justify-content: space-between;
}
#payement div.payement div.left div.input.checked div.details div.content {
  width: 55%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#payement
  div.payement
  div.left
  div.input.checked
  div.details
  div.content
  div.input {
  border-radius: 10px;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid #dce4ea;
  margin-bottom: 10px;
  color: #000;
}
#payement
  div.payement
  div.left
  div.input
  div.details
  div.content
  div.input
  input {
}
#payement
  div.payement
  div.left
  div.input
  div.details
  div.content
  div.input
  img {
  margin-right: 5px;
  vertical-align: middle;
}
#payement
  div.payement
  div.left
  div.input
  div.details
  div.content
  div.input
  input::placeholder {
  color: #b2b2b2;
  font-weight: bold;
}
#payement
  div.payement
  div.left
  div.input.checked
  div.details
  div.content
  div.input.half {
  width: 47%;
  margin-bottom: 0;
}
#payement
  div.payement
  div.left
  div.input.checked
  div.details
  div.content
  div.input.half
  input {
  width: 70%;
}
#payement div.payement div.left div.input.checked div.details div.img {
  width: 35%;
  border: 0;
}
#payement div.payement div.left div.input.checked div.details div.img img {
  width: 100%;
}
.picker{
	width: 100%;
}
.picker .pc-select {
width: 95%;
max-width: initial !important;
}
#nakshatra{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 55px;

}
#nakshatra #image_container{
  padding: 30px 20px;

}
#nakshatra #image_container div.image{
  background-size:100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  background-blend-mode: multiply;
  border-radius: 10px;
  overflow: hidden;
  padding: 30px;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
#nakshatra #image_container div.image p{
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  margin-bottom: 30px;
}
#nakshatra .owl-carousel .owl-stage-outer,#nakshatra .owl-carousel .owl-stage,#nakshatra .owl-carousel.owl-drag .owl-item{
  height: 100%;
}
#nakshatra #image_container,#nakshatra #smallcards {
  display: flex;
  justify-content: space-between;
 box-shadow: 1px -1px 10px -3px;
  border-radius: 10px;
  overflow: hidden;
  padding: 30px;
  width: 48.5%;
}
#nakshatra #smallcards div.content.birth_nakshatra div.box div.logo {
  width: 23%;
  height: 80px;
}
#nakshatra #smallcards div.content.birth_nakshatra div.box div.logo:nth-last-child(n+5){
  margin-bottom: 4%;
}
#smallcards div.content.birth_nakshatra div.box div.logo{
  margin-bottom:2%;
}
#main_container{
  padding:7% 0;
}
#main_container #smallcards .box{
  margin-top: 30px;
}
#main_container #smallcards{
  width: 100%;
}

#smallcards div.left div.box div.logo h5 {
  color: #523480;
}

.picker .pc-select .pc-trigger {
  margin-bottom: 5px;
  padding: 5px 10px;
  width: 200px;
}

.picker .pc-select .pc-list li {
  padding: 5px 9px;
}

#smallcards div.content div.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#center div.box div.left span.box small {
  margin-left: 5px;
}

#smallcards div.right div.box div.logo p {
  font-size: 13px;
  color: #523480;
}

#smallcards div.right.birth_nakshatra h3 {
  color: #201741;
  font-weight: bold;
}

#smallcards div.right.birth_nakshatra {
  width: 100%;
  background: #fff;
}

#smallcards div.content.birth_nakshatra div.box div.logo:hover a h5 {
  color: #fff;
}
#smallcards div.left div.box div.logo span.logo:hover img {
  border: none;
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  transition: transform 0.2s;
}
#smallcards div.content.birth_nakshatra div.box div.logo:hover {
  border: none;
  -ms-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  /*background: linear-gradient(to bottom right, rgba(261,165,60,1) 0%, rgba(251, 167, 44, 1) 0%, rgba(171,134,215,1) 99%, rgba(171,134,215,1) 100%);
		*/
}

#smallcards div.content.birth_nakshatra div.box div.logo {
  height: 100px;
  background: linear-gradient(
    to bottom right,
    rgba(171, 134, 215, 1) 0%,
    rgba(171, 134, 215, 1) 0%,
    rgba(251, 167, 44, 1) 99%,
    rgba(261, 165, 60, 1) 100%
  );
  padding: 10px;
  border-radius: 10px;
  width: 13%;
  transition: transform 0.2s;
  text-align: center;
}

#smallcards div.content.birth_nakshatra div.box div.logo a {
  display: block;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#smallcards div.content.birth_nakshatra div.box div.logo h5 {
  font-size: 15px;
  color: #ffffff;
  font-weight: bold;
}

#stones { 
  padding: 8% 0 4% 0;
}
#stones div.title{
  text-align: center;
  margin-bottom: 3%;
}
#stones section.container { 
  padding: 0 14%;
}

#stones section.container div.card { 
padding: 20px;
text-align: center;
}

#stones section.container div.card div.top { 
margin-bottom: 20px;
display: flex;
justify-content: center;
}

#stones section.container div.card div.top div.image_wrapper { 
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
box-shadow: 1px -1px 10px -3px;
background-color: #ffffff;
border-radius: 50%;
overflow: hidden;
width: max-content;
display: inline-block;

}

#stones section.container div.card div.top div.image_wrapper div.image { 
  background-color: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  width: 160px;
height: 160px;
}

#stones section.container div.card div.top div.image_wrapper div.image img { 
height: 100%;
}

#stones section.container div.card div.bottom { 
  text-align: center;
  margin-bottom: 20px;
}

#stones section.container div.card div.bottom h3 { 
  margin-bottom: 20px;
font-size: 17px;
font-weight: bold;
}

#stones section.container div.card div.bottom p { 
font-size: 15px;
color: #909090;

}
#pilgrimage { 
  padding: 4% 0 4% 0;
}
#pilgrimage div.title{
  text-align: center;
  margin-bottom: 3%;
}
#pilgrimage section.container { 
}
#pilgrimage section.container.pilgrimages {
  display: flex; 
  flex-wrap: wrap;
}
#pilgrimage section.container.pilgrimages div.card{
  width: 32%;
}
#pilgrimage section.container.pilgrimages div.card:nth-child(3n-1){
  margin-right: 2%;
  margin-left: 2%;
}
#pilgrimage section.container.pilgrimages div.card{
  margin-bottom: 2%;
}
#pilgrimage section.container div.card { 
display: flex;
box-shadow: 1px -1px 10px -3px;
border-radius: 18px;
overflow: hidden;

}

#pilgrimage section.container div.card div.top { 

  width: 45%;  

}


#pilgrimage section.container div.card div.top div.image { 
  overflow: hidden;
  height: 100%;
}

#pilgrimage section.container div.card div.top div.image img { 
height: 100%;
}

#pilgrimage section.container div.card div.bottom { 
  text-align: left;
  padding: 20px;
width: 55%;

}

#pilgrimage section.container div.card div.bottom h3 { 
  margin-bottom: 20px;
font-size: 17px;
font-weight: bold;
}

#pilgrimage section.container div.card div.bottom p { 
font-size: 15px;
color: #909090;
margin-bottom: 20px;

}
#pilgrimage a.blue_button{
  font-size: 13px;
  padding: 5px 7px;
}
#pilgrimage .owl-theme .owl-dots{
  margin-top: 3%;
}
#question { 
  padding: 4% 0 4% 0;
}
#question div.title{
  text-align: center;
  margin-bottom: 3%;
}
#question section.container { 
}
#question section.container.pilgrimages {
  display: flex; 
  flex-wrap: wrap;
}
#question section.container.pilgrimages div.card{
  width: 32%;
}
#question section.container.pilgrimages div.card:nth-child(3n-1){
  margin-right: 2%;
  margin-left: 2%;
}
#question section.container.pilgrimages div.card{
  margin-bottom: 2%;
}
#question section.container div.card { 
display: flex;
box-shadow: 1px -1px 10px -3px;
border-radius: 18px;
overflow: hidden;

}

#question section.container div.card div.top { 

  width: 45%;  

}


#question section.container div.card div.top div.image { 
  overflow: hidden;
  height: 100%;
}

#question section.container div.card div.top div.image img { 
height: 100%;
}

#question section.container div.card div.bottom { 
  text-align: left;
  padding: 20px;
width: 100%;

}

#question section.container div.card div.bottom h3 { 
  margin-bottom: 20px;
font-size: 17px;
font-weight: bold;
}

#question section.container div.card div.bottom p { 
font-size: 15px;
color: #909090;
margin-bottom: 20px;

}
#question a.blue_button{
  font-size: 13px;
  padding: 5px 7px;
}
#question .owl-theme .owl-dots{
  margin-top: 3%;
}
.owl-carousel button.owl-dot.blue_dot{
border: 2px solid #201741;
border-radius: 30px;
margin: 5px;
}
.owl-carousel button.owl-dot.blue_dot.active span{
  background-color: #201741;
}
.owl-carousel button.owl-dot.blue_dot span{
  width: 25px;
  margin: 0;
  height: 6px;
  background-color: #ffffff;
}
.owl-carousel button.owl-dot.blue_dot span:hover{
  background-color: #201741;
}
#single_pilgrimage { 
 padding: 8% 0;
}

#single_pilgrimage .left { 

}

#single_pilgrimage .left .top { 
float: left;
margin-bottom: 20px;
width: 49%;
}

#single_pilgrimage .left .top h3 { 
 width: max-content;
 padding-bottom: 10px;
 border-bottom: 3px solid #1b143d;
 font-size: 24px;
}

#single_pilgrimage .left .right { 
  float: right;
  width: 48%;
  margin-left: 3%;
  margin-bottom: 2%;
  border-radius: 18px;
  overflow: hidden;
}

#single_pilgrimage .left .right img { 
width: 100%;
max-height: 330px;

}

#single_pilgrimage .left p { 
  line-height: 2em;
color: #909090;
font-size: 16px;
text-indent: 22px;
}
span.more_content{
  display: none;
}
a.blue_button{
  background-color: #1d307e;
  display: inline-block;
  color: #ffffff;
  padding: 10px 15px;
  font-size: 15px;
  border-radius: 25px;
}
div.title{}
div.title h3{
  font-size: 20px;
  color: #201741;
  font-weight: bold;
}
div.heading{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
div.view_button a.button{
  background: #dce4ea;
    color: #333;
    padding: 5px 0;
    width: 100px;
    display: inline-block;
    text-align: center;
    border-radius: 10px;
    font-size: 15px;
}
#page_overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 15;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}
#my_modal{
  display: none;
  position: absolute;
  left: calc((100% - 60%)/2);
  width: 60%;
  box-shadow: 1px -1px 10px -3px;
  z-index: 20;

}

#my_modal .modal_wrapper{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  animation: animatezoom 0.6s;
}
#my_modal section.close_modal{
  width: 50px;
  position: absolute;
  right: -80px;
  top: 0;
}
#my_modal section.close_modal div.modal{

}
#my_modal section.close_modal a{
  color: #dce4ea;
  background-color: #ffffff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;

}
#my_modal section.close_modal i{
  font-size: 25px;
  color: #000;

}
#my_modal section.modal { 
  padding: 4%;
  background-color: #f6f6f6;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
}
#my_modal section.modal div.title{
  text-align: center;
  margin-bottom: 3%;
}
#my_modal section.modal section.container { 
}

#my_modal section.modal section.container div.card { 
display: flex;
border-radius: 10px;
overflow: hidden;

}

#my_modal section.modal section.container div.card div.top { 

  width: 45%;  
  display: flex;
  justify-content: center;
  align-items: center;

}


#my_modal section.modal section.container div.card div.top div.image { 
  overflow: hidden;
  height: 100%;
  max-height: 500px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

}

#my_modal section.modal section.container div.card div.top div.image.stone { 
  overflow: hidden;
  height:180px;
  width: 180px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 1px -1px 10px -3px;
}

#my_modal section.modal section.container div.card div.top div.image img { 
height: 100%;
background-image: url(../images/loading_image.svg);
background-repeat: no-repeat;
background-size: contain;

}

#my_modal section.modal section.container div.card div.bottom { 
  text-align: left;
  padding: 20px;
width: 55%;

}

#my_modal section.modal section.container div.card div.bottom h3 { 
  margin-bottom: 20px;
font-size: 17px;
font-weight: bold;
}

#my_modal section.modal section.container div.card div.bottom p { 
font-size: 15px;
color: #909090;
margin-bottom: 20px;

}

@keyframes animatezoom{
  0%{
    transform: scale(0);
  }
    100%{
      transform: scale(1);
  
    }
  
  }

/*Responsive Style Starts here*/

@media all and (max-width: 1500px) {
  header div.left {
    width: 45%;
    display: flex;
    justify-content: flex-end;
    text-align: right;
    align-items: center;
  }
  header div.left h2 {
    font-size: 40px;
  }
  header div.right {
    width: 55%;
  }
  #cunsaltant div.content div.item {
    width: 17%;
  }
  #content div.left,
  #content div.right {
    padding: 15px 20px;
  }
  #registration form div.top div.left ul li label.gender {
    width: 15%;
  }
}
@media all and (max-width: 1200px) {
  header div.right div.top ul li {
    font-size: 20px;
    margin-right: 20px;
  }
  header div.right div.bottom {
    margin-top: 25px;
  }
  header div.left h2 {
    font-size: 27px;
  }
  #content div.content div.box div.logo {
    width: 21%;
    height: 158px;
  }
  #center div.box div.right {
    width: 70%;
  }
  #center div.box div.left {
    width: 28%;
  }
  /* #center div.box div.right div.content div.item:nth-child(4),
  #center div.box div.right div.content div.item:nth-child(5) {
    display: none;
  }
  #center div.box div.right div.content div.item {
    width: 30%;
  } */
  #testimonials div.bottom div.items div.item {
    padding: 20px;
  }
  #testimonials div.bottom div.items {
    width: 85%;
  }
  #testimonials div.bottom div.items div.item img {
    margin-right: 5px;
  }
  #testimonials div.bottom div.items h5 {
    font-size: 18px;
  }
  #testimonials div.bottom div.items p {
    margin-top: 10px;
  }
  #testimonials div.bottom span.icon {
    margin-top: 110px;
  }
  #cunsaltant div.content div.item {
    width: 22%;
  }
  #cunsaltant div.content div.item:nth-child(5n) {
    margin-right: 42px;
  }
  #cunsaltant div.content div.item:nth-child(4n) {
    margin-right: 0;
  }
  #profile div.top div.left img {
    width: 85%;
  }
  #profile div.top div.left {
    padding: 0 20px 35px;
  }
  #profile div.top {
    padding: 0 20px;
  }
  #profile div.top div.right {
    padding: 35px 0;
    margin-left: -6px;
  }
  #profile div.middle div.left div.expertise,
  #profile div.middle div.left div.education {
    padding: 0 0px 30px;
  }
  #profile div.middle div.left {
    width: 18%;
  }
  #profile div.middle div.right {
    width: 90%;
  }
  #profile div.bottom {
    padding: 0 30px 30px;
  }
  #profile div.bottom div.services ul li {
    width: 100%;
  }
  #top {
    padding: 15px 20px;
  }
  #payement div.payement div.left div.input.checked div.details {
    padding: 20px 10px;
  }
  #payement div.payement div.left {
    width: 55%;
    margin-right: 40px;
  }
  #payement div.payement div.left div.input.checked div.details div.content {
    width: 65%;
  }
  #payement div.payement div.left div.input.checked div.details div.img {
    width: 30%;
  }
  #registration {
    padding: 50px 140px;
  }
  #registration form div.top div.left ul li input[type="radio"] {
    width: 3%;
  }
  #signin div.right {
    padding: 35px 50px;
  }
  #signin {
    padding: 50px 55px 80px;
  }
}
@media all and (max-width: 1024px) {
  header div.right div.top ul {
    display: none;
  }
  header div.left {
    width: 100%;
  }
  header div.right div.bottom {
    margin-top: 15px;
    margin-right: 30px;
  }
  #content div.content div.box div.logo {
    width: 25%;
  }
  #center div.center {
    padding: 20px 20px 40px;
  }
  #center div.box div.left {
    width: 30%;
  }
  #center div.box div.right {
    width: 68%;
  }
  #testimonials div.bottom div.items div.item img {
    margin-right: 0;
    display: block;
    margin: 0 auto 10px;
    width: 100px;
    height: 100px;
  }
  #testimonials div.bottom div.items h5 {
    display: block;
    text-align: center;
  }
  #testimonials div.bottom span.icon {
    margin-top: 190px;
  }
  #center div.box div.right div.content div.item div.items {
    padding: 15px 15px 0;
  }
  #center div.box div.right div.content div.item h5 {
    margin: 5px 0;
  }
  #center div.box div.right div.content div.item a.btn {
    width: 90px;
  }
  #profile div.top div.right {
    margin-left: -22px;
  }
  #profile div.middle div.left {
    width: 24%;
  }
  #profile div.bottom div.services {
    width: 100%;
  }
  #payement div.payement div.left {
    width: 60%;
    margin-left: 30px;
  }
  #payement
    div.payement
    div.left
    div.input
    div.details
    div.content
    div.input
    img {
    width: 14px;
  }
  #payement div.payement div.right {
    width: 35%;
  }
  #cunsaltant div.content div.item {
    margin-right: 33px;
  }
  header div.right {
    padding: 0;
  }
  header {
    position: relative;
  }
  header div.right div.top ul.mobile-menu {
    background: #26153c;
    opacity: 0.9;
    color: #000;
    height: 100vh;
    position: absolute;
    z-index: 15;
    width: 36%;
    top: 0;
  }
  header div.right div.top ul.mobile-menu li {
    padding: 20px;
    margin-right: 0;
  }
  header div.right div.top ul.mobile-menu li.active {
    border-bottom: 1px solid #dce4ea;
  }
  header div.right div.top ul.mobile-menu li a {
    color: #fff;
    font-weight: bold;
  }
  header div.right div.top {
    padding: 20px 30px 0 0;
  }
  header div.right div.top span {
    font-size: 35px;
    display: block;
    cursor: pointer;
    text-align: right;
  }
  header div.right div.top span.menu-icon {
    display: block;
  }
  header div.right div.top span.menu-icon i{
    display: inline-block;
    transform: rotate(90deg);
  }
  header div.right div.top span.close-icon {
    z-index: 20;
    position: absolute;
    right: 0;
    margin-top: -62px;
  }
  #registration form {
    padding: 50px 100px 50px 50px;
  }
  #registration {
    padding: 50px;
  }
  header div.right div.notification,
  header div.right div.answer {
    width: 36%;
    z-index: 16;
    margin-top: 190px;
  }
  #smallcards div.content.birth_nakshatra div.box div.logo {
    width: 18%;
  }
  #smallcards div.content.birth_nakshatra div.box div.logo{
    margin-bottom:3%;
  }
}
@media all and (max-width: 960px) {
 

  #cunsaltant div.content div.item:nth-child(4n) {
    margin-right: 33px;
  }
  #cunsaltant div.content div.item {
    width: 28%;
  }
  #cunsaltant div.content {
    padding-left: 50px;
  }
  #payement div.payement div.left {
    margin-left: 0;
  }
  #testimonials div.bottom span.icon {
    margin-top: 145px;
  }
  #nakshatra #smallcards div.content.birth_nakshatra div.box div.logo:nth-child(4n){
    display: none;
  }
  #nakshatra #smallcards div.content.birth_nakshatra div.box div.logo{
    width: 32%;
  }
  #nakshatra #image_container{
    width: 55%;
  } 
  #nakshatra #smallcards{
    width: 42%;
  }
}
@media all and (max-width: 900px) {
  #pilgrimage section.container.pilgrimages div.card{
    width: 47%;
  }
  #pilgrimage section.container.pilgrimages div.card{
    margin-right: 2%;
    margin-bottom: 2%;
  }
  #question section.container.pilgrimages div.card{
    width: 47%;
  }
  #question section.container.pilgrimages div.card{
    margin-right: 2%;
    margin-bottom: 2%;
  }
  #single_pilgrimage .left .right{
    float: none;
    width: 80%;
  }
  #single_pilgrimage .left .top{
    float: none;
    width: 100%;
  }
	#center div.box div.right div.content{
		flex-direction: column-reverse;
	}
	#center div.center a.button{
		margin-bottom: 20px;
	}
  #testimonials div.bottom {
    padding: 35px 0 50px;
  }
  #smallcards div.content.birth_nakshatra div.box div.logo {
    width: 23%;
  }
  #smallcards div.content.birth_nakshatra div.box div.logo{
    margin-bottom:4%;
  }
  #testimonials div.bottom div.items {
    width: 80%;
  }
  #profile div.middle {
    padding: 30px 30px 30px 20px;
  }
  #profile div.middle div.left {
    width: 27%;
  }
  /* #center div.box div.right div.content div.item:nth-child(3) {
    display: none;
  } */
  #center div.box div.right {
    width: 62%;
  }
  #center div.box div.left {
    width: 35%;
  }
  /* #center div.box div.right div.content div.item {
    width: 49%;
  } */
  #payement
    div.payement
    div.left
    div.input.checked
    div.details
    div.content
    div.input {
    padding: 5px;
  }
  #payement
    div.payement
    div.left
    div.input
    div.details
    div.content
    div.input
    img {
    margin-right: 0;
  }
  #content div.left,
  #content div.right {
    padding: 15px;
  }
  header div.left {
    width: 80%;
  }
  header div.right {
    width: 60%;
  }
  header div.right div.top ul.mobile-menu,
  header div.right div.notification,
  header div.right div.answer {
    width: 42%;
  }
  #content div.content div.box div.logo {
    width: 30%;
  }

  #nakshatra #smallcards div.content.birth_nakshatra div.box div.logo{
    width: 32%;
  }
  #smallcards div.content.birth_nakshatra div.box div.logo{
    margin-bottom:6%;
  }
  #nakshatra #image_container{
    width: 100%;
  } 
  #nakshatra #smallcards{
    width: 100%;
    margin-bottom: 4%;
  }
}
@media all and (max-width: 768px) {

  
  header div.left h2 {
    position: absolute;
  }
  header div.right div.top span.close-icon {
    margin-top: -65px;
  }
  header div.right div.top span.close-icon {
    right: -25px;
  }
  #content div.content div.box div.logo {
    width: 33%;
  }
  #testimonials div.bottom div.items div.item {
  }
  #testimonials div.bottom span.icon {
    margin-top: 180px;
  }
  #center div.box div.right {
    width: 58%;
  }
  #center div.box div.left {
    width: 40%;
  }
  #cunsaltant div.content {
    padding: 0 50px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  #cunsaltant div.content div.item:nth-child(4n) {
    margin-right: 0;
  }
  #cunsaltant div.content div.item:nth-child(5n) {
    margin-right: 0;
  }
  #cunsaltant div.content div.item {
    width: 48%;
    margin-right: 0;
  }
  footer {
    padding: 40px 30px;
  }
  #profile div.bottom {
    padding: 0;
  }
  #profile div.bottom div.services ul li a.button,
  #profile div.bottom div.services ul li p {
    width: 20%;
  }
  header div.right div.top ul.mobile-menu,
  header div.right div.notification,
  header div.right div.answer {
    width: 42.8%;
  }
  #payement div.payement {
    display: block;
  }
  #payement div.payement div.right,
  #payement div.payement div.left {
    width: 80%;
  }
  #payement div.payement div.right {
    margin-top: 30px;
  }
  #registration form {
    padding: 40px;
  }
  #registration form div.top {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  #registration form div.top div.left {
    width: 100%;
    padding: 0;
  }
  #registration form div.top div.right {
    width: 100%;
    margin-bottom: 30px;
  }
  #registration form div.top div.left ul li label {
    width: 40%;
  }
  #registration form div.top div.right div.icon {
    margin: 0 auto;
  }
  #registration form div.top {
    margin-bottom: 20px;
  }
  #registration form div.top div.left ul li label {
    width: 35%;
  }
  #registration form div.top div.left ul li input[type="radio"] {
    margin-top: 6px;
  }
  #registration form div.top div.left ul li label.gender.male {
    width: 12%;
  }
  #registration form div.top div.left ul li label.gender.female {
    width: 16%;
  }
  #signin div.left {
    display: none;
  }
  #signin div.right {
    width: 100%;
    border-radius: 10px;
  }
}
@media all and (max-width: 640px) {
  div.title h3{
    font-size: 16px;
  }
  #single_pilgrimage .left .right{
    width: 100%;
  }
  #pilgrimage section.container.pilgrimages div.card{
    width: 100%;
  }
  #pilgrimage section.container.pilgrimages div.card{
    margin-right: 0;
    margin-bottom: 5%;
  }
  #question section.container.pilgrimages div.card{
    width: 100%;
  }
  #question section.container.pilgrimages div.card{
    margin-right: 0;
    margin-bottom: 5%;
  }

#smallcards div.content.birth_nakshatra div.box div.logo {
	width: 31%;
	}
  header {
    background-image: url(../images/bg2.jpg);
  }
  header div.left {
    font-weight: bold;
  }
  header div.left h2 {
    font-weight: bold;
  }
  header div.right div.top span.close-icon {
    right: 0px;
    margin-top: -78px;
  }
  header div.right div.top ul.mobile-menu,
  header div.right div.notification,
  header div.right div.answer {
    width: 119%;
    right: -50px;
    top: -20px;
  }
  header div.right div.top ul.mobile-menu li {
    text-align: center;
  }
  #top {
    padding: 10px 15px;
  }
  #content {
    display: block;
  }
  #content div.left,
  #content div.right {
    width: 100%;
  }
  #content div.content div.box div.logo {
    width: 24%;
  }
  #center {
    padding: 30px 0;
  }
  #center div.center {
    margin-top: 30px;
  }
  #center div.box {
    display: block;
  }
  #center div.center div.button {
    display: none;
  }
  #center div.box div.left,
  #center div.box div.right {
    width: 100%;
  }
  #center div.box div.left {
    margin-bottom: 30px;
  }
  #center div.box div.right div.responsive {
    display: block;
    margin-top: 20px;
  }
  #testimonials div.bottom div.items {
    width: 78%;
  }
  #testimonials div.bottom div.items div.item {
    margin: 0 auto;
  }
  #testimonials div.bottom span.icon {
    margin-top: 136px;
  }
  footer div.left {
    display: none;
  }
  footer div.middle div.top div:nth-child(n+2){
    margin-top: 30px;
  }
  footer div.middle div.top span {
  margin: 5px auto;
  }
  footer div.middle div.top div{
    width: 100%;
    text-align: center;
  }
  footer div.middle {
    margin: 0 auto;
    width: 80%;
  }
  #profile div.top div.left {
    width: 120px;
    padding: 0 0 30px;
  }
  #profile div.top div.right {
    margin-left: 0;
  }
  #profile div.top div.right {
    padding: 26px 0;
  }
  #profile div.top div.right h4 {
    margin-bottom: 0;
  }
  #profile div.top div.right h4,
  #profile div.middle div.left div h4 {
    font-size: 20px;
  }
  #profile div.middle div.left {
    width: 38%;
  }
  #profile div.middle div.left div p,
  #profile div.middle div.right p {
    font-size: 14px;
  }
  #profile div.bottom div.services h4.head {
    font-size: 20px;
  }
  #profile div.bottom div.services ul li a.button,
  #profile div.bottom div.services ul li p {
    padding: 8px 0;
  }
  #profile div.bottom div.services ul li h4 {
    padding: 8px 15px;
    font-size: 16px;
  }
  #profile div.bottom div.services ul li a.button,
  #profile div.bottom div.services ul li p {
    width: 28%;
  }
  #payement div.payement div.right,
  #payement div.payement div.left {
    width: 100%;
  }
  #registration form div.top div.left ul li label.gender.female {
    width: 17%;
  }
  #registration form div.bottom {
    text-align: center;
  }
  #registration form {
    padding: 25px;
  }
  #registration form div.top div.left ul li label {
    width: 40%;
  }
  .bottom_link.responsive {
    text-align: center;
    display: block;
  }
  .bottom_link.responsive h4 a {
    font-size: 15px;
  }
  #my_modal {

    left: calc((100% - 90%)/2);
    width: 90%;
  }
  #my_modal section.modal section.container div.card{
    flex-wrap: wrap;
  }
  #my_modal section.modal section.container div.card div.bottom,#my_modal section.modal section.container div.card div.top{
    width:100%;
  }
}
@media all and (max-width: 600px) {
  header div.right div.top ul.mobile-menu,
  header div.right div.notification,
  header div.right div.answer {
    width: 120%;
  }
  #testimonials div.bottom span.icon img {
    margin-top: 5px;
  }
  #testimonials div.bottom span.icon {
    width: 50px;
    height: 50px;
  }
  #cunsaltant div.content {
    padding: 0 25px;
  }
  #registration form div.top div.left ul li input[type="radio"] {
    width: 4%;
  }
}
@media all and (max-width: 480px) {
  #stones section.container div.card div.top div.image_wrapper div.image{
    width: 100px;
    height: 100px;
  }
  #nakshatra #smallcards div.content.birth_nakshatra div.box div.logo{
    width: 45%;
  }
  #smallcards div.content.birth_nakshatra div.box div.logo{
    margin-bottom:7%;
  }
  #nakshatra #smallcards div.content.birth_nakshatra div.box div.logo:nth-last-child(2){
    display: none;
  }
  header div.left {
  }
  header div.right div.top ul.mobile-menu,
  header div.right div.notification,
  header div.right div.answer {
    width: 126%;
  }
  header div.left h2 {
    font-size: 23px;
  }
  #top h3 {
    font-size: 19px;
    margin-top: 0;
  }
  #top span.icon {
    font-size: 20px;
    margin-top: 7px;
  }
  #content div.content div.box div.logo {
    width: 31%;
  }
  #testimonials div.bottom span.icon {
    background: none;
    margin-top: 172px;
  }
  footer {
    padding: 40px 0px;
  }
  footer div.middle div.bottom p {
    margin-top: 8px;
  }
  #top span.icon p {
    font-size: 15px;
  }
  #top span.icon img {
    width: 27%;
  }
  #cunsaltant div.content {
    padding: 0;
    justify-content: space-between;
  }
  #cunsaltant div.content div.item {
    margin-right: 0;
    width: 46%;
  }
  #cunsaltant div.content div.item:nth-child(4n),
  #cunsaltant div.content div.item:nth-child(5n) {
    margin-right: 0;
  }
  #profile div.middle {
    padding: 30px 0px 30px 20px;
  }
  #profile div.middle {
    display: block;
  }
  #profile div.middle div.left,
  #profile div.middle div.right {
    width: 100%;
  }
  #profile div.bottom div.services ul li h4 {
    font-size: 14px;
  }
  #profile div.bottom div.services ul li a.button,
  #profile div.bottom div.services ul li p {
    font-size: 14px;
    width: 34%;
  }
  #payement div.payement div.left div.input.checked div.details div.img {
    display: none;
  }
  #payement div.payement div.left div.input.checked div.details div.content {
    width: 100%;
  }
  #registration form {
    padding: 30px;
  }
  #registration {
    padding: 30px 25px;
  }
  #registration form div.top div.left ul li {
    display: block;
  }
  #registration form div.top div.left ul li label {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
  #registration form div.top div.left ul li label.gender {
    display: inline-block;
    margin-right: 20px;
  }
  #registration form div.top div.left ul li input[type="radio"] {
    width: 6%;
    margin-right: 0;
  }
  #registration form div.top div.left ul li label.gender.male {
    width: 14%;
  }
  #registration form div.top div.left ul li label.gender.female {
    width: 20%;
  }
  #registration form div.top div.left ul li input {
    width: 100%;
  }
  #registration form div.bottom {
    text-align: center;
  }
  #registration form div.top div.left ul li label.gender {
    margin-bottom: 0;
  }
  #signin {
    padding: 30px;
  }
  #signin div.right h3 {
    font-size: 25px;
  }
  #signin div.right {
    padding: 30px;
  }
  #signin div.right h5 {
    margin-bottom: 10px;
  }
  #signin div.right form input {
    margin-bottom: 15px;
  }
  #signin div.right form p.first {
    margin: 10px 0 7px;
  }
  #signin div.right form p {
    font-size: 15px;
  }
  header div.right div.notification,
  header div.right div.answer {
    margin-top: 210px;
  }
}
@media all and (max-width: 414px) {

	#smallcards div.content.birth_nakshatra div.box div.logo {
		width: 45%;
	  }
  body {
    padding: 30px 20px;
  }
  header div.right div.bottom a.button {
    font-size: 11px;
  }
  header div.right div.bottom div.button {
    width: 126px;
    text-align: center;
  }
  header div.right div.top ul.mobile-menu {
    width: 122%;
    top: -30px;
    right: -20px;
  }
  header div.right div.top span.close-icon {
    margin-top: -90px;
  }
  header div.right div.notification h3 {
    font-size: 19px;
    padding: 15px;
  }
  header div.right div.notification ul li {
    padding: 15px;
    display: block;
  }
  header div.right div.notification ul li div.left {
    width: 50px;
    height: 56px;
  }
  header div.right div.notification ul li div.right {
    position: relative;
  }
  header div.right div.notification ul li div.right div.top h4,
  header div.right div.notification ul li div.right div.top p,
  header div.right div.notification ul li div.right div.bottom p {
    font-size: 15px;
  }
  header div.right div.answer h3 {
    font-size: 19px;
    padding: 15px;
  }
  header div.right div.answer div.message {
    padding: 15px;
  }
  header div.right div.answer div.message div.info h4 {
    font-size: 16px;
  }
  header div.right div.answer div.message div.content {
    padding: 15px;
    font-size: 15px;
  }
  header div.right div.answer div.message div.content p.date {
    font-size: 14px;
  }
  header div.right div.notification,
  header div.right div.answer {
    width: 107%;
    right: 0;
    width: 107%;
    left: -10px;
  }
  #top h3 {
    margin-top: 7px;
  }
  #top span.icon {
    margin-top: 5px;
  }
}
@media all and (max-width: 375px) {
  #nakshatra #smallcards div.content.birth_nakshatra div.box div.logo{
    width: 90%;
  }

	#smallcards div.content.birth_nakshatra div.box div.logo {
		width: 90%;
	  }
  header div.left {
  }
  header div.right div.bottom a.button {
    font-size: 11px;
    text-align: center;
  }
  header div.right div.bottom div.button {
    width: 41%;
    margin-right: 75px;
  }
  header div.right {
    position: absolute;
    width: 100%;
  }
  #content div.content div.box div.logo {
    width: 45%;
  }
  /* #center div.box div.right div.content div.item:nth-child(2) {
    display: none;
  }
  #center div.box div.right div.content div.item {
    width: 100%;
  } */
  #cunsaltant div.content div.item {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  #cunsaltant div.content div.item:nth-child(4n),
  #cunsaltant div.content div.item:nth-child(5n) {
    margin: 0 auto 20px;
  }
  #cunsaltant div.content div.item:last-child {
    margin-bottom: 0;
  }
  #center div.box div.right div.content div.item a.btn {
    width: 150px;
    margin-top: 20px;
  }
  #profile div.bottom div.services ul li a.button,
  #profile div.bottom div.services ul li p {
    font-size: 13px;
    width: 26%;
  }
  #registration form div.top div.left ul li label.gender.male,
  #registration form div.top div.left ul li label.gender.female,
  #registration form div.top div.left ul li label.gender {
    width: 85%;
    margin-right: 0;
  }
  #registration form div.top div.left ul li label.gender.male,
  #registration form div.top div.left ul li label.gender.female {
    margin-bottom: 5px;
  }
  #registration form div.top div.left ul li input[type="radio"] {
    width: 10%;
  }
}
@media all and (max-width: 360px) {
  header div.left {
  }
  header div.right div.bottom a.button {
    font-size: 11px;
    text-align: center;
  }
  header div.right div.bottom div.button {
    width: 43%;
    margin-right: 65px;
  }
  header div.right div.top ul.mobile-menu {
    width: 122%;
    top: -30px;
    right: -20px;
  }
  header div.right div.notification,
  header div.right div.answer {
    width: 107%;
    right: 0;
    width: 107%;
    left: -10px;
  }
  #top h3 {
    margin-top: 8px;
  }
  #top span.icon {
    margin-top: 4px;
  }
  header div.right {
    position: absolute;
    width: 100%;
  }
  header div.right div.top span.close-icon {
    margin-top: -90px;
  }
  #content div.content div.box div.logo {
    width: 50%;
  }
  /* #center div.box div.right div.content div.item:nth-child(2) {
    display: none;
  }
  #center div.box div.right div.content div.item {
    width: 100%;
  } */
  #testimonials div.bottom div.items div.item img {
    width: 70px;
    height: 70px;
  }
  #testimonials div.bottom div.items h5 {
    font-size: 15px;
  }
  #testimonials div.bottom div.items p {
    margin-top: 5px;
    font-size: 14px;
  }
  #testimonials div.bottom span.icon {
    margin-top: 123px;
  }
  #center div.box div.right div.content div.item a.btn {
    width: 150px;
  }
  #center div.box div.right div.content div.item div.btn {
    margin-top: 10px;
  }
  footer div.middle div.top {
    display: block;
  }
  footer div.middle div.top div {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  footer div.middle div.top div.third {
  }
  footer div.middle div.top span {
    margin: 5px auto;
    width: 65px;
  }
  footer div.middle div.bottom p {
    font-size: 14px;
    margin-top: 10px;
  }
  #profile div.bottom div.services ul li a.button,
  #profile div.bottom div.services ul li p {
    font-size: 13px;
    width: 26%;
  }
  #payement div.payement div.left div.input.checked div.details {
    padding: 20px 0px;
  }
  #payement div.payement div.right div.top,
  #payement div.payement div.right div.bottom {
    padding: 10px;
  }
  header div.right div.notification h3 {
    font-size: 19px;
    padding: 15px;
  }
  header div.right div.notification ul li {
    padding: 15px;
    display: block;
  }
  header div.right div.notification ul li div.left {
    width: 50px;
    height: 56px;
  }
  header div.right div.notification ul li div.right {
    position: relative;
  }
  header div.right div.notification ul li div.right div.top h4,
  header div.right div.notification ul li div.right div.top p,
  header div.right div.notification ul li div.right div.bottom p {
    font-size: 15px;
  }
  header div.right div.answer h3 {
    font-size: 19px;
    padding: 15px;
  }
  header div.right div.answer div.message {
    padding: 15px;
  }
  header div.right div.answer div.message div.info h4 {
    font-size: 16px;
  }
  header div.right div.answer div.message div.content {
    padding: 15px;
    font-size: 15px;
  }
  header div.right div.answer div.message div.content p.date {
    font-size: 14px;
  }
}
@media all and (max-width: 320px) {
  #profile div.top div.right h4,
  #profile div.middle div.left div h4 {
    font-size: 15px;
  }
  #profile div.bottom div.services ul li h4 {
    font-size: 12px;
  }
  #payement
    div.payement
    div.left
    div.input.checked
    div.details
    div.content
    div.input.half {
    width: 100%;
    margin-bottom: 10px;
  }
  #payement div.payement div.right div p {
    font-size: 13px;
  }
  #payement div.payement div.right div.top h6 {
    font-size: 13px;
  }
  header div.left {
  }
  header div.right div.bottom div.button {
    margin-right: 55px;
  }
  #signin {
    padding: 30px 20px;
  }
  #signin div.right form a.button {
    width: 110px;
  }
  #signin div.right form p {
    font-size: 14px;
  }
  #testimonials div.bottom span.icon {
    display: none;
  }
  #testimonials div.bottom div.items {
    margin: 0 auto;
  }
}