/*-----------------------------------------------------------------------------
		COLLAPSIBLE updated-2026
------------------------------------------------------------------------------*/

/*=================================================================
	PAGES:
	line-form
==================================================================*/	



/*********************
		DESKTOP
**********************/	

/*------- VIDEO MODAL -------*/

	.video-modal {
		position: fixed;
		inset: 0;
		background: #fff;
		display: none;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		font-size: 0;
		color: #fff;
	}

	.video-modal.active {
		display: flex;
	}


	.video-container {
		position: relative;
		width: 90%;
		max-width: 900px;
		aspect-ratio: 16/9;
	}

	.video-container video {
		width: 100%;
		height: 100%;
		object-fit: contain;
		background: #000;
	}

	/* Close button */
	.video-close {
		position: absolute;
		top: 24px;
		right: 24px;
		padding: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		border:none;
		background: #eeefef ;/* change color */
		display: flex;
		align-items: center;
		justify-content: center;	
		color: #222222;
		transition: all 0.3s ease-in-out;
		cursor: pointer;
	}

	.video-close:hover {
		opacity: 0.8;
	}



/*------- IMAGE MODAL -------*/
.image-modal {
	position: fixed;
	inset: 0;	
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	color:rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);	
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.image-modal.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease-in-out;		
}

.image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	height: 90%;
	border-radius: 20px;
	background: #fff;
}

.image-container img {
	width: 90%;
	height: auto;
	margin: 0 auto;
	background: none;
}

.image-close {
	position: absolute;
	top: 7%;
	right: 12%;
	padding: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #222222 ;
	color: #fff;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.image-close:hover {
	opacity: 0.8;
}

.icon-position {
	position: absolute;
	top: 7%;
	right: 12%;
	padding: 0;
}



/*------- FORM MODAL -------*/
.form-modal {
	position: fixed;
	inset: 0;	
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	color:rgba(0, 0, 0, 0);
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);	
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.form-modal.active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease-in-out;		
}

.form-container {
  	display: flex;
	justify-content: center;
	align-items: center;
	width: 60%;
	height: 80%;
	border-radius: 20px;
	background: #fff;
}

.form-close {
	position: absolute;
	top: 13%;
	right: 22%;
	padding: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: #222222 ;
	color: #fff;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
}

.form-close:hover {
	opacity: 0.8;
}



/*************************
		iPad Pro
**************************/	

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

	.image-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width:90%;
		height: 60%;
		border-radius: 20px;
	}

	.image-container img {
		width: 100%;
	}

	/* Close button */
	.image-close {
		position: absolute;
		top: 22%;
		right: 8%;	
	}

	.form-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width:70%;
		height: 40%;
		border-radius: 20px;
	}

	/* Close button */
	.form-close {
		position: absolute;
		top: 32%;
		right: 18%;	
	}


}



/*************************
		iPad Air 
**************************/	

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

	.image-container {
		width: 80%;
		height: 90%;
	}

	.image-container img {
		width: 80%;
		height: auto;
		margin: 0 auto;
		background: none;
		text-align: center;
		vertical-align: bottom;	
		align-items: end;
	}

	/* Close button */
	.image-close {
		position: absolute;
		top: 7%;
		right: 13%;
	}

	.form-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width:80%;
		height: 40%;
		border-radius: 20px;
	}

	/* Close button */
	.form-close {
		position: absolute;
		top: 32%;
		right: 14%;	
	}

}



/*************************
		iPad Mini
**************************/	

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

	.form-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width:70%;
		height: 55%;
		border-radius: 20px;
	}

	/* Close button */
	.form-close {
		position: absolute;
		top: 24%;
		right: 18%;	
	}

	.video-container {
		width: 100%;
		height: 100%;
		max-width: none;
		aspect-ratio: auto;
	}

	.video-container video {
		width: 100%;
		height: 80;
		object-fit: contain; /* or cover, see note below */
	}

	.video-close {
		top: 16px;
		right: 16px;
		font-size: 28px;
	}

}



/***************************
		iPhone
****************************/	

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

	.video-container {
		position: relative;
		width: 90%;
		height: 60%;
		margin-left: 3%;
		aspect-ratio: 9/16; 
	}



	.image-modal {
		position: fixed;
		inset: 0;	
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
		color:#fff;
		background-color: #fff;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;	

	}

	.image-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 90%;
		height: 80%;
		margin-left: 3%;
		border-radius: 20px;
	}

	.image-container img {
		width: 100%;
		height: auto;
	}

	/* Close button */
	.image-close {
		position: absolute;
		top: 5%;
		right: 9%;
	}

	.form-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width:90%;
		height: 80%;
		border-radius: 20px;
	}

	/* Close button */
	.form-close {
		position: absolute;
		top: 12%;
		right: 10%;	
	}	

}