@charset "utf-8";

html {
	margin: 0;
	padding: 0;
}
header {
	width: 100%;
	height: auto;
	text-align: center;
}
body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url("../~newimagesweb/catalyst_photos_hockey.webp");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}
h1 {
	color: white;
	font-size: 5em;
	font-family: 'Montserrat', sans-serif;
}
.page-container {
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
}
.logoname {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    color: white;
    font-size: 4em;
    font-weight: 500;
}

.logoname span:first-child {
    text-align: right;
}

.logoname span:last-child {
    text-align: left;
}

.logoname img {
    display: block;
    margin: 0 auto;
	width: 25vw
}

.gap{
	height: 60vh;
}
.home-infobox-wrapper {
 	font-family: 'Montserrat', sans-serif;
 	width: 100%;
 	color: white;
 	padding: 60px 20px;
 	box-sizing: border-box;
}

.home-infobox-wrapper h2 {
	transition: all 0.3s ease;
 	text-align: center;
 	font-size: 3.1em;
 	margin-bottom: 40px;
}

.home-infobox-wrapper h2:hover {
    transform: translateY(-5px);
    color: #DA168B;
}
.home-infobox-wrapper i {
    font-size: 2.5em;       /* Bigger icons */
    color: white;            /* Icon color */
    margin: 0 15px;          /* Space between icons */
    transition: color 0.3s ease;
}

.home-infobox-wrapper i:hover {
    color: #DA168B;          /* Change color on hover */
}

.home-infobox {
 	display: flex;
	flex-wrap: wrap;
  	justify-content: center;
 	margin: 0 auto 10vh auto;
	padding: 0 5vw;
	gap: 5vw;
	align-items: stretch;
}

.home-infobox-text h2 a {
	color:white;
    text-decoration: none;
    transition: all 0.3s ease;
}
.home-infobox-text h2 a:hover {
	color: #DA168B;
	transform: scale(1.05)
}
.home-infobox-text p {
 	font-size: 1.5em;
 	line-height: 1.6;
 	margin: 0;
}
.bjj {
	max-width: 50%;
}
.home-infobox-text ul {
	font-size:  1.3em;
}
.home-infobox-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}
.home-infobox img {
	width: 35vw;
	transition: transform 0.3s ease, border 0.3s ease;
}
.home-infobox img:hover {
	border:solid #DA168B;
	box-sizing: border-box;
	transform: scale(1.05)
}
.icons {
	font-family: untitled;
}
@media (max-width:768px) {
	h1 {
		color: white;
		font-size: 4em;
		font-family: 'Montserrat', sans-serif;
	}
	.logoname {
	display: flex;
    align-items: center;
    width: 100%;
}
.logoname span {
	display: none;
	}
.logoname img {
    display: block;
    margin: 0 auto;
}
.logoname img {
	width: 40vw;
	}

.home-infobox {
    flex-direction: column;
    gap: 3vh;
}
	.home-infobox img {
		align-items: center;
		width: 80vw;
	}
		}
@media (max-width:430px) {
	.gap {
		height: 30vh;
	}
}