@font-face {
  font-family: 'InvoluteSans-Bold';
  src: url('InvoluteSans-Bold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'InvoluteSans-Italic';
  src: url('InvoluteSans-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'InvoluteSans-Regular';
  src: url('InvoluteSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  scroll-behavior: smooth;
  background-color: #F1F2F2 !important;
  font-family: 'InvoluteSans-Regular', sans-serif;
}

.font-bold {
  font-family: 'InvoluteSans-Bold', sans-serif;
  font-weight: bold;
}

.font-italic {
  font-family: 'InvoluteSans-Italic', sans-serif;
  font-style: italic;
}

.header-content {
  background-color: #444445;
  color: white;
  padding: 0;
  height: 12vh;
}

.section{
  width: 100%;
  min-height: 88vh;
  grid-column: 2/14;
  scroll-snap-align: start;
  scroll-snap-type: mandatory;
}

@media (min-width: 768px) {
  .section {
    width: 100%;
    height: 88vh;
    grid-column: 2/14;
  }
}

.section-full-grid {
  grid-column: 1/15 !important;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(14, minmax(0, 1fr));
}

.section-full-grid>div{
  grid-column: 2/14;
}

.section-img{
  background-size: cover;
  background-position: center;
}

.section-img-only{
  height: 88vh;
  background-size: cover;
  background-position: center;
}


@media (max-width: 768px) {
  .section-img-only {
    height: auto !important;
    background-size: cover;
    max-width: 100vw;
    min-height: 25vh;
  }
}

.img-cover{
  height: 100%;
  max-height: 88vh;
  width: 100%;
  object-fit: cover;
}

.img-contain{
  height: 100%;
  width: 100%;
  object-fit: contain;
}

.nav-link {
  color: white !important;
  margin: 0 8px;
  font-weight: 300;
}

.grid-content {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(14, minmax(0, 1fr));
}

/* Hover dropdown for desktop */
@media (min-width: 768px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* prevents jump */
  }
}

.grid-content>div {
  width: 100%;
  grid-row: 1;
}


.color-column {
  flex: 1;
  padding: 20px;
  overflow: hidden;
}

.header-grid{
  height: calc(10vh);
}

.dark-text {
  color: #434345 !important;
}

.light-text-3{
  color: #B0B2B4 !important;
}

.vertical-text{
  writing-mode:sideways-lr;
  text-orientation:sideways;
}

.dark-text-shadow {
  color: #434345;
}

.button-dark {
  background-color: #86888A;
  color: white;
}

.login-input {
  outline: none;
  box-shadow: #434345;
}

.button-gray-background {
  background-color: #B3B5B8;
}

.dropdown-menu {
  background-color: #434345 !important; /* deep dark */
  color: #434345;
}
.dropdown-menu .dropdown-item {
  color: #DFDFDE;
}
.dropdown-menu .dropdown-item:hover {
  background-color: #86888A; /* darker hover */
  color: #fff;
}

.grid-col-1 {
  background-color: #434345;
  grid-column: 1;
}

.grid-col-2 {
  background-color: #86888A;
  grid-column: 2;
}

.grid-col-3 {
  background-color: #B0B2B4;
  grid-column: 3;
}

.grid-col-4 {
  background-color: #CED1D2;
  grid-column: 4;
}

.grid-col-5 {
  background-color: #DFDFDE;
  grid-column: 5;
}

.grid-col-6 {
  background-color: #E8E7E6;
  grid-column: 6;
}

.grid-col-7 {
  background-color: #F1F1F1;
  grid-column: 7;
}

.grid-col-8 {
  background-color: #E8C9C8;
  grid-column: 8;
}

.grid-col-9 {
  background-color: #E0C7CE;
  grid-column: 9;
}

.grid-col-10 {
  background-color: #DFD5CE;
  grid-column: 10;
}

.grid-col-11 {
  background-color: #D9D3D8;
  grid-column: 11;
}

.grid-col-12 {
  background-color: #D8D7C5;
  grid-column: 12;
}

.grid-col-13 {
  background-color: #C1D6DD;
  grid-column: 13;
}

.grid-col-14 {
  background-color: #C5D6C8;
  grid-column: 14;
}

.mt-6 {
  margin-top: 4rem !important;
}

.mt-7 {
  margin-top: 5rem !important;
}

.mt-8 {
  margin-top: 6rem !important;
}

.h-inherit{
  height: inherit !important;
}


.fs-xl{
  font-size: 3.5rem;
}
.black-logo{
  height: 5rem;
}
@media (max-width: 768px) {
  .fs-xl {
    font-size: 2.5rem;
  }

  .black-logo {
    height: 2.5rem;
  }
}

.second-anim {
    animation: rotateSecond 60s linear infinite;
    animation-delay: 1s;
  }

@keyframes rotateSecond {
    from { transform: rotate(-90deg); }  /* 0 sec → 12 o’clock */
    to   { transform: rotate(270deg); }  /* 60 sec → back around */
  }