/*
Theme Name: woocom_th
*/
@charset "utf-8";

body {
	font-family: "Open Sans", sans-serif;
	color: #50478d;
	background-color: #ecf3f7
}

.container {
	max-width: 1200px;
}

h1, h2, h3, h4, h5 {
	font-family: "Inter", sans-serif;
}
p {
	letter-spacing: .2px;
	font-weight: 400;
}

header {
	background-color: #50478d;
}

.color {
	color: #50478d;
}

header .display-1 {
	font-size: 8rem;
	font-weight: 800;
}

button {
	font-family: "Inter", sans-serif;
	font-size: 15px!important;
	font-weight: 600!important;
	letter-spacing: .3px;
	color: #50478d!important;
}

.bgColor {
	background-color: #50478d;
}


nav {
	background-color: transparent;
	transition: .4s;
}

nav.shrink {
	background-color: #ecf3f7;
	box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

nav .logoContainer {
	height: 80px;
	width: 195px;
	transition: .4s;
	position: relative;
}
nav.shrink .logoContainer {
	height: 50px;
	width: 122px;
	transition: .4s;
}

.logoContainer img {
	height: 100%;
	width: auto;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	transition: .4s;
}

nav .logo1 {
	opacity: 0;
}
nav.shrink .logo1 {
	opacity: 1;
}
nav .logo2 {
	opacity: 1;
}
nav.shrink .logo2 {
	opacity: 0;
}

nav.homeNav  {
	background-color: #50478d;
}

.nav-link {
	font-size: 14px;
	color: #50478d;
	font-weight: 500;
	letter-spacing: .05rem;
	transition: .2s;
}

.nav-link:hover {
	color: #8577e2;
}

.homeNav .nav-link {
	font-size: 14px;
	color: #fff;
	font-weight: 500;
	letter-spacing: .05rem;
	transition: .2s;
}

.homeNav .nav-link:hover {
	color: #ffc107;
}

nav.shrink  .nav-link {
	font-size: 14px;
	color: #50478d;
	font-weight: 500;
	letter-spacing: .05rem;
	transition: .2s;
} 

nav.shrink .nav-link:hover {
	color: #8577e2;
}

.products img:nth-child(1) {
	opacity: 1;
	transition: .4s
}
.products img:nth-child(2) {	
	opacity: 0;
	transition: .4s
}

.products:hover img:nth-child(1) {
	opacity: 0;
}

.products:hover img:nth-child(2) {
	opacity: 1;
}

.productInfo {
	height: 50px;
	position: relative;
}


.priceBox {
	height: 40px;
	transition: .2s;
	position: absolute;
	top: 0;
	left: 0;
}

.btnPair {
	height: 40px;	
	opacity: 0;
	transition: .4s;
	position: absolute;
	bottom: -40px;
	left: 0;
	margin-top: 10px;
}


.products:hover .priceBox {	
	top: -20px;
	opacity: 0;
	transition: .2s;
}

.products:hover .btnPair {
	bottom: 0px;
	opacity: 1;
	transition: .4s;
}



.btnPair a {
	border: solid rgba(0,0,0,.25) 1px;
	color: #000;
	text-decoration: none;
	text-align: center;
	font-weight: 600;
	font-size: 14px;
	transition: .2s;
}
.btnPair .btn1 {
	border: solid rgba(0,0,0,.25) 1px;
	border-right: solid transparent 1px;
}

.btnPair a:hover {
	border: solid #312a67 1px!important;
	color: #312a67;
}

.videoBlock {
	background-image: url("images/bgImg.webp");
	background-size: cover;
	background-position: center center;
}

.btmDiv {
	border-top: solid #bcb9d4 1px;
	border-bottom: solid #bcb9d4 1px;
}

.smaller {
	font-size: 12px;
}

footer {
	background-color: #d0dde5;
	color: #50478d;
}

.footerLink {
	color:#50478d;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: .2s;
}

.footerLink:hover {
	color:#675daa;
	text-decoration: none;
}

.socmed {
	height: 32px;
	width: 32px;
	border-radius: 50%;
	background-color: #50478d;
	transition: .4s;
}

.socmed:hover {
	background-color: #675daa;
	box-shadow: 0px 2px 4px rgba(0,0,0,.25);
}


.scroll-btn {
  position: absolute;
  left: calc(50% - 16px);
  bottom: 3rem;
  cursor: pointer;
  animation: scroll-btn 1s ease-in-out alternate infinite;
}

.scroll-btn svg {
  fill: #F8F7F2;
  height: 50px;
  width: 32px;
}

/* Default state */
.scroll-btn svg .animated {
  animation: none;
  opacity: 0.2;
}

/* Play animation only on hover */
.scroll-btn:hover svg .animated {
  animation: scroll-down 2s infinite linear;
}

.scroll-btn svg .ball {
  animation: ball-move 1s infinite ease-in-out alternate;
}

@keyframes scroll-down {
  0% {
    stroke-dasharray: 0, 180px;
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  60% {
    opacity: 0.8;
    stroke-dasharray: 215.7737px, 363.607px;
  }
  70% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ball-move {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(16px);
    opacity: 0;
  }
}

#multiCarousel .carousel-inner .carousel-item.active,
#multiCarousel .carousel-inner .carousel-item-next,
#multiCarousel .carousel-inner .carousel-item-prev {
  display: flex;
}

@media (max-width: 767px) {
 #multiCarousel  .carousel-inner .carousel-item > div {
    display: none;
  }

 #multiCarousel  .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
	#multiCarousel .carousel-item .col-md-3 {
    flex: 0 0 100%; /* make each card take full width */
    max-width: 100%;
  }
}
/* medium and up screens */
@media (min-width: 768px) {
 #multiCarousel .carousel-inner .carousel-item-end.active,
	#multiCarousel .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

#multiCarousel .carousel-inner .carousel-item-start.active,
#multiCarousel .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}
#multiCarousel .carousel-inner .carousel-item-end,
#multiCarousel .carousel-inner .carousel-item-start {
  transform: translateX(0);
}

/* Make all cards equal height without affecting carousel animation */
#multiCarousel .carousel-item .col-md-3 {
  display: flex;
}

#multiCarousel .carousel-item .rounded-4 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Make text content fill the remaining space */
#multiCarousel .carousel-item .p-4 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* Keep reviewer name at bottom */
#multiCarousel .carousel-item h4 {
  margin-top: auto;
}

/* Optional: standardize image height */
#multiCarousel .carousel-item img.img-fluid:first-child {
  object-fit: cover;
  width: 100%;
	aspect-ratio: 1 / 1;

}

.btmImg {
	object-fit: cover;
	object-position: center top;
	height: 100%;
	width: 100%;
	aspect-ratio: 4 / 3;
}

@media screen and (max-width: 767px) {
	header .display-1 {
		font-size: 4rem;
	}
	header .fs-5 {
		font-size: 1rem!important;
	}
	nav .logoContainer {
	height: 60px;
	width: 147px;
	transition: .4s;
	position: relative;
}
	body {
		text-align: center;
	}
	
}

.subpageheader {
	height: 130px;
}

.navguide a {
	transition: .2s;
}

.navguide a:hover {
	opacity: .5;
}

.productImg {
	position: relative;
	z-index: 1;
}

.scroll-prompt {
	position: absolute;
	z-index: 998;
	width: 160px;
	height: 160px;
	top: 50%;
	left: 55%;
	transform: translate(-50%, -50%) rotate(-90deg);
	opacity: 0!important;
	transition-delay: 0s!important;
	transition: .4s;
}

.products:hover .scroll-prompt {
	opacity: 1!important;
	transition-delay: .4s!important;
}

	.scroll-prompt-arrow-container {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -18px;
		animation-name: bounce;
		animation-duration: 1.5s;
		animation-iteration-count: infinite;
	}
	.scroll-prompt-arrow {
		animation-name: opacity;
		animation-duration: 1.5s;
		animation-iteration-count: infinite;
	}
	.scroll-prompt-arrow:last-child {
		animation-direction: reverse;
		margin-top: -6px;
	}
	.scroll-prompt-arrow > div {
		width: 36px;
		height: 36px;
		border-right: 8px solid #fff;
		border-bottom: 8px solid #fff;
		transform: rotate(45deg) translateZ(1px);
		filter: drop-shadow(4px 0px 6px rgba(0,0,0,.5));
	}

@keyframes opacity {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0.1;
	}

	20% {
		opacity: 0.2;
	}

	30% {
		opacity: 0.3;
	}

	40% {
		opacity: 0.4;
	}

	50% {
		opacity: 0.5;
	}

	60% {
		opacity: 0.6;
	}

	70% {
		opacity: 0.7;
	}

	80% {
		opacity: 0.8;
	}

	90% {
		opacity: 0.9;
	}

	100% {
		opacity: 1;
	}
}

@keyframes bounce {
	0% {
		transform: translateY(0);
	}

	10% {
		transform: translateY(3px);
	}

	20% {
		transform: translateY(6px);
	}

	30% {
		transform: translateY(9px);
	}

	40% {
		transform: translateY(12px);
	}

	50% {
		transform: translateY(15px);
	}

	60% {
		transform: translateY(18px);
	}

	70% {
		transform: translateY(21px);
	}

	80% {
		transform: translateY(24px);
	}

	90% {
		transform: translateY(27px);
	}

	100% {
		transform: translateY(30px);
	}
}

/* Hide radio */
.select-input {
    display: none;
}

/* Box style */
.select-box {
    border: 1px solid #ddd;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
}

/* Hover */
.select-box:hover {
    border-color: #50478d;
}

/* Checked state */
.select-input:checked + .select-box {
    border-color: #50478d;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.saveBox {
	background-color: #50478d;
}

.addCart {
	background-color: #50478d;
	color: #fff;
	font-weight: 600;
	letter-spacing: 1px;
	transition: .4s;
}


.addCart:hover {
	background-color: #2f2763;
	color: #fff;
}

.accordion-button:not(.collapsed) {
	background-color: #ecf3f7;
}

.entry-footer, .entry-header, .post-navigation, .comment-reply-title, .comment-form, #wpadminbar {
			display: none;
		}
		html {
    		margin-top: 0 !important;
		}

		* html body { 
			margin-top: 0 !important; 
		}

		/* For mobile specific overrides */
		@media screen and (max-width: 600px) {
			html { margin-top: 0 !important; }
		}

del {
	font-weight: 200;
}
ins {
	font-weight: 600;
	text-decoration: none!important;
}
.bundle a .select-box {
	border: solid transparent 1px;
	transition: .4s;
}
.bundle a:hover .select-box {
	border: solid #50478d 1px;
	filter: drop-shadow(0 6px 4px rgba(0,0,0,.25));
}