.home.page {
	margin: 0!important;
}
.home #page {
	padding: 0!important;
	gap: 0!important;
}

.hero-section {
	padding: 100px 42px 68px 42px;
}



.homepage-brand-term {
	width: 100%;
	background: #000;
	
	/* Add overflow hidden and transition for smooth scaling */
	overflow: hidden;
	transition: transform 0.3s ease;
	background: #FFF;
}

.brand-apex-timing { order: 1; }
.brand-sodi { order: 2; }
.brand-360karting { order: 3; }




/* Wrapper around both hero + brands */
.homepage-sections {
  display: flex;
  flex-direction: column;
  height: 100vh; /* whole screen */
  margin: 0;
  padding: 0;
}

/* Hero takes, say, 40% of the screen */
.hero-section {
  flex: 0 0 40%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Brands takes the rest (60%) */
.brands-section {
  flex: 1; /* fill remaining space */
  display: flex;
}

.brands-section__wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.homepage-brand-term {
  flex: 1; /* split into 3 equal parts */
  display: flex;
}

.homepage-brand-term a {
  flex: 1;
  display: flex;
	position: relative;
}

.homepage-brand-term img {
	 position: absolute;
    bottom: 20px;
    right: 20px;
    height: 55px;
}


/* Tablet: 2 columns (768px and up) */
@media (min-width: 768px) {
    
}
/* Desktop: 3 columns (1024px and up) */
@media (min-width: 1024px) {
    
}
/* Compact mobile version */
@media (max-width: 480px) {
 
}