@charset "UTF-8";
/* CSS Document */
/*
@font-face {
	font-family: 'cormorantlight_italic';
    src: url('../fonts/cormorant-italic-variablefont_wght-webfont.woff2') format('woff2'),
         url('../fonts/cormorant-italic-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}*/
:root {
--swiper-scrollbar-bg-color: rgba(212, 5, 230, 0.1);
--swiper-scrollbar-drag-bg-color: rgba(145, 13, 237, 0.5);
--swiper-navigation-color: rgba(36, 4, 67, 0.86);
--swiper-pagination-color: rgba(43, 2, 102, 1);
--swiper-pagination-bullet-inactive-color: rgba(43, 2, 102, 1);
}
.swiper {
	user-select: none;
	box-sizing: border-box;
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	padding: 0px 0px;
	padding-left:20%;
}
.swiper .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	border-radius: 30px;
}
.swiper .swiper-slide-content {
	width: 100%;
	height: 100%;
	display: flex;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	padding: 0px 0px;
	flex-direction: column;
	gap: 0px;
	align-items: center;
	justify-content: center;
}
.swiper .swiper-slide-text-script {
	color: rgba(255,114,0,1.00);
	text-align: center;
	font-size: clamp(24px, 7vw, 130px);
	line-height: 2;
	font-weight: bold;
	font-family: tangerinebold;
	text-shadow:  
	-1px -1px 3px black,
	1px -1px 1px #000,
	-1px 2px 2px yellow,
	2px 2px 1px #000;
}
/*---------------------------------------------------*/
/* flip cards */
.swiper2 {
	user-select: none;
	box-sizing: border-box;
	overflow: visible;
	width: 45vw;
	height: 65vh;
	padding: 0;
}
.swiper2 .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	box-sizing: border-box;
	border-radius: 30px;
	/*background-color: rgba(110, 14, 179, 1); /*fc46 fuchsia bg*/
}
.swiper2 .swiper-slide-content {
	width: 100%;
	height: 100%;
	margin: 2em;
	display: flex;		
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	background-image: url('../images/GoldOutlineTarotCardA.svg');
	background-size:cover; 
	background-position: center; 
	background-repeat: no-repeat; 
	padding: .5em 2em .5em 2em;
	flex-direction: column;
	gap: 0px;
	align-items: center;
	justify-content: flex-start;
}
.swiper2 .swiper-slide-text {
	color: rgba(255, 255, 255, 1);
	text-align:justify;
	font-size: clamp(12px, 3.5vw, 29px);
	line-height: 1.2;
	font-style:normal;
	overflow: hidden;
}
.swiper2 .swiper-slide-text-quote {
	font-family: cormorantlight_italic;
	font-weight:100;
	font-size: clamp(12px, 2vw, 40px);
	text-align:left;
	line-height: 1.0;
	padding: 0 4vw 1vh 4vw;
}

/*---------------------------------------------------*/
.swiper-carousel {
	position: relative;
	margin: 0 auto;
	max-width: 100%;
	overflow: visible;
}

.swiper3 {
	user-select: none;
	box-sizing: border-box;
	overflow: visible; /* Ensure overflow is visible */
	width: 100%;
	height: 100%; /* Use full viewport height */
	padding: 0;
}

.swiper3 .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 100%; /* Take full height of the swiper container */
	position: relative;
	box-sizing: border-box;
	border-radius: 30px;
	overflow: visible;
}

.swiper3 .swiper-slide-bg-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain; /* Ensure image fits within its container */
	z-index: 0;
}

.swiper3 .swiper-slide-content {
	width: auto;
	height: auto;
	display: flex;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	padding: 0;
	flex-direction: column;
	gap: 0;
	align-items: center;
	justify-content: center;
}

/* Responsive adjustments */
@media (orientation: portrait) {
    .swiper3 {
        width: 100%; /* Adjust height based on the viewport height */
    }
    
    .swiper3 .swiper-slide {
        height: 100%; /* Ensure slides take full height of the adjusted swiper container */
    }
    
    .swiper3 .swiper-slide-bg-image {
        max-width: 100%; /* Adjust max-width to ensure proper scaling */
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain; /* Ensure image fits within its container without cropping */
    }
}

@media (orientation: landscape) and (max-width: 1024px) {
    .swiper3 {
        height: 100%; /* Adjust height for smaller landscape sizes */
    }
    
    .swiper3 .swiper-slide {
        height: 100%; /* Ensure slides take full height of the adjusted swiper container */
    }
    
    .swiper3 .swiper-slide-bg-image {
        max-width: 100%; /* Adjust max-width to ensure proper scaling */
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain; /* Ensure image fits within its container without cropping */
    }
}

@media (orientation: landscape) and (min-width: 1025px) {
    .swiper3 {
        height: 90vh; /* Use a larger viewport height for larger landscape sizes */
    }
    
    .swiper3 .swiper-slide {
        height: 90vh; /* Ensure slides take full height of the swiper container */
		object-fit: cover;
    }
    
    .swiper3 .swiper-slide-bg-image {
        /*max-width: 100%; /* Adjust max-width to ensure proper scaling */
        /*max-height: 100%;* /
        width: auto;*/
        height: 90vh;
        object-fit: contain; /* Ensure image fits within its container without cropping */
    }
}

/*---------------------------------------------------*/
@media (max-width: 1350px) { /* Adjust this breakpoint as needed */
	.swiper2 {
		width:80vw;
		height: 80vh;
		padding: 0px;
	}
}