/* ======================================
GLOBAL PAGE STYLE
====================================== */

body{
font-family:Arial;
background:#111;
color:white;
margin:0;

/* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); */
/* background: linear-gradient(-45deg,#fbc2eb, #fbc2eb, #a6c1ee); */
background: linear-gradient(-45deg, #23a6d5, #23d5ab, #ee7752, #e73c7e);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	/* height: 100vh; */
    /* height: 100vh; */
    /* background-position:0% 50%;   */
    min-height:100vh;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.section{
max-width:1000px;
margin:auto;
padding:40px 20px;
}

.section-title{
text-align:center;
margin-bottom:30px;
}



/* ======================================
CARD LAYOUT
====================================== */

.cards{
display:flex;
gap:1rem;

overflow:hidden;
}

.card{
flex:1;
cursor:pointer;
position:relative;
overflow:hidden;
border-radius:8px;

display:flex;
align-items:center;
justify-content:center;
}

.card img{
width:100%;
height:300px;
object-fit:cover;
filter:grayscale(100%);
}

.card-title{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,.7);
padding:8px 14px;
border-radius:6px;
}

.card-desc{
position:absolute;
bottom:0;
left:0;
right:0;
background:rgba(0,0,0,.7);
padding:10px;
transform:translateY(100%);
}



/* ======================================
FORM STYLE
====================================== */

form{
display:flex;
flex-direction:column;
gap:18px;
max-width:600px;
box-sizing: border-box;
padding:20px;          /* internal padding */
margin:auto;
}

input,select,textarea{
padding:10px;
border-radius:6px;
border:none;
}

/* ===================================
TEXTAREA SIZE FIX
Encourages users to actually type
=================================== */

.textarea-large{

display:block;
width:100%;
min-height:120px;

padding:12px;

border-radius:6px;
border:none;

resize:vertical;

font-family:inherit;
font-size:14px;

}

button{
padding:12px;
border:none;
background:#ff4d4d;
color:white;
cursor:pointer;
border-radius:6px;
}


.flow{
    display:flex;
flex-direction:column;
gap:14px;
}


/* ======================================
FORM FLOW VISIBILITY
====================================== */

.formFlow{
display:none;
}



/* ======================================
BACK TO TOP BUTTON
====================================== */

#backToTop{
position:fixed;
bottom:30px;
right:30px;
display:none;
background:#ff4d4d;
border:none;
padding:10px 14px;
border-radius:6px;
cursor:pointer;
}



/* ======================================
MOBILE LAYOUT
====================================== */

@media(max-width:768px){

.cards{
flex-direction:column;
height:70vh;
}

.card{
height:100%;
}


.textarea-large{
min-height:140px;
}

}