/*****************************************************************************

ovo se koristi za padding sekcije, velicinu banera, contact-us baner i velicine tekstova

primer: stranica Product_Lines

*****************************************************************************/



/* GLOBAL PRODUCT LINES STYLES */



.banner {

	background-size: cover;

	height: clamp(117px, 25vw, 352px);

	display: flex;

	justify-content: center;

	align-items: center;

}



.banner h1 {

	font-size: clamp(24px, 6vw, 64px);

	font-weight: 600;

}



.section {

	padding-block: 80px;

}



.product-section {

	background-color: var(--light-grey);

}



.product-lines {

	background-color: var(--white);

	padding-block: 80px;

}



.section-heading {

	font-size: clamp(22px, 4vw, 60px);

	font-weight: 700;

}



.section-heading-2 {

	font-size: clamp(22px, 4vw, 50px);

	font-weight: 700;

}



.section-cto-text {

	font-size: clamp(22px, 4vw, 48px);

	font-weight: 700;

}



.section-title {

	font-size: clamp(14px, 2vw, 16px);

	color: var(--grey);

}



.section-text {

	font-size: clamp(14px, 2vw, 20px);

}



.section-paragraph {

	font-size: clamp(14px, 2vw, 16px);

}



.cta-section div {

	padding-block: 100px;

	padding-inline: 30px;

	background-position: top;

	background-size: cover;

	height: min-content;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

}



.cta-section button {

	font-size: 16px;

}



.cta-section .section-paragraph {

	width: min(100%, 650px);

	text-align: center;

}



.faq-section {

	padding-top: 50px;

}



.accordion {

	display: flex;

	flex-direction: column;

	gap: 16px;

}



.accordion .accordion-item,

.accordion-button {

	border-radius: 0 !important;

}



.accordion-item {

	border: none;

}



.accordion-button {

	background-color: var(--light-grey) !important;

	padding-block: 25px;

	overflow: hidden;

}



.accordion-button[aria-expanded=true] {

	background-color: var(--primary) !important;

	color: var(--white)

}



.accordion-button:focus {

	border: none;

	box-shadow: none;

	position: relative;

}



.accordion-button::after {

	background-image: none;

}



.accordion-button:not(.collapsed)::after {

	background-image: none;

	content: "";

	position: absolute;

	right: 70px;

	width: 5px;

	height: 95px;

	background-color: white;

	transform: rotate(20deg);

}



.detailed-link:link,

.detailed-link:visited {

	text-decoration: none;

	color: var(--black);

}



footer {

	margin-top: 0;

}



@media only screen and (max-width: 1280px) {

	.section {

		padding-block: 50px;

	}

}



@media only screen and (max-width: 768px) {

	.section {

		padding-block: 36px;

	}

	

	.cta-section button {

		font-size: 14px;

	}



	.accordion-button:not(.collapsed)::after {

		width: 3px;

		right: 50px;

	}

}