.heading{
    font-family:Arial, Helvetica, sans-serif;
font-size:30pt;
font-weight: bolder;
}

@font-face {
  font-family: "League Spartan";
  src: url("LeagueSpartan-VariableFont.ttf") format("truetype");
  font-style: normal;
}

body {
  font-family: "MISBHV Arial Narrow", Arial, sans-serif;
}

body{
    font-family:'League Spartan';
font-size:12pt;
font-weight: 500;
    margin:2%;
    margin-left:3%;
    margin-right:3%;
    margin-bottom:7%;
}

.body-text{
    font-size:40pt;
    float:left;
    width:25%;

}

.container1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 27%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* centers your content vertically */
  align-items: flex-start;  /* keeps content aligned left */
  background-color: white;  /* optional */
  padding: 3%;
  box-sizing: border-box;
}

.container1 img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
  
/* strong, explicit footer layout to force a horizontal row */
.site-footer {
    position: fixed;
    bottom: 20px;            /* move it slightly up from the edge */
    left: 20px;
    display: flex;       /* force flex layout */
    flex-direction: row; /* ensure horizontal layout */
    flex-wrap: nowrap;   /* prevent wrapping to new line */
    align-items: center;
    gap: 25px;
    padding: 10px 24px 10px 12px; 
    background: rgba(255,255,255,0.9); /* subtle background so icons are visible */
    width: 95%;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    z-index: 9999;           /* above other content */
    white-space: nowrap;     /* prevents line breaks inside */
  }
  
  /* link reset */
  .site-footer a {
    display: inline-flex; /* keeps link sized to its contents */
    align-items: center;
    text-decoration: none;
    border: none;
    padding: 0;
  }
  
  /* icons */
  .site-footer img {
    height: 36px;
    display: block;  /* fine inside flex children */
    border: none;
    vertical-align: middle;
    line-height: 0;  /* prevents tiny text gaps under images */
    -webkit-user-drag: none;
  }
  
  /* hover */
  .site-footer img:hover {
    transform: translateY(-3px);
    transition: transform 150ms ease, opacity 150ms ease;
    opacity: 0.95;
  }

  .footer-right {
    margin-left: auto; /* pushes this div all the way to the right */
    display: flex;
    gap: 20px;
    color: #555;
    font-size: 14px;
  }

  .footer-left {
    display: flex;
    gap: 15px; /* controls spacing between icons */
  }

  .container2 {
    margin-left: 30%;  /* space for fixed left section */
    padding-top: 1%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }
  
  .column {
    flex: 1 1 45%;     /* 2 columns per row, adjusts nicely */
    box-sizing: border-box;
  }
  
  .column img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 6px;
  }

.filter {
  color: #555;
  transition: color 0.3s;
}

.filter:hover,
.filter.active {
  color: black;
}

.gallery {
display: flex;
gap: 10px;
transition: all 0.3s ease;
}

.item {
object-fit: cover;
width: 335px;
height: 200px;
transition: opacity 0.4s ease, transform 0.4s ease;
overflow: hidden;
border-radius: 10px;
}

.hidden {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
position: absolute;
}



.hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

/*project button*/

.project-button {

}

.project-button:hover {
    transform: translateY(-3px);
    opacity: 0.95;
}

.fun-button {
  display: inline-block; /* ensures margin works */
  top: 0;
  color: black;
  padding: 10px; 
  border: 1px solid black;
  border-radius: 2px;
  position: relative;
  transition: all 0.1s ease-in;
  margin-top: 20px; /* space above */
}

.fun-button:hover {
  top: -5px;
  opacity: 0.95;
}



/*misbhv*/

.mbcontainer1 {
  padding-top: 1%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

.mbcolumn1 {
  flex: 1 95%;     /* 2 columns per row, adjusts nicely */
  box-sizing: border-box;
}

.mbcolumn1 img {
  width: 100%;
  height: 700px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}

.brand-text {
width: 90%;
margin:5%;
float:left;

}

.brand-column {
  width:66%;
  float:left;
  
}
.brand-column-left{
  width:30%;
  margin-right:3%;
  float:left;
  
}


.brand-text h1 {
  font-family: 'League Spartan';
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}

.brand-text h2 {
  font-family: 'League Spartan';
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.05em; /* Adds 0.1em of space, relative to the font size */
}

.brand-text p {
  font-family: 'League Spartan';
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
}

.black-highlight{
  background-color: black;
  padding: 5px 25px;
  color:white;
  font-size:20pt;
}

.brand-section{
  width: 100%;
  float:left;
  margin-top:3%;


}
.brand40{
  width: 35%;
  float:left;
  margin-right:5%;

}
.brand60{
  width: 60%;
  float:left;
  
  

}

.brand100{
width:100%;
float:left;

}
.brand100-image{
  width:100%;
  float:left;
  margin-top:2%;
  }

.brand-pillars{


}
.brand-overview{


}
.brand-title{
  padding-bottom:0;
  border-bottom: black solid 2px;
  width: fit-content;
  margin-bottom:-1.5rem;
font-size:2rem;
}

.typography-section{

}
.color-palette{


}
.spacer{
height:355rem;

}

body h2{
margin-bottom:-1rem;

}

/*test*/