/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. buttons (small, medium, large)
05. Icons
--------------------------------------------- */

/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@charset "utf-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Use px for small, fixed-size elements like borders or shadows. Use em for typography and other scalable elements that need to change size relative to their parent element.
Use rem for scalable typography and responsive layouts that need to change size relative to the root element. */

:root {

  /* Fonts */
  --font-default: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: 'Open Sans', sans-serif;
  --font-secondary: 'Playfair Display', serif;

  /* Colors */
  /* The *-rgb color names are simply the RGB converted value of the corresponding color for use in the rgba() function */

  /* Default text color */
  /* --color-default: #7719ab; */
  --color-default-rgb: 119, 25, 171;

  /* Defult links color */
  /* --color-links: #7719ab; */
  /* --color-links-hover: #1ec3e0; */

  /* Primay colors */
  --color-primary: #7719ab;
  /* --color-primary-light: #1ec3e0;
  --color-primary-dark: #0189a1; */
}
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: 'Open Sans', sans-serif;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}
html{
     scroll-behavior: smooth;
}
html, body {
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

img {
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Open Sans', sans-serif;
}

html {
  scroll-behavior: smooth; 
}
body {
  overflow-x: hidden;
  background-color:#ffffff; 
  color: #000000; 
}
::selection {
  background: var(--color-primary);
  color: #fff;
}
::-moz-selection {
  background: var(--color-primary);
  color: #fff;
}
p{
  font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Playfair Display', serif;
}

/* Header */
section{
    padding-top: 50px;
    padding-bottom: 50px;
}
.header{
  transition: 0.2s;
}
#SDNavigationTop.navbar{
    background-color: #ffffff;
    color: #000000;  
    transition: 0.6s;
}
#SDNavigationTop.fixed-top{
    box-shadow: 0 0 5px 0px #000;
}
.navbar-brand{
    font-family: 'Playfair Display';
    font-weight: 800;
    font-size: 25px;
    text-align: center;
    color: var(--color-primary);
    transition: 0.6s;
}
.navbar-brand:focus, .navbar-brand:hover {
    color: var(--color-primary);
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--color-primary);
}
#LogoImg{
    transition: 0.6s;
}
.nav-item{
    margin-left: 20px;
}
.nav-link{
    font-weight: 600;
    color: #000;
    border: 1px solid #000;
    border-left: 12px solid var(--color-primary);
    border-radius: 8px;
    padding-right: 15px !important;
    padding-left: 15px !important;
}
.nav-link:hover {
    color: var(--color-primary);
}
@media screen and (max-width: 991px) {
  .nav-item {
    margin-left: 0;
    margin-bottom: 10px;
  }
}
@media (max-width:1199px) {
    .nav-link {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }
    .nav-item {
        margin-left: 10px;
    }
}

/* Home Section */
.box-wrapper-left {
  border: 1px solid var(--color-primary);
  border-radius: 30px;
}

.box-wrapper-left .bi-arrow-right-circle-fill::before {
  font-size: 30px;
  color: var(--color-primary);
  font-weight: 900 !important;
}

.box-wrapper-right {
  border: 1px solid var(--color-primary);
  border-radius: 30px;
}

.box-wrapper-right .bi-arrow-right-circle-fill::before {
  font-size: 30px;
  color: var(--color-primary);
  font-weight: 900 !important;
}

.box-wrapper-body{
  margin: 50px 20px;
}

.box-title{
  font-family: 'Playfair Display';
  color: #000;
  font-size: 25px;
  padding-bottom: 1rem;
}
.box-wrapper-section{
  background-color: #fff;
  padding:50px 30px;
  border: 10px solid var(--color-primary);
}

.box-wrapper-section .box-title{
  background-color: var(--color-primary);
  color: #fff;
}

@media screen and (min-width: 992px) {
  .box-wrapper-left {
      border: 10px solid var(--color-primary);
      border-right: 0;
  }
  .box-wrapper-right {
      
      border: 10px solid var(--color-primary);
      border-left: 0;
  }
}
/* Testimonial */
@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
      display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
      display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
  
  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }
  
  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}
.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
transform: translateX(0);
}
.card{
  border:none;
}
.card-img {
 
  padding: 7px;
}
.card-img img{
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: 30px;
}
.carousel-control-next-icon, .carousel-control-prev-icon{
  background-image: none;
}

/* About Section */
.blockSection .sectionHeading{
  background-color: var(--color-primary);
  padding: 10px;
  border:1px solid #f1f1f1;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  border-radius: 30px 30px 0 0;
}
.blockSection{
  padding: 0 20px;
}
.blockSection p{
  margin-bottom: 1rem;
}
.sectionBody{
  border: 2px solid #f1f1f1;
  padding: 30px 20px;
  border-radius: 0 0 30px 30px;
  /* background-position: 50% 0; 
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url("../OnTheTarotTable/assets/Images/tarotBg.png");
  background-size: cover; */
}

/* Services */
.blue-block {
  /* background-color: #f5e9fc; */
  background-color: #ffffff;
  padding: 35px 25px;
  border-radius: 10px;
  margin-bottom: 35px;
  transition: ease-in 0.2s ease-in
}
.blue-block:hover {
  background-color: var(--color-primary);
  color: #fff;
}
.blue-block h3 {
  margin-bottom: 15px;
  text-transform: capitalize;
}
.pt-10 {
  padding-top: 110px;
}
.headingBlock h1 {
  text-align: center;
  margin-bottom: 25px;
  
}
#services .headingBlock h1, .headingBlock p {
  color: #fff;
}
.headingBlock p {
  text-align: center;
  margin-bottom: 55px;
  font-weight: 600;
}
/* .exp-section{
  position: relative;
} */
.exp-section {
  /* content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0; */
  width: 100%;
  height: 100%;
  padding-top: 80px;
  padding-bottom: 80px;
  /* opacity: 0.6;
  background-image: url('../OnTheTarotTable/assets/Images/bg.png');
  background-repeat: no-repeat;*/
  background-position: 50% 0; 
  background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url("../../assets/Images/tarotBg.png");
  background-size: cover;
  background-attachment: fixed;
}

/* .headingBlock {
position: relative;
}  */
@media (max-width: 768px) {
  
  .pt-10 {
    padding-top: 0;
  }
}
/* Contact Us Section */
#contactUs{
  background-color: var(--color-primary);
}
.ctaBody{
  text-align: center;
}
.ctaBody p{
  font-size: 25px;
}
.ctaBtn{
  margin: 20px 0;
  background-color: #000;
  padding: 10px 15px;
}
.ctaBtn:hover{
  background-color: #fff;
  color:#000;
}

/* Disclaimer*/
#disclaimer{
  background-color: #E0E0E0	;
}
#disclaimer p{
  margin-bottom: 1rem;
  font-size: small;
  font-weight: 200;
}
.headingBlock h3{
  margin-bottom: 1rem;
}

/* Copyright */
.copyright{
  background-color: #B0B0B0;
  padding: 30px 50px;
  text-align: center;
}