@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
	--red:#CE1212;
	--green:#07CC25;
	--yellow: #FFDE21;
	--black:#040004;
	--white:#ffffff;
	--grey:#f8f8f8;
	--paragraph:#353535;
	--border:#7B878B;
}

::-moz-selection { 
	background-color: var(--red);
	color: white;
}

::selection {
	background-color: var(--red);
	color: white;
}

body{
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	color: var(--paragraph);
}

a, input, button, select, textarea, .transition{
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-ms-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

input:focus, button:focus, select:focus, textarea:focus, :focus{
	outline: none;
}

a{
	display: inline-block;
	text-decoration: none;
}

a:hover{
	text-decoration: none;
}

ul, ol{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

h1, h2, h3, h4, h5{
	color: var(--black);
	font-weight: 700;
	line-height: 1.5em;
}

ol{
	list-style: decimal;
	margin-left: 15px;
}

ol li{
	margin: 5px 0;
}

strong{
	font-weight: 700;
}

p{
	line-height: 1.5em;
	font-size: 16px;
}

/* Colors */

.bgGrey{
	background-color: var(--grey);
}

.bgRed{
	background-color: var(--red);
}

.blackColor{
	color: var(--black);
}

.textColor{
	color: var(--paragraph);
}

.textBorderColor{
	color: var(--border);
}

.headingColor{
	color: var(--black);
}

/* Font */

.font14{
	font-size: 14px;
}

.font12{
	font-size: 12px;
}

/* Links & Buttons */

.simpleRedLink{
	color: var(--red);
}

.simpleRedLink:hover{
	color: var(--black);
}

.simpleBlackLink{
	color: var(--black);
}

.simpleBlackLink:hover{
	color: var(--red);
}

.simpleGreyLink{
	color: var(--border);
}

.simpleGreyLink:hover{
	color: var(--red);
}

.buttonStyle{
	background-color: var(--red);
	color: white;
}

.buttonStyle:hover{
	background-color: var(--black);
}

.buttonStyleGreen{
	background-color: var(--green);
	color: white;
}

.buttonStyleGreen:hover{
	background-color: var(--black);
}

.buttonStyleBlack{
	background-color: var(--black);
	color: white;
}

.buttonStyleBlack:hover{
	background-color: var(--red);
}

/* General */

.asbtooltip{
	--bs-tooltip-bg: var(--border);
}

.iconBox40{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--border);
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	text-align: center;
	cursor: pointer;
}

.cursorPointer{
	cursor: pointer;
}

.video-wrapper {
	position: relative;
	width: 100%;
	padding-top: 85%;
}

.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.youtube-shorts-container {
	position: relative;
	padding-bottom: 177.78%; /* 16:9 aspect ratio (9/16 * 100) for Shorts */
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.youtube-shorts-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Header */

#header{
	position: sticky;
	top: 0;
}

.searchForm{
	border:1px solid var(--border);
	border-radius: 30px;
	padding: 2px 2px 2px 10px;
}

.searchForm input[type="text"]{
	border:0;
	padding: 5px;
	min-width: 500px;
	color: var(--paragraph);
}

.searchForm button{
	background-color: var(--red);
	color: white;
	border:0;
	border-radius: 30px;
	width: 34px;
	height: 34px;
}

/* SideBar */

#sideBar{
	position: sticky;
	position: -webkit-sticky;
	top: 60px;
	width: 25%;
	height: calc(100vh - 60px);
	overflow-y: scroll;
}

/* Astrologer */

.astrologerCard{

}

.activeIndicator, .notActiveIndicator{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: block;
	position: absolute;
	right: 0;
	bottom: 0;
}


/* MainArea */

#mainArea{
	overflow-y: scroll;
	height: calc(100vh - 60px);
	width: 75%;
}

/* Pagination */

.customPagination .prevNav a, .customPagination .nextNav a{
	width: 60px;
	height: 60px;
	color: var(--white);
	background-color: var(--border);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.customPagination .prevNav a:hover, .customPagination .nextNav a:hover{
	background-color: var(--red);
}

.customPagination .navsList{
	background-color: var(--border);
	border-radius: 50px;
}

.customPagination .navsList a{
	width: 60px;
	height: 60px;
	color: var(--white);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
}

.customPagination .navsList a:hover, .customPagination .navsList a.active{
	background-color: var(--white);
	color: var(--red);
}

/* Product Thumbnail Gallery*/ 

#productGallery {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

#productGallery img {
  height: auto;
  cursor: pointer;
  border: 2px solid transparent;
}

/* Custom Radio */

.relatedCustomRadio {
    opacity: 0;
    position: absolute;
}

.relatedCustomRadio:checked+label.customRadio {
    background-color: var(--black);
}

.customForm label {
    display: block;
    color: var(--white);
    background-color: var(--border);
}

.customRadio {
    padding: 5px 20px;
    text-align: center;
    background-color: var(--border);
    color: white;
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
}

.quantityIndicator button{
	background-color: var(--border);
	color: white;
	padding: 15px 5px;
	border:1px solid var(--border);
}

.quantityIndicator input{
	background-color: var(--white);
	color: var(--paragraph);
	padding: 15px 5px;
	border:none;
	text-align: center;
	width: 50px;
	border:1px solid var(--border);
}

/* Tabs */

.customTabs button{
	color: var(--border);
	background-color: transparent;
	border:none;
	padding: 10px 20px;
	font-weight: 500;
	font-size: 18px;
	border-bottom: 2px solid transparent;
}

.customTabs button.active{
	color: var(--black);
	border-bottom-color:var(--red);
}

#productTabsContent .tab-pane ul, .detailStyle ul{
	list-style: disc;
	margin: 0 0 0 15px;
}

#productTabsContent .tab-pane ul li, .detailStyle ul li{
	margin: 5px 0 5px 0px;
}

@media screen and (max-width:767px){
	#header{
		position: static;
	}
	.searchForm input[type="text"]{
		min-width: 86%;
	}
	.mobileHide, #sideBar{
		display: none;
	}
	#mainArea{
		width: auto;
		height: auto;
	}

	.mobileFooter{
		position: fixed;
		left: 0;
		bottom: 0px;
		right: 0;
		background-color: var(--grey);
		z-index: 999;
	}	

	.mobileFooter a{
		color: var(--border);
	}

	.mobileFooter a:hover, .mobileFooter a.active{
		color: var(--black);
	}
}

@media screen and (min-width:768px) and (max-width:1023px){
	#header{
		position: static;
	}
	.searchForm input[type="text"]{
		min-width: 91%;
	}
	.mobileHide, #sideBar{
		display: none;
	}
	#mainArea{
		width: auto;
		height: auto;
	}

	.mobileFooter{
		position: fixed;
		left: 0;
		bottom: 0px;
		right: 0;
		background-color: var(--grey);
		z-index: 999;
	}	

	.mobileFooter a{
		color: var(--border);
	}

	.mobileFooter a:hover, .mobileFooter a.active{
		color: var(--black);
	}

}