@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
 
@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
 
@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'FabCom';
  src: url('/css/fonts/FabCom-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}




body { margin: 0;overflow-x: hidden;overflow-y: scroll;} /*Need to figure this out*/
    h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 40px;
      font-weight: 700;      
      line-height: 37px;
      color: #707070;
    }
    p {
    	font-family: 'Mulish', sans-serif;
  		font-weight: 400;
        line-height: 26px;
        letter-spacing: -.2px;
        font-size: 16px;
        color: #707070;
    }
    .sidebar {
      position: fixed;
      top: 18px;
      left: 20px;
      width: 80px;
      height: calc(100vh - 72px);
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0;
      z-index: 1000;
      cursor: pointer;
    }
.bottom-content .explore-grid a, .bottom-content .connect-row a, .bottom-content .social-row a {
	transition: background-color .25s ease, color .25s ease;
}    
.bottom-content .explore-grid a:hover, .bottom-content .connect-row a:hover, .bottom-content .social-row a:hover{
	background-color: #EE3441;
	color: #ffffff;
	/* display: inline-block; */
	border: none;
	/* padding: 15px 30px; */
	border-radius: 22px;
	font-family: 'Mulish', sans-serif;
	font-size: 12px;
	letter-spacing: .11px;
	/* line-height: 14.4px; */
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}   

.sidebar .btn-circle:hover{
	background: #EE3441;
    color:#fff; 
}
.brain-grid .brain-card{
	    width: 100%;
    height: 250px;
}


/* ===== FabCom – form styles (namespace: fc-form-) ===== */

/* Card wrapper */
.fc-form-wrapper {
  --fc-bg: #f6f7f8;
  --fc-border: #ececec;
  --fc-radius: 14px;
  --fc-pad: 22px;
  --fc-gap: 16px;
  background: var(--fc-bg);
  border: 1px solid var(--fc-border);
  border-radius: var(--fc-radius);
  padding: calc(var(--fc-pad) * 1.2) calc(var(--fc-pad) * 1.4);
  margin-top: 40px;
}

.thank-containter{
	
}
.thank-inner{
	
}
.thank-inner h1{
	
}
.thank-inner h2{
	color: #ee3441;
}
.thank-inner h3{
	font-family: inherit;
	font-family: 'Mulish', sans-serif;
}
/* Title */
.fc-form-title {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 18px 0;
  color: #e94b55;           /* FabCom red-ish */
  font-family: 'Mulish', sans-serif;
}

/* Grid layout */
.fc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* two columns like screenshot */
  gap: var(--fc-gap);
}

/* Make the message/textarea span full width */
.fc-form-field--full {
  grid-column: 1 / -1;
}

/* Input + textarea base */
.fc-form-field input,
.fc-form-field select,
.fc-form-field textarea {
  width: 100%;
  appearance: none;
  border: 1px solid #eeeeee;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  font-size: 15px;
  line-height: 1.4;
  color: #222;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  box-sizing: border-box;
  font-family: 'Mulish', sans-serif;
}

.fc-form-field textarea {
  min-height: 150px;
  resize: vertical;
}

/* Placeholder */
.fc-form-field input::placeholder,
.fc-form-field textarea::placeholder {
  color: #b8b8b8;
}

/* Focus state */
.fc-form-field input:focus,
.fc-form-field select:focus,
.fc-form-field textarea:focus {
  outline: none;
  border-color: #ff6a5f;
  box-shadow: 0 0 0 3px rgba(255, 106, 95, 0.18);
}

/* Bottom row: button + disclaimer */
.fc-form-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
}

/* Submit button (gradient pill) */
.fc-form-button {
  /* --fc-grad-a: #e94656; */
  /* --fc-grad-b: #f17e4a; */
  /* display: inline-flex; */
  /* align-items: center; */
  gap: 12px;
  padding: 12px 22px 12px 20px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background-image: linear-gradient(90deg, var(--fc-grad-a), var(--fc-grad-b));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  /* text-transform: uppercase; */
  /* box-shadow: 0 6px 16px rgba(233, 70, 86, 0.25); */
  /* transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease; */
  width: 160px;
}

/* Optional arrow */
.fc-form-button::after {
  /* content: "→"; */
  font-size: 16px;
  line-height: 1;
  transform: translateX(0);
  transition: transform .15s ease;
}

/* Hover/active */
.fc-form-button:hover { transform: translateY(-1px); }
.fc-form-button:hover::after { transform: translateX(3px); }
.fc-form-button:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(233,70,86,0.22); }

/* Button disabled */
.fc-form-button[disabled],
.fc-form-button[aria-disabled="true"] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Disclaimer / consent copy */
.fc-form-disclaimer {
  font-size: 12px;
  line-height: 1.5;
  color: #6f6f6f;
}

/* Small rounded container corners shadow (optional) */
.fc-form-wrapper.fc-form-elevated {
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}

/* Error styles (optional hooks) */
.fc-form-field.is-error input,
.fc-form-field.is-error textarea,
.fc-form-field.is-error select {
  border-color: #e94656;
  box-shadow: 0 0 0 3px rgba(233,70,86,0.12);
}
.fc-form-error-text {
  margin-top: 6px;
  font-size: 12px;
  color: #c5212f;
}

.fc-form-button.is-loading { opacity: .8; }
  .fc-form-button.is-loading::after { content: "…"; transform: none; }
  
/* ===== Responsive ===== */
@media (max-width: 900px) {
  .fc-form-grid {
    grid-template-columns: 1fr; /* stack fields */
  }
  .fc-form-actions {
    grid-template-columns: 1fr; /* stack button over disclaimer */
  }
  .fc-form-button {
    justify-content: center;
    width: 100%;
  }
}

 
    
    /* Side bar panel, Chat gpt did this part so got to test this in all broswers, but i changed z index to be behind side bar not in front */
    .offcanvas-backdrop { display: none !important; }
    .offcanvas-panel {
      position: fixed !important;
      top: 18px !important;
      /*       left: calc(20px + 80px + 20px) !important; */
      left: -50%;
      width: 536px !important;
      height: calc(100vh - 79px) !important;
      background: rgba(255, 255, 255, 0.84) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
      /* border-radius: 8px !important; */
      border: none !important;
      flex-direction: column;
      padding: 20px 20px 20px 20px;
      z-index: 999 !important;
      border-top-left-radius: 0px;
      /* opacity: 0;*/
      transform: translateX(-100%);
      transition: transform 0s ease-in-out, opacity 0s ease-in-out;
      will-change: transform, opacity;
      justify-content: space-between;
      transition: .5s;
      display:flex!important;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-Light.woff2') format('woff2');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-LightItalic.woff2') format('woff2');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-Regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-RegularItalic.woff2') format('woff2');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-Medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-MediumItalic.woff2') format('woff2');
      font-weight: 500;
      font-style: italic;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-SemiBold.woff2') format('woff2');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-SemiBoldItalic.woff2') format('woff2');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-Bold.woff2') format('woff2');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
}
      @font-face {
  font-family: 'FabCom';
      src: url('/css/fonts/FabCom-BoldItalic.woff2') format('woff2');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
}
      body { margin: 0;
      overflow-x: hidden;
      overflow-y: scroll;} /*Need to figure this out*/
      h2 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 37px;
      color: #707070;
    }
      p {
     font-family: 'Mulish', sans-serif;
      font-weight: 400;
      line-height: 26px;
      letter-spacing: -.2px;
      font-size: 16px;
      color: #707070;
    }
    .sidebar {
      position: fixed;
      top: 18px;
      left: 20px;
      width: 80px;
      height: calc(100vh - 72px);
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 1rem 0;
      z-index: 1000;
      cursor: pointer;
    }
    /* Side bar panel, Chat gpt did this part so got to test this in all broswers, but i changed z index to be behind side bar not in front */
    .offcanvas-backdrop {
      display: none !important; }
    .offcanvas-panel {
      position: fixed !important;
      top: 18px !important;
      /*       left: calc(20px + 80px + 20px) !important; */
      left: -580px;
      width: 536px !important;
      height: calc(100vh - 72px) !important;
      background: rgba(255, 255, 255, 0.4) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
      border-radius: 8px !important;
      border: none !important;
      flex-direction: column;
      padding: 20px 20px 20px 20px;
      z-index: 999 !important;
      /* opacity: 0;*/
      transform: translateX(-100%);
      transition: transform 0s ease-in-out, opacity 0s ease-in-out;
      will-change: transform, opacity;
      justify-content: space-between;
      transition: .5s;
      display:flex!important;
    }
    .offcanvas-panel.active{
      left: 677px;
    }
 .offcanvas.show {
      opacity: 1 !important;
}
    .offcanvas.offcanvas-start{
      /* transform:translateX(-10px); */
      /* transition: transform 0.1s ease-in-out; */
    }
    .video-container {
      height: 100vh;
      width: 100vw;
      position: relative;
      overflow: hidden;
    }
    .video-container
      video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: 100%;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }
    .scroll-indicator {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: auto;
      cursor: pointer;
      z-index: 500;
    }
    .control-btn {
      position: absolute;
      right: 145px;
      bottom: 20px;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      border: none;
      transform: translateX(-50%);
      color: #fff;
      font-size: 1.2rem;
      cursor: pointer;
      z-index: 500;
    }
    .btn-circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-size: 1.5rem;
      line-height: 30px;
      padding: 0;
      background: white;
      color: #EE3441;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition:.4s;
    }
    #offcanvasPanelLabel {
      color: #58595B !important;
      font-size: 24px;
      font-weight: 400;
      font-family: 'FabCom', sans-serif;
    }
    .mt-3 {
      font-size: 16px;
      color: #58595B;
      line-height: 19.2px;
      letter-spacing: 0.97px;
      margin-top: 2rem;
      margin-bottom: 1em;
      font-family: 'FabCom', sans-serif;
    }
    .explore-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin: 0.5rem 0;
    }
    .explore-grid
      a,
    .connect-row a {
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #C4CBD6;
      border-radius: 20px;
      text-decoration: none;
      color: #58595B;
      font-family: 'Mulish', sans-serif;
      font-size: 12px;
      letter-spacing: .11px;
      line-height: 14.4px;
      font-weight: 700;
      text-align: center;
      /* padding-top: 10px; */
    }
    .connect-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      margin: 0.5rem 0;
    }
    .bottom-content {
      margin-top: auto;
    }
    .social-row {
      display: flex;
      gap: 0.5rem;
      margin-top: 2rem;
    }
    .social-row
      a {
      width: 33px;
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #C4CBD6;
      border-radius: 50%;
      color: #58595B;
      text-decoration: none;
      font-size: 1rem;
    }
    .info-section {
      padding: 120px;
      overflow: hidden; }
    .info-section .inner {
      display: flex;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 25px;
      width: 100%;
    }
    .info-left {
      flex: 0 0 35%;
      padding-right: 20px; }
    .info-left
      h2 { margin-bottom: 1rem;
      margin-top:0; }
    .divider {
      width: 2px;
      background: #DDDDDD;
      margin: 0 20px; }
    .info-right {
      flex: 1;
      padding-left: 20px; }
    .info-right
      img { width: 100%;
      max-width: 570px;
      height: auto;
      display: block;
      margin-bottom: 1rem; }
    .info-right
      p { margin-bottom: 1rem;
      max-width: 570px; }
    .red-h {
      font-size: 38px;
      line-height: 37px;
      margin-top: 10px;
      color: #EE3441;
      font-family: 'Mulish', sans-serif;
      font-weight: 400;
    }
    .fab-button-main {
      background: linear-gradient(135deg, #C41230 25%, #EE3441 75%, #F0533F 100%);
      color: #ffffff;
      display: inline-block;
      border: none;
      padding: 15px 30px;
      border-radius: 22px;
      font-family: 'Mulish', sans-serif;
      font-size: 12px;
      letter-spacing: .11px;
      line-height: 14.4px;
      font-weight: 700;
      margin-top: 20px;
      text-decoration: none;
    }
    .fab-button-main:
      hover {
        background: linear-gradient(135deg, #F0533F 25%, #EE3441 75%, #C41230 100%);
      color: #fff;
      text-decoration: none;
    }
.strategy-banner {
      background: url('/uploads/strategies_background.png') no-repeat center center;
      background-size: cover;
      padding: 60px 0;
      color: white;
      padding: 120px;
}

.strategy-inner {
      display: flex;
      align-items: flex-start;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 25px;
      gap: 20px;
}

.strategy-left {
      flex: 0 0 19%; /* ≈200px of 1100px */
}

.brain-filter {
      position: relative;
      display: inline-block;
}

.filter-icon {
      background-color: #F5F5F5;
      color: #EE3441;
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      cursor: pointer;
}

.filter-panel {
      display: none;
      position: absolute;
      top: 0;
      left: 50px;
      background: #e9ebed;
      border-radius: 8px;
      padding: 20px;
      width: 100%;
      max-width: 180px;
      z-index: 100;
      font-family: Arial, sans-serif;
}

.filter-panel
      h4 {
    margin: 20px 0;
      font-size: 10px;
      letter-spacing: .97px;
      font-weight: bold;
      color: #58595B;
      text-transform: uppercase;
      font-family: 'FabCom', sans-serif;
}

.filter-panel
      label {
  font-size: 13px;
      margin: 8px 0 3px;
      display: block;
      color: #333;
}

.filter-panel
      select {
    width: 100%;
      max-width: 164px;
      padding: 8px;
      margin-bottom: 10px;
      border: none;
      background: transparent;
      border-bottom: 1px solid #707070;
      font-size: 12px;
      line-height: 14px;
      font-family: 'Mulish', sans-serif;
      color: #707070;
}

.filter-panel
      option {
  width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      background: transparent;
      color: #333;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;        
}

.filter-panel
      option {
  background: transparent;
      color: #707070;
      font-size: 12px;
      line-height: 14px;
      font-family: 'Mulish', sans-serif;
      padding: 6px;
}

.filter-panel
      option:hover,
.filter-panel option:focus,
.filter-panel option:checked {
  background-color: #C4CBD6;
      color: #707070;
}

.brain-card{
      background-size: cover;
      background-position: center;
      position: relative;
      overflow: hidden;
}

.bf-gradient{
      background-color: rgba(44, 48, 54, 0.55);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
}

.bf-category{
      position: absolute;
      top: 2em;
      left: 2.5em;
      color: #EE3441;
      font-family: 'FabCom', sans-serif;
      font-size: 14px;
      font-weight: 500;
}

.bf-title{
      color: white;
      text-decoration: none;
      font-weight: 500;
      font-family: 'Mulish', sans-serif;
      font-size: 24px;
      letter-spacing: .11px;
      text-align: left;
      padding:1.5em;
}

.strategy-left
      h1 {
  font-family: 'FabCom', sans-serif;
      font-size: 38px;
      line-height: 37px;
      color: #FFFFFF;
      margin: 0;
      position: relative;
      padding-top: 3px;
      z-index: 10;
      transition: transform 0.1s linear;
}

/*.strategy-h2s {
  position: sticky;
  top: 120px;
  overflow: hidden;
}*/

.strategy-h2s-inner {
      display: flex;
      flex-direction: column;
      transition: transform 0.4s ease;
}
.strategy-line {
      display: flex;
      align-items: center;
      font-size: 40px;
      color: #e99ea4;
      transition: color 0.3s ease;
}
.strategy-line.active {
      color: white;
}

.strategy-right {
      flex: 0 0 76%; /* ≈840px of 1100px */
      display: flex;
      flex-direction: column;
      justify-content: center;
}

.strategy-right
      h2 {
  font-family: 'Barlow Condensed', sans-serif;
      font-size: 40px;
      line-height: 38px;
      margin: 0 0 10px;
      color: #e99ea4;
      margin-bottom: 2rem}

.strategy-right
      p {
  font-family: 'Mulish', sans-serif;
      font-size: 16px;
      line-height: 26px;
      letter-spacing: -0.2px;
      margin: 0;
      color: #FFFFFF;
      max-width: 600px;
      margin-top: 0;
}

.strategy-button {
      background: #FFFFFF;
      color: #EE3441;
      display: inline-block;
      border: none;
      padding: 15px 30px;
      border-radius: 22px;
      font-family: 'Mulish', sans-serif;
      font-size: 12px;
      letter-spacing: .11px;
      line-height: 14.4px;
      font-weight: 700;
      margin-top: 20px;
      text-decoration: none;
      width: auto;
      align-self: flex-start;
}
.strategy-button:
      hover {
  background: #f5f5f5;
}
.brain-section {
      padding: 120px;
      background: #f5f5f5;
      overflow-x: visible;
}

.brain-inner {
      display: flex;
      width: 100%;
      gap: 40px;
      padding-left: 20px;
      margin-left: calc((100vw - 1340px) / 2);
}

.brain-left {
      flex: 0 0 250px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
}

.brain-left
      h2 {
  margin: 0 0 1rem;
      font-size: 40px;
      line-height: 1.1;
}

.barlow-gray {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 40px;
      color: #707070;
}

.fabcom-red {
      font-family: 'FabCom', sans-serif;
      font-size: 38px;
      line-height: 37px;
      color: #EE3441;
}

.brain-left
      p {
  font-family: 'Mulish', sans-serif;
      font-size: 16px;
      color: #707070;
      letter-spacing: -0.2px;
      line-height: 26px;
      margin-bottom: 20px;
}

.brain-left .fab-button-main {
      margin-top: 0;
      width: fit-content;
}

.brain-right {
      flex-grow: 1;
      overflow-x: auto;
      overflow-y: hidden;
      scroll-behavior: smooth;
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 20px;
      padding-left: 0;
      max-width: calc(100vw - 250px - 40px - ((100vw - 1000px) / 2));
}

.brain-right::
      -webkit-scrollbar {
  height: 8px;

}
.brain-right::
      -webkit-scrollbar-thumb {
  background: linear-gradient(to right, #C41230, #EE3441, #F0533F);
      border-radius: 4px;
}

.brain-right::
      -webkit-scrollbar-track{
    background: #e3e3e3;
      border-radius: 4px;
      margin-right: 5em;
}

/*.brain-right::-webkit-scrollbar-track {
  margin-right: 400px;
}*/

.card-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 20px;
      min-width: max-content;
}

.brain-card {
      background: #2C3036;
      color: white;
      font-family: 'Mulish', sans-serif;
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .11px;
      width: 370px;
      height: 370px;
      border-radius: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-shrink: 0;
}

.brain-card.offset {
      margin-left: 195px;
}

.brain-card.wide-tall {
      width: 175px;
      height: 287px;
      background: linear-gradient(135deg, #C41230 25%, #EE3441 75%, #F0533F 100%);
      font-size: 16px;
      line-height: 20px;
      text-align: center;
      align-items: center;
      justify-content: center;
}

.brain-card.wide-tall {
      width: 175px;
      height: 287px;
      background: linear-gradient(135deg, #C41230 25%, #EE3441 75%, #F0533F 100%);
      font-size: 16px;
      line-height: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      text-align: left;
      position: relative;
}

.brain-card.wide-tall .brain-link {
      color: #fff;
      font-family: 'FabCom', sans-serif;
      font-size: 24px;
      line-height: 34px;
      text-align: left;
      text-decoration: none;
      width: 100%;
      padding-left: 20px;
      padding-bottom: 50px;
      font-weight: 500;
}

.brain-card.wide-tall .brain-arrow {
      position: absolute;
      bottom: 40px;
      left: 20px;
      font-size: 18px;
      color: #fff;
}



.about-section {
      background: url('/uploads/video-proto-background-green.png') no-repeat center center;
      background-size: cover;
      padding: 120px;
}

.about-inner {
      display: flex;
      justify-content: flex-start;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 25px;
}

.about-content {
      width: 400px;
      margin-left: 60%;
}

.about-content
      h2 {
  margin: 0 0 1rem;
      font-size: 40px;
      line-height: 1.1;
}

.about-content
      p {
  font-family: 'Mulish', sans-serif;
      font-size: 16px;
      color: #FFFFFF;
      line-height: 26px;
      letter-spacing: -0.2px;
      margin-bottom: 20px;
}

.button-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
}

.clear-button {
      background: transparent;
      color: #FFFFFF;
      display: inline-block;
      border: 2px solid #FFFFFF;
      padding: 15px 30px;
      border-radius: 22px;
      font-family: 'Mulish', sans-serif;
      font-size: 12px;
      letter-spacing: .11px;
      line-height: 14.4px;
      font-weight: 700;
      margin-top: 20px;
      text-decoration: none;
}

.clear-button:
      hover {
  background: rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
}

.image-grid {
      display: grid;
      grid-template-columns: repeat(3, 170px);
      grid-template-rows: repeat(2, 170px);
      gap: 30px;
}

.image-grid
      img {
  width: 170px;
      height: 170px;
      object-fit: cover;
      border-radius: 10px;
}

    .deliverables-left {
      flex: 0 0 52%;
    }

    .deliverables-right {
      flex: 0 0 48%;
    }

    .deliverables-right
      h2 {
        color:#FFFFFF;
      margin-bottom: 0;
      margin-top: 0;
    }

    .deliverables-right
      p {
        color:#FFFFFF;
      margin-bottom: 0;
    }

.brain-card {
      position: relative;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      cursor: pointer;
}

/* bottom‑left container */
.bc-info {
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: left;
      color: #fff;
      background: linear-gradient(180deg, rgba(44, 48, 54, 0) 0%, rgba(44, 48, 54, 1) 100%);
      width: calc(100% - 20px);
      height: 35%;
      padding: 10px;
}

/* faculty name */
.bc-name {
      font-family: 'Barlow', sans-serif;
      font-size: 40px;
      line-height: 37px;
      text-transform: uppercase;
      margin: 0;
      width:30%;
}

/* faculty title */
.bc-title {
      font-family: 'FabCom', sans-serif;
      font-size: 14px;
      line-height: 16px;
      letter-spacing: 0.97px;
      color: #EE3441;
      margin-top: 4px;
}

/* play‑button base state */
.bc-play {
      position: absolute;
      bottom: 12px;
      right: 12px;
      width: 12px;
      height: 12px;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      cursor: pointer;
      overflow: hidden;
}

/* hide the icon until expanded */
.bc-play
      i {
  color: #fff;
      font-size: 24px;
      opacity: 0;
      transition: opacity 0.3s ease 0.1s;
}

/* hover state */
.brain-card:
      hover .bc-play {
  width: 50px;
      height: 50px;
      background: linear-gradient(
    to right,
    #C41230,
    #C41230 25%,
    #EE3441 75%,
    #F0533F
  );
}

.brain-card:
      hover .bc-play i {
  opacity: 1;
}

/* Video modal shittttttttt */
#videoModal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: none;
      z-index: 1000;
}
.modal-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url(/uploads/strategies_background.png) no-repeat center / cover;
      opacity: 0.5;
}
.modal-dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: none;
      padding: 10px;
      border-radius: 4px;
}
.modal-close {
      position: absolute;
      top: -50px;
      right: -50px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1001;
      transition: background 0.3s ease;
}

.modal-close .fa-times {
      font-size: 24px;
      background: linear-gradient(
    to right,
    #C41230,
    #C41230 25%,
    #EE3441 75%,
    #F0533F
  );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      transition: color 0.3s ease, background 0.3s ease;
}

.modal-close:
      hover {
  background: linear-gradient(
    to right,
    #C41230,
    #C41230 25%,
    #EE3441 75%,
    #F0533F
  );
}

.modal-close:
      hover .fa-times {
  background: none;
      -webkit-text-fill-color: #fff;
}

  .affiliates-container {
      width: 100%;
      margin-top: 60px;
      text-align: center;
}

.affiliates-container {
      width: 100%;
      margin-top: 60px;
      position: relative;
}

.affiliates-title-wrap {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 40px;
      text-align: left;
}

.affiliates-title {
      font-family: 'Barlow', sans-serif;
      font-size: 36px;
      line-height: 34px;
      color: #ffffff;
      font-weight: 700;
      margin-bottom: 1rem;
}

.affiliates-swiper {
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 40px;
      position: relative;
      overflow: hidden;
}

.swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100px;
}

.swiper-slide
      img {
  max-height: 56px;
      width: 90%;
      object-fit: contain;
      display: block;
}

.affiliates-arrow {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 50%;
      width: 30px;
      height: 30px;
      color: white;
      position: absolute;
      top: calc(50% + 24px);
      z-index: 10;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
}

.swiper-button-prev.affiliates-arrow {
      left: 0;
}

.swiper-button-next.affiliates-arrow {
      right: 0;
}

.affiliates-arrow
      i {
  color: white;
      font-size: 16px;
}

.swiper-button-next::
      after,
.swiper-button-prev::after {
  display: none;
}

.contact-map-section {
      background: #f5f5f5;
      padding: 120px;
}

.contact-map-inner {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      align-items: flex-start;
      gap: 100px;
      flex-wrap: wrap;
}

.contact-map-left {
      flex: 0 0 33%;
}

.contact-map-right {
      flex: 0 0 57%;
}

.contact-map-left
      h2 {
  margin-bottom: 0;
}

.contact-map-left
      p {
  font-size: 16px;
      line-height: 26px;
      color: #707070;
      font-family: 'Mulish', sans-serif;
      margin-bottom: 30px;
}

.contact-map-right
      iframe {
  height: 470px;
      border: none;
}

.location-button {
      background: transparent;
      color: #EE3441;
      display: inline-block;
      border: none;
      padding: 15px 30px;
      border-radius: 22px;
      font-family: 'Mulish', sans-serif;
      font-size: 12px;
      letter-spacing: .11px;
      line-height: 14.4px;
      font-weight: 700;
      margin-top: 20px;
      text-decoration: none;
}


/* services */
.main-content {
      margin-left: 100px;
      padding: 20px 40px;
      flex: 1;
      max-width: 1100px;
      margin: auto;
}

.hero-image {
      width: 100%;
      border-radius: 10px;
}

.breadcrumb {
      margin: 10px 0;
      font-size: 12px;
      color: #999;
      font-family: 'Mulish';
}

.breadcrumb
      a {
  text-decoration: none;
      color: #999;
}
.intro {
      display: flex;
      align-items: flex-start;
      margin-top: 20px;
      gap: 40px;
}
.intro-heading {
      flex: 0 0 auto;
      min-width: 280px;
}
.intro
      h2 {
  font-size: 28px;
      margin: 10px 0;
}

.intro .gray {
      color: #707070;
      font-family: 'Barlow Condensed';
}

.intro .red {
      color: #EE3441;
      font-family: 'Fabcom';
      font-weight: 400;
      letter-spacing: 2px;
}

.intro
      p {
  font-size: 16px;
      line-height: 1.6;
      max-width: 800px;
      font-family: 'Mulish';
}

.services-section {
      display: flex;
      margin-top: 30px;
}

.services-list {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 250px;
      font-family: 'Mulish';
      background: #F7F7F7;
      padding: 15px;
      border-radius: 10px;
}

.services-list
      li {
  padding: 10px 15px;
      cursor: pointer;
      border-left: 4px solid transparent;
      color: #707070;
}

.services-list
      li.active,
.services-list li:hover {
  background-color: #f1f1f1;
      /* border-left: 4px solid #ccc; */
      font-weight: bold;
      border-radius: 10px;
}

.service-description {
      /* background-color: #b6f0ff; */
      padding: 20px;
      margin-left: 20px;
      flex: 1;
      border-radius: 6px;
      width: calc(100% - 350px);
}

.service-description
      h3 {
  margin-top: 0;
      font-size: 18px;
      color: #707070;
      font-family: 'Barlow Condensed';
      font-size: 40px;
      margin-bottom: 0px;
}

.service-description
      p {
  font-size: 14px;
      line-height: 1.5;
}

.service-block {
      display: none;
}

.service-block.active {
      display: block;
}
.resource-links {
      display: flex;
      gap: 20px;
      justify-content: center;
      margin: 40px 0;
}

.resource-box {
      background-color: #f8f8f8;
      padding: 20px 30px;
      border-radius: 8px;
      text-align: center;
      width: 120px;
      transition: background-color 0.2s ease;
      cursor: pointer;
}

.resource-box:
      hover {
  background-color: #efefef;
}

.resource-box
      i {
  color: #e34242;
      font-size: 24px;
      margin-bottom: 10px;
      display: block;
      margin: auto;
      margin-bottom: 10px;
}

.resource-box
      span {
  display: block;
      font-size: 19px;
      font-weight: bold;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-family: 'Barlow Condensed';
}
.service-img{
      width:100%;
      margin-bottom: 15px;
}
.service-pagination {
      display: flex;
      justify-content: space-between;
      margin: 60px 0 40px;
      padding: 0 10px;
      font-family: Arial, sans-serif;
}

.service-pagination .prev,
.service-pagination .next {
      text-align: left;
      max-width: 200px;
      color: #666;
      cursor: pointer;
}

.service-pagination .next {
      text-align: right;
}

.service-pagination .label {
      font-size: 12px;
      font-weight: bold;
      text-transform: uppercase;
      margin: 0 8px;
}

.service-pagination
      i {
  font-size: 12px;
      color: #666;
}

.service-pagination .title {
      font-size: 18px;
      font-weight: bold;
      margin-top: 5px;
      line-height: 1.2;
      text-transform: uppercase;
}
      @media (max-width: 768px) {
    .sidebar {
        position: fixed;
      top: 20px;
      left: 16px;
      width: calc(100vw - 32px);
      height: 72px;
      flex-direction: row;
      justify-content: space-between;
      padding: 0.5rem 1rem;
    }
    .sidebar img:nth-child(2) {
      display: none;
    }

    .offcanvas-panel {
      top: 130px !important;
      margin: 0 auto;
      left: 16px !important;
      width: 100% !important;
      height: auto !important;
      max-height: 80vh !important;
      border-radius: 8px !important;
      transform: none !important;
    }

    .explore-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .connect-row {
      grid-template-columns: 1fr;
    }
    .offcanvas.offcanvas-top {
      width: calc(100vw - 64px) !important;
      height: fit-content !important;
    }
    .bottom-content {
      margin-top: 0;
      padding-bottom: 1rem;
    }
    .offcanvas-header {
      display: none;
    }
};
    }
    .offcanvas-panel.active{
    	left: 677px;
    }
 .offcanvas.show {
  opacity: 1 !important;
}
    .offcanvas.offcanvas-start{
    	/* transform:translateX(-10px); */
    	/* transition: transform 0.1s ease-in-out; */
    }
    .video-container {
      height: 100vh;
      width: 100vw;
      position: relative;
      overflow: hidden;
    }
    .video-container video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: 100%;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover;
    }
    .scroll-indicator {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: auto;
      cursor: pointer;
      z-index: 500;
    }
    .control-btn {
      position: absolute;
      right: 145px;
      bottom: 20px;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      border: none;
      transform: translateX(-50%);
      color: #fff;
      font-size: 1.2rem;
      cursor: pointer;
      z-index: 500;
    }
    .btn-circle {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      font-size: 1.5rem;
      line-height: 30px;
      padding: 0;
      background: white;
      color: #EE3441;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition:.4s;
    }
    #offcanvasPanelLabel {
        color: #58595B !important;
        font-size: 24px;
        font-weight: 400;
        font-family: 'FabCom', sans-serif;
    }
    .mt-3 {
        font-size: 16px;
        color: #58595B;
        line-height: 19.2px;
        letter-spacing: 0.97px;
        margin-top: 2rem;
        margin-bottom: 1em;
        font-family: 'FabCom', sans-serif;
    }
    .explore-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.5rem;
      margin: 0.5rem 0;
    }
    .explore-grid a,
    .connect-row a {
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #C4CBD6;
      border-radius: 20px;
      text-decoration: none;
      color: #58595B;
      font-family: 'Mulish', sans-serif;
      font-size: 12px;
      letter-spacing: .11px;
      line-height: 14.4px;
      font-weight: 700;
    }
    .connect-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.5rem;
      margin: 0.5rem 0;
    }
    .bottom-content {
      margin-top: auto;
    }
    .social-row {
      display: flex;
      gap: 0.5rem;
      margin-top: 2rem;
    }
    .social-row a {
      width: 33px;
      height: 33px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #C4CBD6;
      border-radius: 50%;
      color: #58595B;
      text-decoration: none;
      font-size: 1rem;
    }
    .info-section { padding: 120px; overflow: hidden; }
    .info-section .inner {
      display: flex;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 25px;
      width: 100%;
    }
    .info-left { flex: 0 0 35%; padding-right: 20px; }
    .info-left h2 { margin-bottom: 1rem; margin-top:0; }
    .divider { width: 2px; background: #DDDDDD; margin: 0 20px; }
    .info-right { flex: 1; padding-left: 20px; }
    .info-right img { width: 100%; max-width: 570px; height: auto; display: block; margin-bottom: 1rem; }
    .info-right p { margin-bottom: 1rem; max-width: 570px; }
    .red-h {
    	font-size: 38px;
        line-height: 37px;
        margin-top: 10px;
        color: #EE3441;
        font-family: 'Mulish', sans-serif;
  		font-weight: 400;
    }
    .fab-button-main {
      background: linear-gradient(135deg, #C41230 25%, #EE3441 75%, #F0533F 100%);
      color: #ffffff;
      display: inline-block;
      border: none;
      padding: 15px 30px;
      border-radius: 22px;
      font-family: 'Mulish', sans-serif;
      font-size: 12px;
      letter-spacing: .11px;
      line-height: 14.4px;
      font-weight: 700;
      margin-top: 20px;
      text-decoration: none;
    }
    .fab-button-main:hover {
        background: linear-gradient(135deg, #F0533F 25%, #EE3441 75%, #C41230 100%);
        color: #fff;
        text-decoration: none;
    }
.strategy-banner {
  background: url('/uploads/strategies_background.png') no-repeat center center;
  background-size: cover;
  padding: 60px 0;
  color: white;
  padding: 120px;
}

.strategy-inner {
  display: flex;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 25px;
  gap: 20px;
}

.strategy-left {
  flex: 0 0 19%; /* ≈200px of 1100px */
}

.brain-filter {
  position: relative;    
  display: inline-block;
}

.filter-icon {
  background-color: #F5F5F5;
  color: #EE3441;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
}

.filter-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 50px;
  background: #e9ebed;
  border-radius: 8px;
  padding: 20px;
  width: 100%;
  max-width: 180px;
  z-index: 100;
  font-family: Arial, sans-serif;
}

.filter-panel h4 {
    margin: 20px 0;
    font-size: 10px;
    letter-spacing: .97px;
    font-weight: bold;
    color: #58595B;
    text-transform: uppercase;
    font-family: 'FabCom', sans-serif;
}

.filter-panel label {
  font-size: 13px;
  margin: 8px 0 3px;
  display: block;
  color: #333;
}

.filter-panel select {
    width: 100%;
    max-width: 164px;
    padding: 8px;
    margin-bottom: 10px;
    border: none;
    background: transparent;
    border-bottom: 1px solid #707070;
    font-size: 12px;
    line-height: 14px;
    font-family: 'Mulish', sans-serif;
    color: #707070;
}

.filter-panel option {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background: transparent;     
  color: #333;
  appearance: none;           
  -webkit-appearance: none;     
  -moz-appearance: none;        
}

.filter-panel option {
  background: transparent;  
  color: #707070;
  font-size: 12px;
  line-height: 14px;
  font-family: 'Mulish', sans-serif;
  padding: 6px;
}

.filter-panel option:hover,
.filter-panel option:focus,
.filter-panel option:checked {
  background-color: #C4CBD6;  
  color: #707070;
}

.brain-card{
   background-size: cover; 
   background-position: center; 
   position: relative; 
   overflow: hidden;
}

.bf-gradient{
  background-color: rgba(44, 48, 54, 0.55); 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.bf-category{
  position: absolute;
  top: 2em;
  left: 2.5em;
  color: #EE3441;
  font-family: 'FabCom', sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.bf-title{
  color: white; 
  text-decoration: none; 
  font-weight: 500; 
  font-family: 'Mulish', sans-serif; 
  font-size: 24px; 
  letter-spacing: .11px; 
  text-align: left;
  padding:1.5em;
}

.strategy-left h1 {
  font-family: 'FabCom', sans-serif;
  font-size: 38px;
  line-height: 37px;
  color: #FFFFFF;
  margin: 0;
  position: relative;
  padding-top: 3px;
  z-index: 10;
  transition: transform 0.1s linear;
}

/*.strategy-h2s {
  position: sticky;
  top: 120px;
  overflow: hidden;
}*/

.strategy-h2s-inner {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s ease;
}
.strategy-line {
  display: flex;
  align-items: center;
  font-size: 40px;
  color: #e99ea4;
  transition: color 0.3s ease;
}
.strategy-line.active {
  color: white;
}

.strategy-right {
  flex: 0 0 76%; /* ≈840px of 1100px */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.strategy-right h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px;
  line-height: 38px;
  margin: 0 0 10px;
  color: #e99ea4;
  margin-bottom: 2rem
}

.strategy-right p {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.2px;
  margin: 0;
  color: #FFFFFF;
  max-width: 600px;
  margin-top: 0;
}

.strategy-button {
  background: #FFFFFF;
  color: #EE3441;
  display: inline-block;
  border: none;
  padding: 15px 30px;
  border-radius: 22px;
  font-family: 'Mulish', sans-serif;
  font-size: 12px;
  letter-spacing: .11px;
  line-height: 14.4px;
  font-weight: 700;
  margin-top: 20px;
  text-decoration: none;
  width: auto;           
  align-self: flex-start;
}
.strategy-button:hover {
  background: #f5f5f5;
}
.brain-section {
  padding: 120px;
  background: #f5f5f5;
  overflow-x: visible;
}

.brain-inner {
  display: flex;
  width: 100%;
  gap: 40px;
  padding-left: 20px;
  margin-left: calc((100vw - 1340px) / 2);
}

.brain-left {
  flex: 0 0 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.brain-left h2 {
  margin: 0 0 1rem;
  font-size: 40px;
  line-height: 1.1;
}

.barlow-gray {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px;
  color: #707070;
}

.fabcom-red {
  font-family: 'FabCom', sans-serif;
  font-size: 38px;
  line-height: 37px;
  color: #EE3441;
}

.brain-left p {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  color: #707070;
  letter-spacing: -0.2px;
  line-height: 26px;
  margin-bottom: 20px;
}

.brain-left .fab-button-main {
  margin-top: 0;
  width: fit-content;
}

.brain-right {
  flex-grow: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  padding-left: 0;
  max-width: calc(100vw - 250px - 40px - ((100vw - 1000px) / 2));
}

.brain-right::-webkit-scrollbar {
  height: 8px;

}
.brain-right::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #C41230, #EE3441, #F0533F);
  border-radius: 4px;
}

.brain-right::-webkit-scrollbar-track{
    background: #e3e3e3;
    border-radius: 4px;
    margin-right: 5em;
}

/*.brain-right::-webkit-scrollbar-track {
  margin-right: 400px;
}*/

.card-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  min-width: max-content;
}

.brain-card {
  background: #2C3036;
  color: white;
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .11px;
  width: 370px;
  height: 370px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
}

.brain-card.offset {
  margin-left: 195px;
}

.brain-card.wide-tall {
  width: 175px;
  height: 287px;
  background: linear-gradient(135deg, #C41230 25%, #EE3441 75%, #F0533F 100%);
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.brain-card.wide-tall {
  width: 175px;
  height: 287px;
  background: linear-gradient(135deg, #C41230 25%, #EE3441 75%, #F0533F 100%);
  font-size: 16px;
  line-height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;     
  text-align: left;
  position: relative;
}

.brain-card.wide-tall .brain-link {
  color: #fff;                
  font-family: 'FabCom', sans-serif;
  font-size: 24px;
  line-height: 34px;
  text-align: left;
  text-decoration: none;
  width: 100%;
  padding-left: 20px;
  padding-bottom: 50px;
  font-weight: 500;
}

.brain-card.wide-tall .brain-arrow {
  position: absolute;
  bottom: 40px;
  left: 20px;
  font-size: 18px;
  color: #fff;
}



.about-section {
  background: url('/uploads/video-proto-background-green.png') no-repeat center center;
  background-size: cover;
  padding: 120px;
}

.about-inner {
  display: flex;
  justify-content: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 25px;
}

.about-content {
  width: 400px;
  margin-left: 60%;
}

.about-content h2 {
  margin: 0 0 1rem;
  font-size: 40px;
  line-height: 1.1;
}

.about-content p {
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  color: #FFFFFF;
  line-height: 26px;
  letter-spacing: -0.2px;
  margin-bottom: 20px;
}

.button-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.clear-button {
  background: transparent;
  color: #FFFFFF;
    display: inline-block;
    border: 2px solid #FFFFFF;
    padding: 15px 30px;
    border-radius: 22px;
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    letter-spacing: .11px;
    line-height: 14.4px;
    font-weight: 700;
    margin-top: 20px;
    text-decoration: none;
}

.clear-button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 170px);
  grid-template-rows: repeat(2, 170px);
  gap: 30px;
}

.image-grid img {
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 10px;
}

    .deliverables-left {
      flex: 0 0 52%;
    }

    .deliverables-right {
      flex: 0 0 48%;
    }

    .deliverables-right h2 {
        color:#FFFFFF;
        margin-bottom: 0;
        margin-top: 0;
    }

    .deliverables-right p {
        color:#FFFFFF;
        margin-bottom: 0;
    }

.brain-card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

/* bottom‑left container */
.bc-info {
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
  color: #fff;
  background: linear-gradient(180deg, rgba(44, 48, 54, 0) 0%, rgba(44, 48, 54, 1) 100%);
  width: calc(100% - 20px);
  height: 35%;
  padding: 10px;
}

/* faculty name */
.bc-name {
  font-family: 'Barlow', sans-serif;
  font-size: 40px;
  line-height: 37px;
  text-transform: uppercase;
  margin: 0;
  width:30%;
}

/* faculty title */
.bc-title {
  font-family: 'FabCom', sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: 0.97px;
  color: #EE3441;
  margin-top: 4px;
}

/* play‑button base state */
.bc-play {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  cursor: pointer;
  overflow: hidden;
}

/* hide the icon until expanded */
.bc-play i {
  color: #fff;
  font-size: 24px;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

/* hover state */
.brain-card:hover .bc-play {
  width: 50px;
  height: 50px;
  background: linear-gradient(
    to right,
    #C41230,
    #C41230 25%,
    #EE3441 75%,
    #F0533F
  );
}

.brain-card:hover .bc-play i {
  opacity: 1;
}

/* Video modal shittttttttt */
#videoModal {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  display: none; z-index: 1000;
}
.modal-overlay {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  background: url(/uploads/strategies_background.png) no-repeat center / cover;
  opacity: 0.5;
}
.modal-dialog {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  padding: 10px;
  border-radius: 4px;
}
.modal-close {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: background 0.3s ease;
}

.modal-close .fa-times {
  font-size: 24px;
  background: linear-gradient(
    to right,
    #C41230,
    #C41230 25%,
    #EE3441 75%,
    #F0533F
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: color 0.3s ease, background 0.3s ease;
}

.modal-close:hover {
  background: linear-gradient(
    to right,
    #C41230,
    #C41230 25%,
    #EE3441 75%,
    #F0533F
  );
}

.modal-close:hover .fa-times {
  background: none;
  -webkit-text-fill-color: #fff;
}

  .affiliates-container {
  width: 100%;
  margin-top: 60px;
  text-align: center;
}

.affiliates-container {
  width: 100%;
  margin-top: 60px;
  position: relative;
}

.affiliates-title-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: left;
}

.affiliates-title {
  font-family: 'Barlow', sans-serif;
  font-size: 36px;
  line-height: 34px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 1rem;
}

.affiliates-swiper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 40px;
  position: relative;
  overflow: hidden;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.swiper-slide img {
  max-height: 56px;
  width: 90%;
  object-fit: contain;
  display: block;
}

.affiliates-arrow {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: white;
  position: absolute;
  top: calc(50% + 24px);
  z-index: 10;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.swiper-button-prev.affiliates-arrow {
  left: 0;
}

.swiper-button-next.affiliates-arrow {
  right: 0;
}

.affiliates-arrow i {
  color: white;
  font-size: 16px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}

.contact-map-section {
  background: #f5f5f5;
  padding: 120px;
}

.contact-map-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 100px;
  flex-wrap: wrap;
}

.contact-map-left {
  flex: 0 0 33%;
}

.contact-map-right {
  flex: 0 0 57%;
}

.contact-map-left h2 {
  margin-bottom: 0;
}

.contact-map-left p {
  font-size: 16px;
  line-height: 26px;
  color: #707070;
  font-family: 'Mulish', sans-serif;
  margin-bottom: 30px;
}

.contact-map-right iframe {
  height: 470px;
  border: none;
}

.location-button {
   background: transparent;
    color: #EE3441;
    display: inline-block;
    border: none;
    padding: 15px 30px;
    border-radius: 22px;
    font-family: 'Mulish', sans-serif;
    font-size: 12px;
    letter-spacing: .11px;
    line-height: 14.4px;
    font-weight: 700;
    margin-top: 20px;
    text-decoration: none;
}


/* services */
.main-content {
  margin-left: 100px;
  padding: 20px 40px;
  flex: 1;
  max-width: 1100px;
  margin: auto;
}

.hero-image {
  width: 100%;
  border-radius: 10px;
}

.breadcrumb {
  margin: 10px 0;
  font-size: 12px;
  color: #999;
  font-family: 'Mulish';
}

.breadcrumb a {
  text-decoration: none;
  color: #999;
}
.intro {
  display: flex;
  align-items: flex-start;
  margin-top: 20px;
  gap: 40px;
}
.intro-heading {
  flex: 0 0 auto;
  min-width: 280px;
}
.intro h2 {
  font-size: 28px;
  margin: 10px 0;
}

.intro .gray {
  color: #707070;
  font-family: 'Barlow Condensed';
}

.intro .red {
  color: #EE3441;
  font-family: 'Fabcom';
  font-weight: 400;
  letter-spacing: 2px;
}

.intro p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 800px;
  font-family: 'Mulish';
}

.services-section {
  display: flex;
  margin-top: 30px;
}

.services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 250px;
  font-family: 'Mulish';
  background: #F7F7F7;
  padding: 15px;
  border-radius: 10px;
}

.services-list li {
  padding: 10px 15px;
  cursor: pointer;
  border-left: 4px solid transparent;
  color: #707070;
}

.services-list li.active,
.services-list li:hover {
  background-color: #f1f1f1;
  /* border-left: 4px solid #ccc; */
  font-weight: bold;
  border-radius: 10px;
}

.service-description {
  /* background-color: #b6f0ff; */
  padding: 20px;
  margin-left: 20px;
  flex: 1;
  border-radius: 6px;
  width: calc(100% - 350px);
}

.service-description h3 {
  margin-top: 0;
  font-size: 18px;
  color: #707070;
  font-family: 'Barlow Condensed';
  font-size: 40px;
  margin-bottom: 0px;
}

.service-description p {
  font-size: 14px;
  line-height: 1.5;
}

.service-block {
  display: none;
}

.service-block.active {
  display: block;
}
.resource-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 40px 0;
}

.resource-box {
  background-color: #f8f8f8;
  padding: 20px 30px;
  border-radius: 8px;
  text-align: center;
  width: 120px;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.resource-box:hover {
  background-color: #efefef;
}

.resource-box i {
  color: #e34242;
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
  margin: auto;
  margin-bottom: 10px;
}

.resource-box span {
  display: block;
  font-size: 19px;
  font-weight: bold;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'Barlow Condensed';
}
.service-img{
	width:100%;
	margin-bottom: 15px;
}
.service-pagination {
  display: flex;
  justify-content: space-between;
  margin: 60px 0 40px;
  padding: 0 10px;
  font-family: Arial, sans-serif;
}

.service-pagination .prev,
.service-pagination .next {
  text-align: left;
  max-width: 200px;
  color: #666;
  cursor: pointer;
}

.service-pagination .next {
  text-align: right;
}

.service-pagination .label {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 8px;
}

.service-pagination i {
  font-size: 12px;
  color: #666;
}

.service-pagination .title {
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  line-height: 1.2;
  text-transform: uppercase;
}


 



    @media (max-width: 1168px) {
    .sidebar {
        position: fixed;
        top: -0;
        left: 0;
        width: calc(100vw - 32px);
        height: 72px;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.5rem 1rem;
    }
    .sidebar img:nth-child(2) {
        display: none;
    }

    .offcanvas-panel {
        top: 130px !important;
        margin: 0 auto;
        left: 16px !important;
        width: 100% !important;
        height: auto !important;
        max-height: 80vh !important;
        border-radius: 8px !important;
        transform: none !important;
    }

    .explore-grid {
        grid-template-columns: repeat(2, 1fr) !important;

    }

    .connect-row {
        grid-template-columns: 1fr;
    }
    .offcanvas.offcanvas-top {
        /* width: calc(100vw - 64px) !important; */
        height: fit-content !important;
    }
    .bottom-content {
        margin-top: 0;
        padding-bottom: 1rem;
        width: 100% !important;

    }
    section.hero.hero-image-container {
    margin-top: 90px;
}
    .offcanvas-header {
        display: none;
    }
    .offcanvas-panel{
	  left:-100% !important;
	    
    }
    div.offcanvas-panel{
	  top: 80px !important;
	  width: calc(100% - 40px) !important;
	  
	  }
	      div.offcanvas-panel.active{
	  left:0 !important;
	  }
	
}