/*
==================================================
CONTACT
Mazury Hip Hop Festival Premium
==================================================
*/


/* ==================================================
   SECTION
================================================== */


.contact-section {

	position:relative;

	overflow:hidden;

	padding-block:
		var(--section-padding);

	background:

		radial-gradient(
			circle at 8% 15%,
			rgba(255,0,85,.16),
			transparent 38%
		),

		radial-gradient(
			circle at 92% 85%,
			rgba(0,217,255,.10),
			transparent 38%
		),

		linear-gradient(
			135deg,
			#050711 0%,
			#0b1024 50%,
			#18091d 100%
		);

	color:#fff;

	box-sizing:border-box;

}





/* ==================================================
   BACKGROUND GLOW
================================================== */


.contact-section::before {

	content:"";

	position:absolute;

	width:520px;

	height:520px;

	top:-260px;

	right:-180px;

	border-radius:50%;

	background:

		radial-gradient(
			circle,
			rgba(255,0,85,.12),
			transparent 70%
		);

	filter:blur(20px);

	pointer-events:none;

}



.contact-section::after {

	content:"";

	position:absolute;

	width:420px;

	height:420px;

	bottom:-220px;

	left:-180px;

	border-radius:50%;

	background:

		radial-gradient(
			circle,
			rgba(0,217,255,.08),
			transparent 70%
		);

	filter:blur(20px);

	pointer-events:none;

}




/* ==================================================
   WRAPPER
================================================== */


.contact-section .wrapper {

	position:relative;

	z-index:2;

	box-sizing:border-box;

}




/* ==================================================
   GRID
================================================== */


.contact-grid {

	display:grid;

	grid-template-columns:

		minmax(0,1fr)

		minmax(0,1.15fr);


	gap:2.5rem;

	align-items:stretch;

	box-sizing:border-box;

	max-width:100%;

}




/* ==================================================
   CONTACT INFO
================================================== */


.contact-info {

	display:flex;

	flex-direction:column;

	gap:1.5rem;

	min-width:0;

}




/* ==================================================
   CONTACT LIST
================================================== */


.contact-list {

	display:flex;

	flex-direction:column;

	gap:1rem;

}




/* ==================================================
   CONTACT CARD
================================================== */


.contact-card {

	position:relative;

	display:flex;

	align-items:center;

	gap:1.25rem;

	padding:1.5rem;

	min-height:120px;

	border-radius:24px;

	border:

		1px solid rgba(255,255,255,.11);


	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.015)
		),

		#101827;


	box-shadow:

		0 20px 45px rgba(0,0,0,.25);


	transition:

		transform .35s ease,

		border-color .35s ease,

		box-shadow .35s ease;


	overflow:hidden;

	box-sizing:border-box;

	max-width:100%;

}



.contact-card::before {

	content:"";

	position:absolute;

	top:0;

	left:0;

	right:0;

	height:2px;


	background:

		var(--gradient-primary);

	opacity:.8;

}



.contact-card:hover {

	transform:

		translateY(-6px);


	border-color:

		rgba(255,255,255,.25);


	box-shadow:

		0 30px 65px rgba(0,0,0,.38);

}





/* ==================================================
   ICON
================================================== */


.contact-card__icon {

	flex:

		0 0 54px;


	width:54px;

	height:54px;


	display:flex;

	align-items:center;

	justify-content:center;


	border-radius:16px;


	background:

		var(--gradient-primary);


	color:#fff;


	font-size:20px;


	box-shadow:

		0 10px 30px rgba(255,0,85,.22);

}



.contact-card:hover
.contact-card__icon {

	transform:

		scale(1.06);


	box-shadow:

		0 14px 35px rgba(255,0,85,.32);

}



.contact-card__content {

	min-width:0;

}




.contact-card__label {

	display:block;

	margin-bottom:5px;

	font-size:.68rem;

	font-weight:800;

	letter-spacing:.20em;

	text-transform:uppercase;

	color:

		rgba(255,255,255,.42);

}



.contact-card__title {

	margin:0 0 5px;

	font-size:1.25rem;

	line-height:1.25;

	color:#fff;

}



.contact-card__text {

	margin:0;

	font-size:.95rem;

	line-height:1.5;

	color:

		rgba(255,255,255,.68);

}



.contact-card__text a {

	color:

		rgba(255,255,255,.78);

	text-decoration:none;

}

/* ==================================================
   SOCIAL
================================================== */


.contact-social {

	display:flex;

	align-items:center;

	gap:12px;

}



.contact-social a {

	width:48px;

	height:48px;


	display:flex;

	align-items:center;

	justify-content:center;


	border-radius:15px;


	border:

		1px solid rgba(255,255,255,.12);


	background:

		rgba(255,255,255,.035);


	color:

		rgba(255,255,255,.72);


	text-decoration:none;


	font-size:17px;


	transition:

		transform .3s ease,

		background .3s ease,

		color .3s ease,

		border-color .3s ease,

		box-shadow .3s ease;

}



.contact-social a:hover {

	transform:

		translateY(-4px);


	background:

		var(--gradient-primary);


	border-color:

		transparent;


	color:#fff;


	box-shadow:

		0 12px 30px rgba(255,0,85,.25);

}



.contact-social .mhhf-icon {

	width:20px;

	height:20px;

	display:flex;

	align-items:center;

	justify-content:center;

}



.contact-social .mhhf-icon svg {

	width:100%;

	height:100%;

	display:block;

}




/* ==================================================
   CONTACT EXTRA
================================================== */


.contact-extra {

	background:transparent;

	border:0;

	padding-left:0;

	margin-top:.5rem;

}




/* ==================================================
   FORM WRAPPER
================================================== */


.contact-form-wrapper {

	position:relative;


	border-radius:28px;


	padding:2px;


	background:

		linear-gradient(
			135deg,
			rgba(255,0,85,.5),
			rgba(0,217,255,.22)
		);


	box-shadow:

		0 25px 70px rgba(0,0,0,.35);


	box-sizing:border-box;

	max-width:100%;

}




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


.contact-form {

	position:relative;


	display:flex;


	flex-direction:column;


	gap:1.15rem;


	padding:

		2.5rem 2.25rem;


	border-radius:26px;


	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.045),
			rgba(255,255,255,.012)
		),


		#0d1422;


	box-sizing:border-box;

	max-width:100%;

}




/* ==================================================
   FORM HEADER
================================================== */


.contact-form__header {

	margin-bottom:.5rem;

}



.contact-form__eyebrow {

	display:block;


	margin-bottom:10px;


	font-size:.68rem;


	font-weight:800;


	letter-spacing:.22em;


	text-transform:uppercase;


	color:

		var(--color-primary);

}



.contact-form__header h3 {

	margin:0 0 8px;


	font-size:2rem;


	line-height:1.15;


	color:#fff;

}



.contact-form__header p {

	margin:0;


	color:

		rgba(255,255,255,.58);


	font-size:.95rem;

}




/* ==================================================
   FORM GROUP
================================================== */


.contact-form .form-group {

	display:flex;


	flex-direction:column;


	gap:8px;

}



.contact-form label {

	font-size:.72rem;


	font-weight:800;


	letter-spacing:.08em;


	text-transform:uppercase;


	color:

		rgba(255,255,255,.55);

}




/* ==================================================
   INPUTS
================================================== */


.contact-form input,
.contact-form textarea {


	width:100%;


	max-width:100%;


	box-sizing:border-box;


	border:

		1px solid rgba(255,255,255,.10);


	border-radius:14px;


	background:

		rgba(255,255,255,.045);


	color:#fff;


	font:

		inherit;


	outline:none;


	transition:

		border-color .3s ease,

		background .3s ease,

		box-shadow .3s ease;

}



.contact-form input {


	min-height:54px;


	padding:

		0 16px;

}



.contact-form textarea {


	min-height:100px;


	padding:

		14px 16px;


	resize:vertical;

}



.contact-form input:focus,
.contact-form textarea:focus {


	border-color:

		var(--color-primary);


	background:

		rgba(255,255,255,.065);


	box-shadow:

		0 0 0 3px rgba(255,0,85,.10);

}



.contact-form input::placeholder,
.contact-form textarea::placeholder {

	color:

		rgba(255,255,255,.32);

}




/* ==================================================
   BUTTON
================================================== */


.contact-form .ticket-button {


	width:100%;


	justify-content:center;


	margin-top:.35rem;


	min-height:54px;

}




/* ==================================================
   CONTACT MAP / LOCATION
================================================== */


.contact-map {

	position:relative;

	overflow:hidden;

	padding-block:var(--section-padding);

	background:

		radial-gradient(
			circle at 10% 20%,
			rgba(255,0,85,.12),
			transparent 38%
		),

		radial-gradient(
			circle at 90% 80%,
			rgba(0,217,255,.08),
			transparent 38%
		),

		#080b16;

	color:#fff;

}



.contact-map__layout {

	display:grid;

	grid-template-columns:
		minmax(260px,.65fr)
		minmax(0,1.35fr);

	gap:2rem;

	align-items:stretch;

}



.contact-map__info {

	display:flex;

	flex-direction:column;

	justify-content:center;

	padding:2rem;

	border:

		1px solid rgba(255,255,255,.10);

	border-radius:28px;

	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.018)
		),

		#101827;

	box-shadow:

		0 25px 60px rgba(0,0,0,.28);

}



.contact-map__label {

	margin-bottom:.75rem;

	font-size:.7rem;

	font-weight:800;

	letter-spacing:.2em;

	text-transform:uppercase;

	color:var(--color-primary);

}



.contact-map__heading {

	margin:0 0 .5rem;

	font-size:clamp(
		1.8rem,
		3vw,
		2.5rem
	);

	line-height:2.2;

}

.contact-map__description {

	margin:1rem 0 0;

	max-width:38ch;

	font-size:.95rem;

	line-height:1.65;

	color:rgba(255,255,255,.58);

}

.contact-map__location {

	margin:0;

	color:rgba(255,255,255,.62);

	font-size:1rem;

}



.contact-map__button {

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:.65rem;

	width:max-content;

	margin-top:2rem;

	padding:.85rem 1.15rem;

	border-radius:12px;

	background:var(--gradient-primary);

	color:#fff;

	font-weight:700;

	text-decoration:none;

	transition:

		transform .3s ease,

		box-shadow .3s ease;

}



.contact-map__button:hover {

	transform:translateY(-3px);

	box-shadow:

		0 12px 30px rgba(255,0,85,.25);

}



.contact-map__frame {

	position:relative;

	min-height:420px;

	overflow:hidden;

	border-radius:28px;

	border:

		1px solid rgba(255,255,255,.12);

	background:#111827;

	box-shadow:

		0 25px 60px rgba(0,0,0,.35);

}



.contact-map__frame iframe {

	display:block;

	width:100%;

	height:100%;

	min-height:420px;

	border:0;

	filter:

		grayscale(.35)

		contrast(1.05);

}

/* ==================================================
   CONTACT FAQ
================================================== */

.contact-faq {

	position:relative;

	overflow:hidden;

	padding-block:var(--section-padding);

	background:

		radial-gradient(
			circle at 15% 35%,
			rgba(255,0,85,.12),
			transparent 38%
		),

		radial-gradient(
			circle at 85% 65%,
			rgba(0,217,255,.08),
			transparent 40%
		),

		linear-gradient(
			180deg,
			#0b0712 0%,
			#080d1b 50%,
			#090b17 100%
		);

	color:#fff;

}

.contact-faq::before {

	content:"";

	position:absolute;

	inset:0;

	pointer-events:none;

	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.018),
			transparent 18%,
			transparent 82%,
			rgba(0,217,255,.025)
		);

}

/* ==================================================
   FAQ SECTION HEADER
================================================== */

.contact-faq .section-header__eyebrow {
	color: var(--color-primary);
}


.contact-faq .section-header__title {
	color: #fff;
}

.contact-faq .section-header {
	margin-bottom: 2.5rem;
}

.contact-faq .section-header__description {
	color: rgba(255,255,255,.58);
}

/* ==================================================
   FAQ ACCORDION
================================================== */

.contact__faq-grid {

	display:grid;

	grid-template-columns:
		repeat(2,minmax(0,1fr));

	gap:1rem;

	max-width:1100px;

	margin:0 auto;

}


.card--faq {

	position:relative;

	overflow:hidden;

	border:

		1px solid rgba(255,255,255,.10);

	border-radius:22px;

	background:

		linear-gradient(
			180deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.018)
		),

		#101827;

	box-shadow:

		0 18px 40px rgba(0,0,0,.22);

	transition:

		border-color .3s ease,

		box-shadow .3s ease;

}


.card--faq::before {

	content:"";

	position:absolute;

	top:0;

	left:0;

	right:0;

	height:2px;

	background:

		var(--gradient-primary);

	opacity:.8;

}


.card--faq.is-open {

	border-color:

		rgba(255,255,255,.20);

	box-shadow:

		0 24px 50px rgba(0,0,0,.32);

}


/* ==================================================
   FAQ TOGGLE
================================================== */


.faq-toggle {

	position:relative;

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:1rem;

	width:100%;

	padding:1.35rem 1.5rem;

	border:0;

	background:transparent;

	color:#fff;

	font:inherit;

	text-align:left;

	cursor:pointer;

	box-sizing:border-box;

}


.faq-toggle__title {

	display:block;

	padding-right:.5rem;

	font-size:1rem;

	line-height:1.45;

	font-weight:800;

	color:#fff;

}


.faq-toggle__icon {

	flex:

		0 0 34px;

	width:34px;

	height:34px;

	display:flex;

	align-items:center;

	justify-content:center;

	border-radius:10px;

	border:

		1px solid rgba(255,255,255,.12);

	background:

		rgba(255,255,255,.035);

	color:

		rgba(255,255,255,.68);

	font-size:1.2rem;

	font-weight:400;

	transition:

		transform .3s ease,

		background .3s ease,

		color .3s ease,

		border-color .3s ease;

}


.card--faq.is-open
.faq-toggle__icon {

	background:

		var(--gradient-primary);

	border-color:transparent;

	color:#fff;

}


/* ==================================================
   FAQ ANSWER
================================================== */


.faq-answer {

	overflow:hidden;

}


.faq-answer__inner {

	padding:

		0 1.5rem 1.5rem;

	color:

		rgba(255,255,255,.62);

	font-size:.92rem;

	line-height:1.7;

}


.faq-toggle:focus-visible {

	outline:

		2px solid var(--color-primary);

	outline-offset:-3px;

}

/* ==================================================
   RESPONSIVE
================================================== */


/* ==================================================
   TABLET / MOBILE
================================================== */


@media (max-width:768px) {


	.contact-grid {

		grid-template-columns:1fr;

		gap:2rem;

		width:100%;

		max-width:100%;

	}



	.contact-section {

		padding-block:

			var(--section-padding-mobile);

	}



	.contact-info {

		gap:1.25rem;

		width:100%;

		max-width:100%;

	}



	.contact-list {

		gap:1rem;

		width:100%;

	}

  .contact-card {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: clamp(12px, 3vw, 18px);
        padding: clamp(20px, 5vw, 28px) clamp(18px, 5vw, 24px);
        min-height: 0;
        border-radius: 26px;
    }

    .contact-grid {
        gap: clamp(14px, 4vw, 20px);
    }

    .contact-card__icon {
        flex: 0 0 auto;
        width: clamp(52px, 14vw, 64px);
        height: clamp(52px, 14vw, 64px);
        margin: 0;
        border-radius: 16px;
        font-size: clamp(18px, 5vw, 20px);
    }

    .contact-card__content {
        width: 100%;
        min-width: 0;
    }

    .contact-card__label {
        margin-bottom: clamp(5px, 1.5vw, 8px);
        font-size: clamp(.68rem, 2.2vw, .8rem);
        letter-spacing: .18em;
    }

    .contact-card h3,
    .contact-card__title {
        margin: 0 0 clamp(5px, 1.5vw, 8px);
        font-size: clamp(1.2rem, 5.2vw, 1.55rem);
        line-height: 1.15;
    }

    .contact-card p,
    .contact-card__text {
        margin: 0;
        font-size: clamp(.98rem, 4.2vw, 1.15rem);
        line-height: 1.4;
    }

	.contact-extra {

		margin-top:.5rem;

	}

  .contact-team {
        margin-top: 0;
    }

    .contact-team h2 {
        font-size: 1.7rem;
        line-height: 1.2;
    }

	.contact-social {

		margin-top:0;

	}

 .contact-socials {
        margin-top: 24px;
        margin-bottom: 48px;
    }

    .contact-socials a {
        width: 58px;
        height: 58px;
    }

	.contact-social a {

		width:44px;

		height:44px;

	}



	.contact-form-wrapper {

		width:100%;

		max-width:100%;

		border-radius:24px;

		box-sizing:border-box;

	}



	.contact-form {


		padding:

			1.5rem 1.25rem;


		border-radius:22px;


		width:100%;


		max-width:100%;


		box-sizing:border-box;


	}



	.contact-form input,
	.contact-form textarea {


		width:100%;


		max-width:100%;


		box-sizing:border-box;


	}



	.contact-form__header h3 {

		font-size:1.65rem;

	}



	.contact-form textarea {

		min-height:120px;

	}



	.contact-form .ticket-button {

		width:100%;

		justify-content:center;

	}



	.map-wrapper iframe {

		height:380px;

	}

	.contact-map {

		padding-block:var(--section-padding-mobile);
	
	}
	
	
	
	.contact-map__layout {
	
		grid-template-columns:1fr;
	
		gap:1.25rem;
	
	}
	
	
	
	.contact-map__info {
	
		padding:1.5rem;
	
		border-radius:22px;
	
	}
	
	
	
	.contact-map__button {
	
		width:100%;
	
		box-sizing:border-box;
	
	}
	
	
	
	.contact-map__frame {
	
		min-height:320px;
	
		border-radius:22px;
	
	}
	
	
	
	.contact-map__frame iframe {
	
		min-height:320px;
	
	}

	.contact-faq {

		padding-block:
			var(--section-padding-mobile);

	}


	.contact__faq-grid {

		grid-template-columns:1fr;

		gap:.85rem;

	}


	.card--faq {

		padding:1.25rem;

		border-radius:18px;

	}


	.card--faq .card__title {

		font-size:1rem;

		padding-right:2.5rem;

	}


	.card--faq .card__description {

		font-size:.9rem;

	}


}





/* ==================================================
   SMALL MOBILE
================================================== */


@media (max-width:480px) {


    .contact-card {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: clamp(12px, 3vw, 16px);
        padding: clamp(18px, 5vw, 22px);
        min-height: 0;
    }

    .contact-card__icon {
        flex: 0 0 auto;
        width: 52px;
        height: 52px;
        margin: 0;
    }

	.contact-form {


		padding:

			1.25rem;

	}



	.contact-form__header h3 {

		font-size:1.4rem;

	}



	.contact-social {

		gap:10px;

	}



	.contact-social a {

		width:42px;

		height:42px;

	}

	.contact-map__info {
	
		padding:1.25rem;
	
	}
	
	
	
	.contact-map__heading {
	
		font-size:1.7rem;
	
	}
	
	
	
	.contact-map__frame,
	.contact-map__frame iframe {
	
		min-height:280px;
	
	}

}