/*=========== TABLE OF CONTENTS ===========
1. Common CSS
2. Page CSS
==========================================*/

/*-------------------------------------
1. Common CSS
--------------------------------------*/
.industries__project--actions {
gap: 36px;
display: flex;
width: 100%;
}

.industrie__content__projects__button--showcase {
color: var(--white_a700) !important;
padding-left: 25px;
padding-right: 25px;
font-size: 20px;
height: 56px;
min-width: 152px;
border-radius: 28px !important;
@media only screen and (max-width: 1440px) {
	font-size: 17px;
}

@media only screen and (max-width: 550px) {
	padding-left: var(--space-3xl);
	padding-right: var(--space-3xl);
}
}

.industries__title--dermatology {
color: transparent !important;
background: linear-gradient(34deg, #08bbbf, #9ad63c);
background-clip: text;
@media only screen and (max-width: 1050px) {
	font-size: 40px;
}

@media only screen and (max-width: 550px) {
	font-size: 34px;
}
}

.industries__project--name {
margin-right: 26px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
@media only screen and (max-width: 1050px) {
	margin-right: 0px;
}
}

.industries__image--arrowdown {
height: 24px;
}

.industries__line {
height: 1px;
background-color: var(--white_a700);
}

/*-------------------------------------
2. Page CSS
--------------------------------------*/
.column_two-2 {gap: 92px;display: flex;flex-direction: column;padding-bottom: 100px;background: #000;padding-bottom: 200px;


@media only screen and (max-width: 1440px) {
	gap: 92px;
}

@media only screen and (max-width: 1050px) {
	gap: 69px;
}
	
@media (max-width: 991px) {
	padding-bottom: 100px;
}	
@media (max-width: 767px) {
	padding-bottom: 0;
}	

@media only screen and (max-width: 550px) {
	gap: 46px;
}
}

.row-4 {
height: 408px;
padding-top: var(--space-sm);
padding-bottom: var(--space-sm);
background-image: url(../public/images/img_group_1.png);
background-size: cover;
background-repeat: no-repeat;
@media only screen and (max-width: 1440px) {
	height: auto;
}

@media only screen and (max-width: 1050px) {
	height: auto;
}
}

.columnheadertit {
gap: var(--space-6xl);
display: flex;
flex-direction: column;
}

.main-column {
margin-left: 32px;
margin-right: 44px;
gap: var(--space-9xl);
display: flex;
flex-direction: column;
align-items: center;
@media only screen and (max-width: 1050px) {
	margin-left: 0px;
	margin-right: 0px;
}
}

.group-338 {
color: #d4d4d4ff !important;
font-family: Gill Sans !important;
font-size: 18px;
font-weight: 400;
width: 4.73px;
height: 24px;
@media only screen and (max-width: 1440px) {
	font-size: 15px;
}
}

.industrie__column {
padding-left: 56px;
padding-right: 56px;
z-index: 5;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 100px;





@media only screen and (max-width: 1440px) {
	padding-left: 20px;
	padding-right: 20px;
}

@media only screen and (max-width: 1050px) {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 70px;
	font-size: 32px;	
}
@media (max-width: 767px) {
	padding-top: 30px;
}	
}

.industrie__header {
gap: 0;
display: flex;
width: 100%;
flex-direction: column;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industrie__header .shine { opacity: 1 !important; }

.industrie__header-title {
color: white;
text-align: center;
background-clip: text;
line-height: 121%;







@media only screen and (max-width: 1050px) {
	font-size: 40px;
}

@media only screen and (max-width: 550px) {
	font-size: 34px;
}
}

.industrie__header-subtitle {
	font-size: 22px;
	line-height: 1.27;
	font-weight: 400;	
	color: #fff;
	width: 75%;
	margin: 0 auto 30px;
}

.columnvector-5 {
/* margin-top: -218px; */
position: relative;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.industrie__image {
top: -190px;
height: 510px;
z-index: 4;
width: 22%;
position: absolute;
object-fit: contain;
}

.columnvector-6 {margin-top: 80px;position: relative;align-self: stretch;



@media only screen and (max-width: 1050px) {
	margin-top: 50px;
}
}

.rowvector_three {
z-index: 3;
position: relative;
display: flex;
align-items: center;
z-index: 4;

@media only screen and (max-width: 1050px) {
	flex-direction: column;
}
}

.vector_three {height: 392px;width: 16%;object-fit: contain;position: absolute;left: 0;top: 26.5%;


@media only screen and (max-width: 1050px) {
	width: 50%;
}
}

.vector_three2 {width: 16%;max-height: 456.042px;object-fit: contain;position: absolute;top:auto;bottom: -300px;left: -100px;

	@media (max-width: 991px) {
		bottom: -190px;
	}
@media only screen and (max-width: 1050px) {
	width: 50%;
}
}

.industries__column {padding-left: var(--space-md);padding-right: var(--space-md);gap: 55px;display: flex;flex-direction: column;padding: 0px 8rem;max-width: 100%;
@media only screen and (max-width: 1440px) {


	
	
	padding-left: 20px;
	padding-right: 20px;
	height: fit-content;
	
	


}

@media only screen and (max-width: 1050px) {
	padding-left: 20px;
	padding-right: 20px;
}

@media only screen and (max-width: 550px) {
	gap: 27px;
}
}

.industries__stack {height: fit-content;position: relative; background-repeat: no-repeat; background-size: cover; border-radius: var(--radius-4xl);
    background-position: center;
@media only screen and (max-width: 1440px) {
	height: fit-content;max-height: 100%;
}

@media only screen and (max-width: 1050px) {
	height: auto;
}
}

.industries__image {height: 24px;margin-top: 170px;margin-right: 132px;position: absolute;
@media only screen and (max-width: 1440px) {
	margin-right: 0px;position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;object-fit: cover;
}

@media only screen and (max-width: 1050px) {
	margin-right: 0px;display: none;
}
}
.industries__section {height: fit-content;background-size: cover;background-repeat: no-repeat;flex;justify-content: center;align-items: flex-start;position: absolute;left: 0px;bottom: 0px;right: 0px;top: 0px;padding: 90px 56px;margin: auto;border-radius: var(--radius-4xl);position: relative;

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

	height: fit-content;
	padding-top: var(--space-10xl);
	padding-bottom: var(--space-10xl);
	position: relative;
	
}

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


	height: auto;
	padding: 20px;
	position: relative;


}

@media only screen and (max-width: 550px) {
	padding: var(--space-3xl);
}
}

.industries__content {
margin-bottom: 36px;
width: 90%;
display: flex;
justify-content: center;
align-items: flex-start;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	flex-direction: column;
	width: 100%;
}
}

.industries__column--dental {
gap: var(--space-4xl);
display: flex;
width: 48%;
flex-direction: column;
align-items: flex-start;
padding-right: 20px;
@media only screen and (max-width: 1050px) {
	width: 100%;
	padding-right: 0;
}
}

.industries__description--dental {
color: var(--gray_200) !important;
width: 86%;
line-height: 149%;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industries__projects {
gap: var(--space-15xl);
align-self: center;
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-end;
@media only screen and (max-width: 1050px) {
	align-self: stretch;
}
}

.industries__projects--dental {
gap: var(--space-11xl);
display: flex;
width: 86%;
flex-direction: column;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industries__project {
gap: var(--space-2xl);
}

.industries__project--details {
gap: var(--space-2xl);
display: flex;
align-self: stretch;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}

.industries__project--name-1 {
align-self: stretch;
display: flex;
}

.industries__line-1 {
height: 1px;
background-color: var(--white_a700);
align-self: stretch;
width: 100%;
}

.industries__description--project {
color: var(--gray_200) !important;
width: 98%;
line-height: 149%;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industries__project--additional {
gap: var(--space-5xl);
display: flex;
width: 86%;
flex-direction: column;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industries__row--dermatology {
height: 682px;
background-image: url(../public/images/img_dermatology_section.png);
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 92px 56px;
border-radius: var(--radius-4xl);
@media only screen and (max-width: 1440px) {
	height: auto;
	padding-top: var(--space-10xl);
	padding-bottom: var(--space-10xl);
}

@media only screen and (max-width: 1050px) {
	height: auto;
	padding: 20px;
}

@media only screen and (max-width: 550px) {
	padding: var(--space-3xl);
}
}

.industries__section--dermatology {
margin-bottom: 160px;
width: 92%;
display: flex;
justify-content: center;
align-items: flex-start;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	flex-direction: column;
	width: 100%;
}
}

.industries__column--dermatology {
gap: var(--space-4xl);
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
@media only screen and (max-width: 1050px) {
	align-self: stretch;
}
}

.industries__description--dermatology {
color: var(--gray_200) !important;
width: 74%;
line-height: 149%;
@media only screen and (max-width: 1440px) {
	width: 100%;
}

@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industries__projects--dermatology {
gap: 12px;
align-self: center;
width: 44%;
@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industries__expandablelist {
align-self: stretch;
flex-direction: column;
}

.expandable-projects {
margin-bottom: 68px;
display: flex;
flex: 1;
flex-direction: column;
@media only screen and (max-width: 1440px) {
	gap: var(--space-10xl);
}

@media only screen and (max-width: 1050px) {
	gap: var(--space-10xl);
}
}

.industries__project--header {
position: relative;
cursor: pointer;
}

.industries__row--header {
position: relative;
cursor: pointer;
&::before {
	content: "";
	position: absolute;
	inset: 0;
	left: auto;
	top: 50%;
	transform: translate(-50%, -50%);
	aspect-ratio: 1;
	background-image: url(../public/images/img_arrow_up.svg);
	background-repeat: no-repeat;
	background-size: 24px;
	background-position: center;
}
}

details[open] .industries__row--header::before {
background-image: url(../public/images/img_arrow_up.svg);
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
}

.industries__row--project {
margin-bottom: 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}

.industries__column--description {
gap: 12px;
display: flex;
flex-direction: column;
margin-top: 32px;
}

.vector-29 {
background-color: var(--white_a700);
width: 590px;
height: 1px;
}

.columnvector-7 {
margin-top: -286px;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
}

.vector_five {
height: 692px;
width: 16%;
object-fit: contain;
}

.column-4 {
margin-top: -352px;
position: relative;
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
}

.industrie__content-1 {
z-index: 2;
position: relative;
@media only screen and (max-width: 1440px) {
	padding-left: 20px;
	padding-right: 20px;
}

@media only screen and (max-width: 1050px) {
	padding-left: 20px;
	padding-right: 20px;
}
}

.industrie__content__stack {
height: 682px;
padding-left: var(--space-md);
padding-right: var(--space-md);
position: relative;
}

.industrie__content__image {
height: 682px;
flex: 1;
object-fit: cover;
position: absolute;
left: 0px;
bottom: 0px;
right: 0px;
top: 0px;
margin: auto;
border-radius: var(--radius-4xl);
}

.industrie__content__info {
padding-left: 56px;
padding-right: 56px;
flex: 1;
display: flex;
justify-content: center;
align-items: flex-start;
position: absolute;
top: 13%;
right: 0px;
left: 0px;
margin-left: auto;
margin-right: auto;
@media only screen and (max-width: 1050px) {
	flex-direction: column;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
}

@media only screen and (max-width: 550px) {
	padding-left: var(--space-3xl);
	padding-right: var(--space-3xl);
}
}

.industrie__content__info__column {
gap: var(--space-4xl);
display: flex;
width: 50%;
flex-direction: column;
align-items: flex-start;
@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industrie__content__projects {
gap: var(--space-5xl);
align-self: center;
width: 42%;
@media only screen and (max-width: 1050px) {
	width: 100%;
}
}

.industrie__content__projects__list {
gap: var(--space-2xl);
display: flex;
align-self: stretch;
flex-direction: column;
}

.industrie__content__projects__item {
margin-right: 14px;
gap: var(--space-3xl);
display: flex;
flex-direction: column;
@media only screen and (max-width: 1050px) {
	margin-right: 0px;
}
}

.industrie__content__projects__actions {
gap: 36px;
align-self: stretch;
display: flex;
}

.columnvector-8 {
margin-top: -72px;
position: relative;
align-self: stretch;
display: flex;
flex-direction: column;
}

.vector_seven {
height: 256px;
width: 12%;
object-fit: contain;
}

.footer-7 {
height: 704px;
margin-top: -20px;
position: relative;
}

.footer-8 {
margin-left: 38px;
margin-right: 38px;
flex: 1;
flex-direction: column;
display: flex;
align-items: center;
position: absolute;
bottom: 73%;
right: 0px;
left: 0px;
@media only screen and (max-width: 1440px) {
	margin-left: 0px;
	margin-right: 0px;
}

@media only screen and (max-width: 1050px) {
	margin-left: 0px;
	margin-right: 0px;
}
}
@media (max-width: 1199px) {
	.industrie__header-subtitle { font-size: 20px; width: 90%; margin-bottom: 15px; }
}

@media (max-width: 991px) {
	.industrie__header-subtitle { font-size: 16px; width: 95%; margin-bottom: 15px; }
}
@media only screen and (max-width: 1050px) {

.industries__projects .title {
	font-size: 22px !important;
	margin: 20px 0;
}
	
@media (max-width: 767px) {
	.industries__projects .title { font-size: 20px !important; }	
	.industrie__header-subtitle { width: 100%; margin-bottom: 10px; }	
}


.industrie__image {
	height: 510px;
	z-index: 4;
	width: 22%;
	position: absolute;
	object-fit: contain;
}
}