/*---------------------------------------------------------------
  CSS INDEX
  ==================
  1. Basic Styles
  2. Header Styles
  3. Banner Styles
  4. About Styles
  5. Services Styles
  6. Gallery Styles
  7. Pricing Styles
  8. Our Astrologer
  9. Faq Styles
  10. Form Styles
  11. Back to top Styles
  12. voucher 
----------------------------------------------------------------*/

@import url('astromain.css');

/* ========================
    Basic Styles
  ===========================*/
* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--prime-text);
  text-decoration: none;
}

body {
  background-color: var(--body-bg);
}

.error:not(.form-control):not(.form-check-input) {
  color: var(--prime-text);
  background-color: var(--body-bg);
  border-radius: 2px;
  font-size: var(--fs-10);
  padding: 3px 5px;
  margin: 5px 0 0 5px;
  width: 95%;
  text-transform: capitalize;
  font-family: var(--PrimaryFont);
}

/* ========================
   Header Styles
  ===========================*/

.nav-link {
  color: var(--nav-text);
  text-transform: capitalize;
  font-size: var(--fs-6);
  font-family: var(--SecondaryFont);
}

.nav-item.active a,
.nav-item:hover a {
  color: var(--prime-text);
}

/* ========================
    Banner Styles
  ===========================*/

.banner-main {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)), url(../../assets/images/banner1.webp)repeat;
  width: 100%;
  background-size: cover;
  -webkit-animation: bannerup 10s linear infinite;
  animation: bannerup 10s linear infinite;
}

@keyframes bannerup {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0px -490px;
  }
}

.banner-content {
  min-height: 80vh;
}

/* Banner img rotate */
.horoscope-main {
  position: relative;
  max-width: 100%;
}

.bhr-1 {
  width: 500px;
  -webkit-animation: hr1 40s linear infinite;
  animation: hr1 40s linear infinite;
}

.bhr-2 {
  width: 260px;
  max-width: 100%;
  position: absolute;
  top: calc(23% - 5px);
  left: calc(50% - 130px);
}

@media(max-width:1399px) {
  .bhr-1 {
    width: 300px;
  }

  .bhr-2 {
    top: calc(25% - 5px);
    width: 150px;
    left: calc(50% - 75px);
  }
}

@keyframes hr1 {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ========================
    About Styles
  ===========================*/

.abt-splide .splide__slide {
  width: 100%;
}

.abt-splide .splide__slide img {
  min-height: 100%;
  max-height: 600px;
  width: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ========================
    Services Styles
  ===========================*/

.services-main {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)), url(../../assets/images/banner1.webp)repeat;
  width: 100%;
  min-height: 650px;
  background-size: cover;
  -webkit-animation: servicebanner 10s linear infinite;
  animation: servicebanner 10s linear infinite;
  /* padding-top: 200px; */
}

@keyframes servicebanner {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0px -490px;
  }
}

.service_card .card-img img {
  max-height: 250px;
  object-fit: contain;
}

.service_card:hover .card-img img {
  transform: scale(1.05);
  transition: 0.5s ease-in-out;
}

/* =============
      Gallery Styles
     ============= */
.grid-wrapper>div {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-wrapper a {
  width: 100%;
  height: 100%;
  position: relative;
}

.grid-wrapper>div a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.grid-wrapper .overlay {
  font-size: var(--fs-1);
  background-color: rgba(var(--dark-rgb), 0.4);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-wrapper a:hover .overlay {
  opacity: 1 !important;
}

.grid-wrapper {
  display: grid;
  grid-gap: 1.5em;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
}

.grid-wrapper .wide {
  grid-column: span 2;
}

.grid-wrapper .tall {
  grid-row: span 2;
}

.grid-wrapper .big {
  grid-column: span 2;
  grid-row: span 2;
}

/* lightbox styles */
.lb-data .lb-close {
  background: url(../../assets/images/icon/close.png) top right no-repeat;
}

.lb-nav a.lb-prev {
  background: url(../../assets/images/icon/prev.png) left 48% no-repeat;
}

.lb-nav a.lb-next {
  background: url(../../assets/images/icon/next.png) right 48% no-repeat;
}

.lb-cancel {
  background: url(../../assets/images/icon/loading.gif)no-repeat;
}

/* ========================
    Pricing Styles
  ===========================*/

.pricing-main {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)), url(../../assets/images/banner1.webp)repeat;
  width: 100%;
  background-size: cover;
  -webkit-animation: pricebanner 10s linear infinite;
  animation: pricebanner 10s linear infinite;
  padding-top: 200px;
}

@keyframes pricebanner {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0px -490px;
  }
}

.inner-price {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)), url(../../assets/images/pricebanner.webp)repeat;
  min-height: 500px;
  background-position: center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ==========================
      Our Astrologer
  ========================== */
.astro-card {
  position: relative;
  overflow: hidden;
}

.astro-card img {
  height: 350px;
  object-fit: cover;
  object-position: top;
}

.asto-card-body {
  background-color: rgba(var(--dark-rgb), 0.5);
  opacity: 0;
  position: absolute;
  z-index: 99;
  width: 100%;
  height: 100%;
  top: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  transition: 0.3s ease;
  transition-delay: 0.10;

}

.astro-card:hover .asto-card-body {
  opacity: 1;
  top: 0;
  padding: 15px;
  cursor: pointer;

}

/* ==========================
      Faq Styles
  ========================== */
.faq-main {
  background: linear-gradient(0deg, rgba(var(--dark-rgb), 0.7), rgba(var(--dark-rgb), 0.7)), url(../../assets/images/banner1.webp)repeat;
  width: 100%;
  min-height: 650px;
  background-size: cover;
  -webkit-animation: faqbanner 10s linear infinite;
  animation: faqbanner 10s linear infinite;
  padding-top: 200px;
}

@keyframes faqbanner {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0px -490px;
  }
}

.faq-container {
  max-width: 1096px;
  margin: auto;
}

.faq-container .accordion-button {
  background-color: unset;
  box-shadow: unset;
  border: 0px;
  color: var(--heading-text);
  font-size: var(--fs-5);
}

.faq-container .accordion-item {
  background-color: unset;
  color: var(--para-text);
  /* border-color: var(--prime-border); */
  border: 1px solid var(--prime-border);
  border-radius: 5px;
  margin-bottom: 15px;
  font-family: var(--PrimaryFont);
}

.accordion-button.collapsed::after {
  background-image: unset;
  content: '\f078';
  font-family: 'FontAwesome';
  color: var(--prime-text);
  font-size: var(--fs-6);
}

.accordion-button:not(.collapsed)::after {
  background-image: unset;
  content: '\f078';
  font-family: 'FontAwesome';
  transform: rotate(-180deg);
  color: var(--prime-text);
  font-size: var(--fs-6);
}

/* ==========================
    Form Styles
  ========================== */
input,
select,
textarea {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  font-family: var(--PrimaryFont);
}

::placeholder {
  color: var(--input-text) !important;
  text-transform: capitalize;
  font-family: var(--PrimaryFont);
}

.form-select option:hover {
  background-color: var(--alt-bg) !important;
}

.form-select {
  background: url("../../assets/images/icon/chevrondown.png")no-repeat;
  background-size: 10px;
  background-position: center right 15px;
}

input[type="checkbox"] {
  border-color: var(--prime-border);
  background-color: var(--footer-bg);
  box-shadow: unset !important;
}

input[type="checkbox"]:checked,
input[type="checkbox"]:focus,
input[type="checkbox"]:active {
  border-color: var(--prime-border);
  background-color: var(--footer-bg);
  box-shadow: unset !important;
  color: var(--prime-text) !important;
}

/* ==================
    Back to top Styles
    ================== */

#backtotop {
  position: fixed;
  bottom: 150px;
  right: 15px;
  padding: 7px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}

#backtotop:hover {
  cursor: pointer;
}

#backtotop.show {
  opacity: 1;
  visibility: visible;
}

/* ===================
    voucher 
  ===================*/
#voucher .show {
  transition: 3s ease-in-out;
}

.coupon {
  border: 1px dashed var(--prime-border) !important;
  background-color: var(--alt-bg);
  width: 350px;
  max-width: 100%;
  margin: 0 auto;
  letter-spacing: 5px;
}

/* ===================
    colour pallete
  ===================*/
.pallete-box-main {
  position: fixed;
  top: 250px;
  right: -110px;
  z-index: 150;
  width: 150px;
  transition: 0.2s ease-in-out;
}

.pallete-box-main.active {
  right: 0px !important;
}

.pallete-2,
.pallete-2:hover,
.pallete-1:active {
  background-color: #4e3a70 !important;
  width: 30px;
  height: 30px;
}

.pallete-3,
.pallete-3:hover,
.pallete-1:active {
  background-color: #E3B130 !important;
  width: 30px;
  height: 30px;
}

/* ===================
    navbar fixed
  ===================*/
.fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: black;
  border-bottom-left-radius: 15px;
  /* Bordo inferiore sinistro stondato */
  border-bottom-right-radius: 15px;
  /* Bordo inferiore destro stondato */
}

/* ===================
    messages form
  ===================*/
div.center {
  position: absolute;
  display: flex;
  top: 150px;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
}

div.successo,
div.errore {
  min-width: 335px;
  text-align: center;
  color: white !important;
  padding: 7px;
  letter-spacing: normal !important;
  font-size: 0.8rem !important;
}

.successo {
  background-color: green;
}

.errore {
  background-color: red !important;
}