/* search */
.search {
	padding: 16px 60px;
	background-color: var(--secondary);
}

.search-form {
  position: relative;
}

.search-form input {
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #f9f8fc;
  outline: none;
  box-shadow: none;
  border: none;
  width: 598px;
  color: #0c0c24;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  padding-right: 48px;
}

.search-form img {
  position: absolute;
  width: 20px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.search-list {
  gap: 40px;
  align-items: flex-start;
}

.search-item img {
  width: 24px;
  margin-right: 12px;
}

.search-item p {
  color: #fff;
  font-family: Montserrat;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

/* breadcrum  */
.breadcrum {
  padding: 16px 60px;
  border-bottom: 1px solid #ededed;
  gap: 10px;
}

.breadcrum a {
  color: #0c0c24;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  opacity: 0.5;
}

.breadcrum img {
  width: 16px;
}

.breadcrum a.active {
  opacity: 1;
}

/* tabs */
.tabs {
  padding: 10px 60px 0;
}

.tabs a {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  padding: 16px 20px 0px;
  display: block;
}

.tabs a.active {
  font-weight: 600;
  color: #0c0c24;
}
.tabs span {
  margin-top: 26px;
  display: block;
}

	.tabs a.active span {
		width: 75%;
		height: 3px;
		background-color: var(--primary);
		margin: 0 auto;
		margin-top: 26px;
	}

/* content */
.content {
  background: #f7f7fb;
  padding: 24px 60px 120px;
}

/* about product */
#about-product {
  border-radius: 8px;
  background: #fff;
  padding: 48px 44px 44px;
}

#about-product .header p,
#about-product .header h1 {
  margin: 0;
  color: #0c0c24;
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
}

#about-product .buttons button {
  padding: 16px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  height: 52px;
  outline: none;
  border: none;
  cursor: pointer;
}

	#about-product .buttons button:nth-child(1) {
		background-color: var(--primary);
		margin-right: 16px;
		color: #fff;
	}

	#about-product .buttons button:nth-child(2) {
		color: var(--primary);
		background-color: #fff;
		border: 1px solid var(--primary);
		display: flex;
		justify-content: center;
	}

#about-product img {
  width: 24px;
  margin-right: 10px;
}

.about-product-content {
  gap: 32px;
  margin-top: 36px;
}

	.about-product-content img {
		/*height: 312px;*/
		min-width: 300px;
	}

.about-product-content > div {
  height: 312px;
  flex-grow: 1;
  width: 0;
  border-radius: 8px;
  background: rgba(7, 4, 144, 0.03);
  padding: 32px;
}

.about-product-content > div > p:nth-child(1) {
  color: #0c0c24;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
}

.about-product-content > div > p:nth-child(2) {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin-top: 16px;
  margin-bottom: 32px;
}

.about-product-content .list {
  gap: 16px 0px;
  flex-wrap: wrap;
}

.about-product-content .list > div {
  width: 50%;
  gap: 32px;
}

.about-product-content .list > div p:nth-child(1) {
  width: 106px;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.about-product-content .list > div p:nth-child(2) {
  color: #0c0c24;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

/* specifications */
#specifications {
  border-radius: 8px;
  background: #fff;
  padding: 48px 44px 44px;
  margin-top: 24px;
}

#specifications > p {
  color: #0c0c24;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
}

#specifications .list {
  display: flex;
  flex-direction: column;
  margin-top: 32px;
  gap: 32px;
}

#specifications .list > div {
  gap: 8px;
  align-items: flex-start;
}

#specifications div p:nth-child(1) {
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

#specifications .list div > div {
  border-bottom: 1px dashed #999;
  flex-grow: 1;
  height: 18px;
}

#specifications div p:nth-child(3) {
  width: 50%;
  color: #0c0c24;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
  text-align: left;
}

/* features */
#features {
  border-radius: 8px;
  background: #fff;
  padding: 48px 44px 44px;
  margin-top: 24px;
}

#features > p {
  color: #0c0c24;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
}

#features ul {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 16px;
  margin-bottom: 0px;
}

#features li {
  color: #0c0c24;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

#features span {
  padding-left: 16px;
}

/* datasheet */
#datasheet {
  border-radius: 8px;
  background: #fff;
  padding: 48px 44px 44px;
  margin-top: 24px;
}

#datasheet > p {
  color: #0c0c24;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
}

.datasheet-file {
  padding: 16px 24px;
  border-radius: 8px;
  background: rgba(7, 4, 144, 0.05);
  margin-top: 32px;
  margin-bottom: 32px;
  width: fit-content;
}

.datasheet-file img {
  width: 56px;
}

.datasheet-file .name {
  margin-left: 16px;
  margin-right: 42px;
}

.datasheet-file .name > p:nth-child(1) {
  color: #0c0c24;
  font-size: 16px;
  font-weight: 600;
  line-height: 150%;
}

.datasheet-file .name > p:nth-child(2) {
  margin-top: 8px;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.datasheet-file .download img {
  width: 18.5px;
  margin-right: 12px;
}

	.datasheet-file .download p {
		color: var(--primary);
		font-size: 16px;
		font-weight: 600;
		line-height: normal;
		cursor: pointer;
	}

#datasheet > p:nth-child(3) {
  color: #0c0c24;
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  margin-bottom: 16px;
}

.datasheet-file-content {
  padding: 24px;
  border-radius: 8px;
  background: #f8f7fc;
  height: 310px;
  overflow: auto;
}

.datasheet-file-content > div {
  width: 598px;
}

.datasheet-file-content > div p {
  color: #0c0c24;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin-top: 20px;
  margin-bottom: 10px;
}

.datasheet-file-content > div p:nth-child(2) {
  font-weight: 600;
}

/* faqs */
#faqs {
  padding: 120px 0px 0px;
}

#faqs > p {
  color: #0c0c24;
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
}

.faqs-collapse {
  margin-top: 40px;
  border-radius: 8px;
  border: 1px solid #ededed;
  background: #fff;
  padding: 0 32px;
}

.collapse-item {
  padding: 32px 0px 16px;
  border-bottom: 1px solid #ededed;
}

.collapse-item .header {
  cursor: pointer;
  margin-bottom: 16px;
}

.collapse-item .header p {
  color: #0c0c24;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  text-transform: capitalize;
}

.collapse-item .header img {
  width: 15.5px;
}

	.collapse-item .body {
		color: #333;
		font-size: 16px;
		font-weight: 400;
		line-height: 150%;
		padding-left: 16px;
		border-left: 3px solid var(--primary);
		width: 800px;
		transition: all 0.5s;
		max-height: 0px;
		overflow: hidden;
		max-width: 100%;
		font-family: Montserrat;
	}

.collapse-item.active .body {
  max-height: 500px;
}

.collapse-item.active .header img {
  transform: rotate(180deg);
}

.why-buy,
.comments {
  background-color: #fff;
}

.comments {
  padding-bottom: 120px;
}

.products {
  background: #f7f7fb;
}




#call-us {
  align-items: center;
}

.call-us-body {
  flex-direction: column;
  width: 391px;
  position: relative;
}

.call-us-body > img:nth-child(1) {
  width: 80px;
}

.call-us-body p:nth-child(2) {
  color: #0c0c24;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  margin-top: 32px;
  margin-bottom: 24px;
}

	.call-us-body p:nth-child(3) {
		color: var(--primary);
		font-size: 20px;
		font-weight: 600;
		line-height: normal;
		text-transform: capitalize;
	}

.call-us-body .close-modal {
  position: absolute;
  right: 20px;
  top: 20px;
}

/* auto complete */
.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 85%;
	left: 0;
	right: 0;
}

	.autocomplete-items div {
		padding: 10px;
		cursor: pointer;
		background-color: #f9f8fc;
		border-bottom: 1px solid #d4d4d4;
		font-family: Montserrat;
	}


		/*when hovering an item:*/
		.autocomplete-items div:hover {
			background-color: #e9e9e9;
		}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
	background-color: DodgerBlue !important;
	color: #ffffff;
}

/* slideshow */
.slideshow-container {
	max-width: 1000px;
	position: relative;
	margin: auto;
	height: unset !important;
	flex-grow: unset !important;
	width: unset !important;
	border-radius: unset !important;
	background: unset !important;
	padding: unset !important;
}

/* Hide the images by default */
.mySlides {
	display: none;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
		background-color: rgba(0,0,0,0.8);
	}


/* Fading animation */
.fade {
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade {
	from {
		opacity: .4
	}

	to {
		opacity: 1
	}
}

.slideshow-container:hover {
	scale: 1.2;
}