/*!
Theme Name: IB Client Portal
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ib-client-portal
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

IB Client Portal is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  font-family: "Roboto", sans-serif;

  overflow-x: hidden; /* This hides any horizontal overflow */
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
/* body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
} */

/* h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
} */

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 0em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: #4169e1;
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */

#site-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1162px;
  height: 133px;
  padding: 4px 2px 0 0;
  margin-left: 10px;
}

#IBHeaderText {
  color: #01ffff;
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  position: relative;
  top: -18px;
}

/* You might want to hide this on desktop or restyle it */
.menu-toggle {
  /* You can add styles for the mobile toggle button here */
  display: none;
}

/* Remove default list styling */
.menu-container ul {
  list-style-type: none;
  padding: 0; /* remove any default padding */
  margin: 0; /* remove any default margin */
}

/* Style for each menu item */
.menu-container li {
  display: inline-block; /* make the items sit side-by-side */
  margin-right: 20px; /* spacing between items */
}

/* Style for each anchor (link) in the menu */
.menu-container a {
  font-family: "Roboto", sans-serif;
  color: #f8f8f8;
  text-decoration: none; /* remove the default underline */
  text-transform: uppercase; /* convert text to uppercase */
  position: relative; /* relative positioning for the active bar */
  padding-bottom: 5px; /* space for the active bar */
  position: relative; /* Ensure the ::before pseudo-element is positioned relative to the link */
  padding: 5px 20px; /* Add some padding to make space for the border */
  z-index: 1;
  font-size: 17px;
}

/* Add an active bar for the current menu item */
.menu-container .current-menu-item a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the pseudo-element */
  width: calc(
    100% + 6px
  ); /* Adding twice the border width to ensure the border fully encompasses the text */
  height: calc(
    100% + 6px
  ); /* Adding twice the border width to ensure the border fully encompasses the text */
  border-radius: 58px;
  border: 3px solid #01ffff;
  z-index: -1; /* Place the pseudo-element below the actual link */
}

.logos img {
}

/* On hover, slightly alter the link color for better UX */
.menu-container a:hover {
  color: #e0e0e0;
}

.video-section {
  margin-top: 100px;
}

.video-background-header {
  position: absolute;
  min-height: 169px;
  top: 0;
  left: 0;
  width: 100%;
  height: 71%;
  object-fit: cover; /* Ensures the video covers the full header */
  z-index: -1; /* Ensures the video stays behind your header content */
}

.video-background-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 19%;
  object-fit: cover; /* Ensures the video covers the full header */
  z-index: 1; /* Ensures the video stays behind your header content */
}

/* Body
--------------------------------------------- */

body {
  width: 100%;
  max-width: 1212px;
  margin: 0 auto;
  padding: 0 20px; /* Optional: padding for small screens */
  box-sizing: border-box; /* Ensure padding is included in the width calculation */
  background-color: #0d021f;
}

/* #masthead {
  background-image: url('/wp-content/uploads/2023/10/bkg-head-3X.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
} */
/* #page {
  background-image: url('/wp-content/uploads/2023/10/bkg-hero.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
} */

#footerImg {
  height: 20px;
  background-image: url(/wp-content/uploads/2023/11/FooterImg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  width: 100vw;
  position: relative;
}

/* MEET THE TEAM PAGE CSS
--------------------------------------------- */
.team-row {
  display: flex;
  justify-content: space-between; /* Equal spacing between team members */
  margin-bottom: 2rem; /* Spacing for subsequent rows if added */
}

.team-member {
  width: calc(25% - 50px);
  text-align: left;
}

.team-member img {
  position: relative;
  width: 200px;
  cursor: pointer;
  padding: 15px;
  border: 1px dashed #01ffff;
  border-radius: 110px;
  transition: all 0.75s ease-in-out;
  z-index: 1;
}

.team-member img:hover {
}

.selected {
  border: 1px dashed red !important;
}

.team-member img::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border: 1px dashed red;
  opacity: 0;
  transition: opacity 0.3s ease; /* Adjust this value if you want to change the fade-in speed */
}

.team-member img.selected::after {
  border-color: red;
  opacity: 1;
}

.img-container {
  position: relative;
  display: inline-block; /* if needed */
}

.team-member h3 {
  color: #fff;
  text-align: left;
  margin-bottom: -10px;
  font-family: "roboto-condensed", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 20px;
}

.team-member p {
  color: var(--ib-blue-lt, #01ffff);
  margin-top: 11px;
  text-align: left;
  font-family: "roboto", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-transform: uppercase;
}

@keyframes fadeInOpacity {
  to {
    opacity: 1;
    border-color: #01ffff; /* assuming you want the border to have the same color as its parent text. Otherwise, specify a color here. */
  }
}

.border-fade-in {
  animation-name: fadeInOpacity;
  animation-timing-function: ease-in-out;
  animation-duration: 2.6s;
  animation-fill-mode: forwards;
}

.fade-in {
  opacity: 0;
  animation-name: fadeInOpacity;
  animation-timing-function: ease-in-out;
  animation-duration: 2.2s;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

.slide-up-fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation-name: slideUpAndFade;
  animation-timing-function: ease-in-out;
  animation-duration: 1.6s;
  animation-delay: 0.75s; /* delay so it starts after the image and h3 appear */
  animation-fill-mode: forwards;
}

@keyframes slideUpAndFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hiddenTeamRow {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Change the container's properties when hovered */
.cta-btn-container:hover {
  left: 10px;
  cursor: pointer;
  background-color: #ffffff;
}

/* Change the text color when the container is hovered, not the text itself */
.cta-btn-container:hover .cta-btn-text {
  color: black;
}

/* MEET THE TEAM PAGE CSS
--------------------------------------------- */

/*--------- Countdown Overlay -------------------*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85); /* Dark overlay */
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
}

#days-label {
  position: relative;
  left: 14px;
}

#hours-label {
  position: relative;
  left: 19px;
}

#minutes-label {
  position: relative;
  left: 16px;
}

#secoonds-label {
}

.content-band {
  padding: 20px 0; /* This ensures content doesn't touch the top and bottom of the band. Adjust as needed. */
  width: 100%; /* To ensure it spans the full width of the screen. */
  box-sizing: border-box; /* Ensures padding and border are included in the total width/height. */
}

.countdown {
  color: #01ffff;
  text-align: center;
}

.timer {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  margin-bottom: 40px;
}

.timer-labels {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
}

.time-section {
  margin-top: 20px;
  padding: 0 43px;

  margin-top: 16px;
}

.label-section {
  text-transform: uppercase;
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  padding: 0 52px;
}

#countdown-header {
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  font-weight: 300;
  margin-bottom: 37px;
}

.access-text {
  font-weight: 400;
}

.days {
}

#access-link {
  color: #01ffff;
}

.time-section span {
  font-size: 55px;

  display: block;
  font-weight: 300;
}

.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}

.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out;
}

.login-form {
  display: flex;
  flex-direction: column;
  margin: auto;
  gap: 10px;
  color: var(--ib-royal-blue, #0000fe);
  width: 350px;
}
.input-wrapper {
  display: flex;
  align-items: center; /* This vertically centers the icon and input in case of height discrepancies */
  margin-bottom: 15px; /* Adds space between each input group */
}

#login-overlay input[type="email"],
#login-overlay input[type="password"] {
  width: 100%; /* Take up the remaining space in the .input-wrapper */
  color: #fff !important;
  background-color: transparent !important;
}

#login-overlay {
  flex-direction: column;
}

#login-overlay h2 {
  color: var(--ib-blue-lt, #01ffff);
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-weight: 700;
}

#login-btn {
  width: 120px;
  background-color: #0000fe;
  color: #ffffff;
  border: none; /* Removes default border styles if any */
  padding: 13px 15px; /* Adjust as needed for desired height and padding */
  text-align: center;
  cursor: pointer;
  transition: all ease-in-out 0.75s;
  margin: auto;
  border-radius: 20px;
}

#login-btn p {
  font-family: "roboto-condensed", sans-serif;
  transition: all ease-in-out 0.75s;
  text-transform: uppercase;
}

#login-btn:hover {
  background-color: white; /* Slightly darker shade on hover, adjust as needed */
}

#login-btn:hover p {
  color: black; /* Slightly darker shade on hover, adjust as needed */
}

h1.entry-title {
  display: none;
}

.progress-ring {
  position: absolute;
  transform: rotate(-90deg); /* This ensures the circle starts from the top */
  z-index: 1; /* Keep it behind the number */
  overflow: visible;
  top: -39px;
  left: 46px;
}

.time-section {
  position: relative; /* To position the SVG absolutely inside it */
}

span[id="days"],
span[id="hours"],
span[id="minutes"],
span[id="seconds"] {
  z-index: 2;
  position: relative;
}

/* Home */

#welcome-header {
  font-size: 105px;
  font-weight: 700;
  color: #f8f8f8;
  font-family: "Roboto", sans-serif;
  letter-spacing: -3.15px;
  margin: 0px;
  line-height: 92px;
  margin-top: 13px;
}
#welcome {
  font-size: 26px;
  font-weight: 700;

  color: #f8f8f8;
  font-family: "Roboto", sans-serif;
}
#learn-more {
  font-size: 26px;
  font-weight: 300;
  margin-top: 13px;
  color: #f8f8f8;
  font-family: "Roboto", sans-serif;
}

/* .three-columns {
  background: linear-gradient(to bottom, transparent, #0d021f 20%);
} */

.arrow-divider {
  text-align: center;
  color: #0d021f;
}

.three-columns {
  display: flex;
  justify-content: space-between;
  padding: 20px 0%; /* Adjust as needed. This gives some space around the section */
  position: relative;
  z-index: 4;
  margin-bottom: 45px;
  margin-top: 60px;
}

.column {
  flex: 1;
  padding: 0 30px;
  text-align: center;
}

.column img {
  margin-bottom: 22px;
  margin-top: 40px;
  position: relative;
  left: -6px;
}

.column h2 {
  padding-bottom: 21px; /* Adjust as needed */
  color: var(--text-light, #f8f8f8);
  /* h2 */
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-style: normal;

  font-weight: 700;
  line-height: normal;
  margin-top: 0px;
  margin-bottom: 0px;
}

.column p {
  margin-bottom: 55px; /* Adjust as needed */
  color: var(--text-light, #f8f8f8);
  padding-right: 17px;
  border-right: 1px solid #01ffff;
  font-family: "Roboto";
  font-size: 15px;
  font-style: normal;
  margin-top: 0px;
  padding-top: 15px;
  font-weight: 400;
  line-height: 20px; /* 133.333% */
}

.custom-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: auto;
  max-width: 380px;
  padding: 10px 25px;
  font-family: "roboto-condensed", sans-serif;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 23px;
  background: #01ffff;
  color: #000000;
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.5s ease;
}

.custom-button:hover {
  background-color: #ffffff;
}

.video-section-home {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-top: 40px;
  overflow: hidden;
  width: 100%; /* Ensures it takes up the full width */
  height: 500px;
}

.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the full section */
  z-index: -1; /* Ensures the video stays behind your content */
}

#interactive-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  z-index: 1; /* Keeps it below the text content */
}
.video-header-text {
  margin-top: 40px;
  padding-left: 10px;
}

.header-text-container {
  position: relative;
  pointer-events: none; /* Disables mouse events on this container */

  z-index: 2; /* This ensures the text is above the canvas */
}

canvas {
  display: block; /* Remove potential extra space below the canvas */
  width: 100%;
  height: 500px;
}

.cta-container-team {
  border-radius: 54px;
  border-right: 1px solid #01ffff;
  background: #01ffff;
  display: flex;
  position: relative;
  padding: 25px 48px;
  width: 614px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 0 auto;
  margin-bottom: 200px;
  margin-top: 200px;
  transition: all ease-in-out 0.75s;
}

/* CTA styling */
.cta-container {
  border-radius: 54px;
  border-right: 1px solid #01ffff;
  background: #01ffff;
  display: flex;
  justify-content: space-between;
  padding: 25px 48px;
  width: 614px;
  align-items: center;
  gap: 15px;
  margin: 0 auto; /* Center the CTA horizontally */
  margin-bottom: 200px;
}

.cta-text {
  color: var(--ib-blue-dk, #0d021f);
  font-family: "roboto-condensed", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.cta-btn-container {
  display: flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  border-radius: 23px;
  transition: all ease-in-out 0.75s;
  background: var(--ib-royal-blue, #0000fe);
}

.cta-btn-text {
  color: var(--text-light, #f8f8f8);
  font-family: "roboto-condensed", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 25.5px; /* 141.667% */
  text-transform: uppercase;
  transition: all ease-in-out 0.75s;
}

.dotted-line {
  border-top: 2px dotted var(--ib-blue-lt, #01ffff);
  width: 100%;
  height: 0; /* This ensures that only the border (i.e., the dotted line) is displayed */
  margin-top: 20px; /* Optional: Add some space above the dotted line */
  margin-bottom: 20px; /* Optional: Add some space below the dotted line */
}

/*------------OUR STORY SECTION----------------*/
.our-story-container {
  display: flex;
  gap: 108px;
  margin-top: 200px;
}

.our-story-header {
  font-family: "Roboto", sans-serif;
  width: 382px;
  top: -100px;
  display: flex;
  justify-content: center;
  position: relative; /* This keeps the element in the flow while still allowing for positioning of children elements */
  padding: 101px;
  align-items: center;
  border: 2px dashed var(--ib-red, #f00);
  border-radius: 495px;
}

.our-story-header::after {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/icon-story.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px;
  height: 150px;
  position: absolute;
  top: 13px;
  right: -18px;
  z-index: 1;
}

.our-story-header span {
  font-family: "Roboto", sans-serif;
  color: var(--ib-blue-lt, #01ffff);
  text-align: center;
  font-size: 77px;
  font-style: normal;
  font-weight: 700;
  line-height: 80px;
  text-transform: uppercase;
}

.scroll-container {
  top: -100px;
  flex: 1;
  position: relative;
  height: 390px;
  overflow: hidden; /* Hide overflow for scroll-container */
}

.our-story-content {
  height: 100%;
  overflow-y: auto;
  padding-right: 30px;
}


.team-member img:hover{
  border: 1px solid #01ffff;
  transition: all 0.75s ease-in-out;
}

.our-story-content p {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  margin-bottom: 250px;
  margin-top: 40px;
  max-width: 86%;
}
.scroll-indicator {
  position: absolute;
  top: 54%;
  left: 41%; /* Center the element by setting left to 50% */
  transform: translate(
    -50%,
    0
  ); /* Initial transform only moves the element horizontally */
}

@keyframes bounceAndFade {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  20%,
  55% {
    transform: translate(-50%, 30px); /* Go down */
    opacity: 1;
  }
  35%,
  70% {
    transform: translate(-50%, -10px); /* Move up a little */
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 0); /* Begin returning to the start */
    opacity: 1;
  }
  90% {
    transform: translate(-50%, 0); /* Near end of returning */
    opacity: 0.5; /* Start fading */
  }
  100% {
    transform: translate(-50%, 0); /* Completely return to start */
    opacity: 0; /* Fully faded out */
  }
}

.scroll-indicator,
.scroll-indicator-active {
  transition: opacity 1s ease;
}

.bounce-animation {
  animation: bounceAndFade 5s forwards; /* Extend duration to 5s for a slower return */
}

.our-story-content::-webkit-scrollbar {
  width: 0;
}

.our-story-content {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Gradient styles */
.gradient-top,
.gradient-bottom {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 56px;
  pointer-events: none;
  z-index: 2;
}

.gradient-top {
  top: 0;
  background: linear-gradient(
    0deg,
    rgba(13, 2, 31, 0) 0%,
    rgba(13, 2, 31, 0.5) 50%,
    #0d021f 100%
  );
}

.gradient-bottom {
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(13, 2, 31, 0) 0%,
    rgba(13, 2, 31, 0.5) 50%,
    #0d021f 100%
  );
}

/*------------OUR STORY SECTION----------------*/

/*------------OUR WORK SECTION----------------*/
.SuccessStories {
  color: var(--text-light, #f8f8f8);
  font-family: "roboto", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 123.077% */
  margin: 0;

  text-transform: uppercase;
  margin-top: 55px;
}
.RealResults {
  color: var(--ib-blue-lt, #01ffff);
  font-family: "roboto", sans-serif;
  font-size: 60px;
  font-style: normal;
  font-weight: 700;
  line-height: 74px; /* 112.121% */
  letter-spacing: -1.98px;
  text-transform: uppercase;
  margin: 0;
  margin-bottom: 9px;
}
.RealResultsSubText {
  color: var(--text-light, #f8f8f8);
  font-family: "roboto-condensed", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; /* 123.077% */
  margin: 0;
  margin-bottom: 50px;
}

.CompanyName {
  font-family: "roboto-condensed", sans-serif;
  font-size: 22px;
  color: #f8f8f8;
  margin: 0;
  margin-bottom: 15px;
}

.image-container {
  position: relative;
  display: inline-block; /* To make sure the container takes the size of the image */
}

.badge {
  position: absolute;
  top: -21px;
  right: -20px;
  z-index: 2;
  width: 98px;
}

.badge-1 {
  top: 80px;
}
.card-logo {
  width: 100%; /* Ensures the container takes the full width of its parent */
  text-align: left; /* Aligns content to the left */
  margin-top: 25px;
  margin-bottom: 20px;
}

.card-logo img {
  width: 190px;
  display: inline-block; /* Makes the image an inline-level element */
}

.CardTopCopy {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  color: #f8f8f8;
  margin: 0;
}

.CardTopCopyRed {
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  color: red;
  margin: 0;
}

.case-study-title {
  color: var(--ib-blue-lt, #01ffff);
  text-align: left;
  font-family: "Roboto", sans-serif;
  font-size: 36px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.case-study-description {
  color: var(--text-light, #f8f8f8);
  text-align: left;
  font-family: "roboto-condensed", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.case-study-blue-btn {
  padding: 10px 30px;
  border-radius: 23px;
  background: #01ffff;
  width: fit-content;
  transition: all ease-in-out 0.75s;
  text-align: left; /* Align the text to the left side of the button */
}

.case-study-blue-btn p {
  color: #000;
  font-family: "Roboto", sans-serif;
  font-size: 22px;
  font-style: normal;
  margin: 0;
  font-weight: 700;
  line-height: 25.5px; /* 110.87% */
  text-transform: uppercase;
}

#case-studies-original {
  margin-bottom: 100px;
}

.case-study-blue-btn:hover {
  background-color: #ffffff;
}

.download-resource-btn:hover p {
  color: black;
}

/* Change the button's background color when hovering over it */
.download-resource-btn:hover {
  background-color: white;
}

/*------------OUR WORK SECTION----------------*/

/* Footer */
.footer-container {
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #0d021f;
  border-top: 3px dashed #01ffff;
  padding-top: 60px;
  padding-bottom: 60px;
}

.footer-brand {
  color: var(--ib-blue-lt, #01ffff);
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.footer-text {
  color: var(--text-light, #f8f8f8);
  font-family: "roboto-condensed", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 11px;
  position: relative;
  top: -8px;

  white-space: pre-line; /* this ensures your breaks and whitespace are respected */
}

.flex-container {
  display: flex;
  gap: 5%; /* You can adjust this between 5% and 10% based on your design needs */
  align-items: flex-start;
  flex-direction: row;
  margin-bottom: 100px;
  margin-top: 100px;
}

.left-image-about-us {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures the image covers the area without distortion */
  max-width: 400px;
}

.header-text {
  color: var(--ib-blue-lt, #01ffff);
  font-size: 40px !important;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.text-content p {
  color: #fff;
  /* body */
  font-family: "roboto-condensed", sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 133.333% */
}

.logo-box {
  background-color: #ffffff; /* White background */

  display: flex;
  justify-content: center; /* This centers the image horizontally in the box */
  align-items: center; /* This centers the image vertically in the box */
  margin-top: 55px;
  border-radius: 14px;
  margin-bottom: 200px;
}

.cta-right {
  justify-content: flex-end;
  display: flex;
}

.left-image-team {
  border: 1px dashed red;
  border-radius: 300px;
  max-width: 473px;
  padding: 89px;
  overflow: visible;
  padding-left: 64px;
  position: relative;
  width: 329px;
  padding-right: 86px;
}

.cta-btn {
  color: #ffffff;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  padding: 13px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 7px;
  border: 1px solid var(--ib-royal-blue, #0000fe);
  background: var(--ib-royal-blue, #0000fe);
  font-family: "Roboto", sans-serif;
  font-size: 15px;
  height: 43px;
  min-width: 141px;
  text-align: center;
}

.header-text-team {
  font-family: "Roboto", sans-serif;
  font-size: 60px;
  color: #01ffff;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0px;
}

.sub-header-text-team {
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.red-sub-header-text-team {
  color: var(--ib-red, #f00);
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 25.5px; /* 141.667% */
}

/* Teams Page */

.header-text-team-member {
  font-family: "Roboto", sans-serif;
  color: #fff;
  margin: 0;

  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.sub-header-text-team-member {
  color: #01ffff;
  font-family: "roboto", sans-serif;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0;
  text-transform: uppercase;
}
.blue-box-copy {
  display: flex;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  align-self: stretch;
  border-radius: 12px;
  background: var(--ib-blue-lt, #01ffff);
}

.blue-box-copy .header {
  color: var(--ib-blue-dk, #0d021f);
  font-family: "roboto-condensed", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  margin: 0;
  line-height: normal;
  margin-bottom: 5px;
}

.blue-box-copy ul {
  padding: 0px;
  margin: 0;
}
.blue-box-copy li {
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  font-family: "roboto-condensed", sans-serif;
  color: var(--ib-blue-dk, #0d021f);
  list-style-position: outside; /* This ensures "hanging bullets" */
  margin-left: 20px; /* Adjust as needed to control the position of the bullets */
  margin-bottom: 10px;
}

.team-img-large {
  border: 1px dashed red;
  border-radius: 300px;
  max-width: 400px;
  padding: 29px;
  overflow: visible;
}

/* Case Studies */

.case-study-columns {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Spacing between columns */
  margin-bottom: 50px;
}

.case-study-column {
  flex: 1;
  display: flex;
  flex-direction: column;

  padding: 30px;
  cursor: pointer;
}

.case-study-images {
  display: flex;
  align-items: center; /* vertically centers the images */
  justify-content: space-between; /* distributes images evenly */
}

.case-study-images img.case-study-image {
  max-width: 48%; /* So there's a bit of space between them; adjust as necessary */
  height: auto;
  display: block;
}

.case-study-subheader {
  color: var(--ib-red, #f00);
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
}

video {
  width: 100%; /* Set the width to 100% of the container. */
  height: auto; /* Let the height be auto to maintain the video's aspect ratio. */
  object-fit: cover; /* Resize the video to cover the container while maintaining its aspect ratio. */
  object-position: center; /* Center the video in the container. */
}

/* downloads page */

/* Header Styles */
.header-downloads {
  padding-bottom: 20px;
  margin-top: 100px;
  font-size: 50px;
  font-weight: 700;
  line-height: normal;
  font-family: "Roboto", sans-serif;
  color: #01ffff;
  border-bottom: 3px dashed #01ffff;
}

/* Copy Styles */
.copy-downloads {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px; /* 133.333% */
  color: #fff;
}

.download-section-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; /* optional, but good for safety */
}

.Our-Stoy-Client-Header {
  margin-bottom: 50px;
  margin-top: 200px;
  text-transform: uppercase;
}

.left-side-img {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.right-side-img {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.Our-Story-header-text {
  margin-bottom: 50px;
  margin-top: 100px;
  text-transform: uppercase;
}

.Our-Story-images-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.Our-Story-plus-sign {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(
    -50%,
    -50%
  ); /* Center the image both vertically and horizontally */
  z-index: 10; /* Ensure the plus sign stays on top of the images */
}

.Our-Story-image-wrapper {
  position: relative;
  margin-bottom: 30px;
}

.Our-Story-side-image {
  max-width: 100%;
  display: block;
}

.Our-Story-overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-light, #f8f8f8);
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  max-width: 90%;
}

.download-resource-btn {
  display: flex;
  padding: 10px 30px;
  width: fit-content;
  justify-content: center;
  align-items: center;
  border-radius: 23px;
  background: var(--ib-royal-blue, #0000fe);
  transition: all ease-in-out 0.75s;
}
.download-resource-btn p {
  color: var(--text-light, #f8f8f8);
  /* buton-small */
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 25.5px; /* 141.667% */
  text-transform: uppercase;
  margin: 0;
  transition: all ease-in-out 0.75s;
}

.cta-downloads {
  margin-top: 200px;
}

/* If you want to make sure they take equal space */
.download-section {
  display: flex;
  flex: 1;
  max-width: 49%; /* a little less than half to account for any possible padding/margin */
  align-items: FLEX-START;
  gap: 20px;

  padding: 20px 60px;
}

.download-icon {
  margin-left: auto;
}
.download-image {
  margin-top: 16px;
  max-width: 33px;
}

.download-title {
  font-family: "roboto-condensed", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: normal;
  color: #01ffff;
  margin-top: 12px;
  margin-bottom: 12px;
}

.download-subtitle {
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  text-transform: uppercase;
  color: var(--ib-blue-lt, #01ffff);
  margin-top: 12px;
  margin-bottom: 12px;
}

.download-description {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;

  flex: 1;
  color: #fff;
  margin-top: 12px;
  margin-bottom: 12px;
}
.download-resource-btn:hover {
  cursor: pointer;
}
.download-icon {
  width: 30px; /* Adjust based on your icon size */
  height: 30px; /* Adjust based on your icon size */
}

/* contact us form */
.contact-header {
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.form-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 100px;
  margin-bottom: 200px;
}

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  border: none;
  border-bottom: 2px dotted var(--ib-blue-lt, #01ffff);

  position: relative;
  background-color: transparent;
  color: #fff;
}

input[type="text"],
input[type="password"],
textarea {
  width: 100%;
  border: none;
  border-bottom: 2px dotted var(--ib-blue-lt, #01ffff);

  position: relative;
  background-color: transparent;
  color: #fff;
}

input[type="radio"] {
  margin-right: 10px;
}
.input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

textarea {
  resize: none;
}

.radio-label {
  color: #fff;
  margin-left: 5px;
}

.urgency-text {
  color: var(--text-light, #f8f8f8);
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin-right: 10px;
}

.send-button {
  border-radius: 7px;
  border: 1px solid var(--ib-royal-blue, #0000fe);
  background: var(--ib-royal-blue, #0000fe);
  color: #fff;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.send-button:hover {
  background: #fff;
  color: var(--ib-royal-blue, #0000fe);
}

input:focus,
textarea:focus {
  color: #fff;
  outline: none; /* Removes the default browser outline */
  border-bottom-color: var(
    --ib-blue-lt,
    #01ffff
  ); /* Optional: Change border color on focus for added visual feedback */
}

.contact-form-section input[type="text"]:focus,
.contact-form-section input[type="email"]:focus {
  color: #fff !important;
}

.align-center {
  text-align: center;
}

.IBBlue {
  color: #01ffff;
}
.IBWhite {
  color: #ffffff;
}

.font-15 {
  font-family: "Roboto", sans-serif;
  font-size: 15px;
}

.about-page-single-column img {
  margin-bottom: 10px;
}

.title-item {
  margin-bottom: 10px;
}

li.IBWhite.font-15 {
  padding-bottom: 5px;
  font-size: 22px;
}

.about-page-vertical-line-container,
.about-page-small-verticals,
.about-page-columns {
  display: flex;
  margin-bottom: 22px;
}

.about-page-dotted {
  border-right: 2px dashed #01ffff;
  height: 20px; /* Adjust based on your need */
  flex-grow: 1;
}

.about-page-horizontal-line {
  width: 80%;
  border-top: 2px dashed #01ffff;
  margin: auto;
  margin-bottom: 23px;
}

.about-page-column .IBBlue {
  margin-top: 74px;
  margin-bottom: 10px;
}

.gif-container {
  display: flex; /* This will make its children (i.e., gif-box) sit side by side */
  justify-content: space-between; /* Optional: To have some space between the two gif boxes */
  align-items: center; /* Aligns the gif boxes vertically in the center if they have different heights */
  width: 100%; /* You can adjust the width as per your needs */
}

.gif-box {
  flex: 1; /* This ensures that both boxes take equal width */

  overflow: hidden; /* Ensures that if the gif is larger than the box, it doesn’t overflow */
}

.gif-box img {
  width: 100%; /* Makes the gif fit the width of its parent container, the gif-box */
  height: auto; /* Maintains the aspect ratio of the gif */
}

.about-page-columns {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Main card styles */
.about-page-column {
  display: flex;
  width: 175px; /* Adjusted based on your request */
  height: 265px; /* Adjusted based on your request */
  padding: 20px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  flex-shrink: 0;
  border-radius: 16px; /* Rounded corners */
  transition: all 0.5s ease-in-out;

  position: relative; /* This will help with positioning the "MORE >" text */
}

.first-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/wp-content/uploads/2023/10/Card1.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.second-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/wp-content/uploads/2023/10/Card2.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.third-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/wp-content/uploads/2023/10/Card3.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.fourth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/wp-content/uploads/2023/10/Card4.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.fifth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/wp-content/uploads/2023/10/Card5.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.about-page-column:hover::before {
  opacity: 0;
}

.first-card {
  transition: all 0.5s ease-in-out;
}
.second-card {
  transition: all 0.5s ease-in-out;
}
.third-card {
  transition: all 0.5s ease-in-out;
}
.fourth-card {
  transition: all 0.5s ease-in-out;
}
.fifth-card {
  transition: all 0.5s ease-in-out;
}

.about-page-column:hover {
  cursor: pointer;
}

.about-page-column:hover .card-copy,
.about-page-column:hover .card-more {
  opacity: 0;
}

.card-icon {
  width: 60px;
  height: 60px;

  z-index: 3;
}

.card-copy {
  color: var(--text-light, #f8f8f8);
  font-family: "roboto-condensed", sans-serif;
  font-size: 18px;
  font-weight: 700;
  transition: all 0.5s ease-in-out;
  margin: 0;
  opacity: 1;
  padding-left: 4px;
  text-align: left;
  z-index: 3;
  text-transform: uppercase;
}

.more-carrot {
  opacity: 1;
  transition: all 0.5s ease-in-out;
  display: inline-block;
  transform: scaleY(1.4) translateY(-0.5px);
}

.card-more {
  transition: all 0.5s ease-in-out;
  opacity: 1;
  position: absolute;
  bottom: -11px;
  right: 12px;
  font-family: "roboto-condensed", sans-serif;
  font-size: 14px;
  color: white;
}

.hidden-copy {
  position: absolute;
  top: 50%; /* Centers the text vertically */
  left: 50%; /* Centers the text horizontally */
  transform: translate(-50%, -50%); /* Ensures perfect centering */
  opacity: 0; /* Initially hidden */
  transition: all 0.5s ease-in-out; /* Fade in/out effect */
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: var(--text-light, #f8f8f8); /* Adjust this if needed */
  text-align: left; /* Center the text content */
  width: 80%; /* Adjust based on your design preference */
  z-index: 1; /* Makes sure this stays on top */
}

.about-page-column:hover .hidden-copy {
  opacity: 1;
}

.about-page-column-container {
  display: flex;
  justify-content: space-between;
}

.about-page-single-column {
  flex: 1;
  padding: 0 10px; /* Add some space between columns */
}

.about-page-single-column ul {
  list-style: none; /* Remove default bullets */
  padding-left: 20px; /* Adjust this value to control the indentation of the text relative to bullets */
}

.about-page-single-column .title-item::before {
  content: "";
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15' fill='none'%3E%3Ccircle cx='8' cy='7.5' r='7.5' fill='%23FF0000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  width: 16px;
  height: 15px;
  margin-right: 7px; /* Space between bullet and text */
  vertical-align: middle; /* Align with text */
  margin-left: -23px; /* Shift bullet to the left */
}

.about-page-single-column li:not(.title-item)::before {
  content: "–"; /* Dash */
  display: inline;
  margin-right: 10px; /* Space between dash and text */
  vertical-align: middle; /* Align with text */
  margin-left: -20px; /* Shift dash to the left */
  color: #01ffff;
}

.accordion-container {
  width: 100%;

  margin: 0 auto;
}

.accordion-item {
  margin-bottom: 24px; /* Space between accordions */
}

.accordion-header {
  display: flex;
  height: 84px;
  padding: 23px 30px;
  justify-content: space-between; /* Distributes left-content and carrot to the edges */
  align-items: center;
  border-radius: 77px;
  border: 1px dashed var(--ib-blue-lt, #01ffff);
  cursor: pointer;
}

.left-content {
  display: flex;
  gap: 24px; /* Space between icon and copy */
  align-items: center; /* Vertically center the items */
}

.accordion-header .left-content span {
  color: var(--text-light, #f8f8f8);
  font-family: "Roboto", sans-serif;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
}

.carrot {
  transition: transform 0.3s ease; /* Animation for the carrot rotation */
}

.accordion-content {
  padding: 0 5%;
  display: flex;
  text-align: left;
  justify-content: center; /* Space out the 3 columns */
  overflow: hidden;
  max-height: 0; /* Initially set to 0 */
  transition: max-height 0.5s ease-in-out; /* Transition effect */
}

.accordion-content ul {
  list-style-type: none;
  padding: 24px;
  margin: 0;
}

.accordion-content li {
  position: relative;
  padding-left: 1.5em;
}

.accordion-content li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ib-blue-lt, #01ffff);
}

.Imagination {
  margin-bottom: 25px;
  margin-top: 100px;
}

/* @media (min-width: 1601px){
  .ultra-wide{
    height: 19% ;
  }
} */
#HeaderLogo{
  max-width: 350px;
}

#FooterLogo{
  max-width: 220px;
}
@media (min-width: 768px) {
  .case-study-title {
    white-space: nowrap;
  }
}

@media (min-width: 769px) and (max-width: 1600px) {
  .video-background-header {
    height: 85%; 
    
  }
}

@media (max-width: 768px) {
  #site-navigation {
    align-items: flex-start;
    gap: 30px;
  }
  .case-study-blue-btn p {
    font-size: 18px;
  }
  .badge-1 {
    top: 45px;
  }
  .badge {
    width: 60px;
  }
  .footer-container img { max-width: 186px !important;
    text-align: left;
    padding-top: 95px;
    padding-bottom: 45px;}
 
  .gif-container {
    flex-direction: column; /* Stacks gif-boxes vertically */
  }

  .gif-box {
    margin-bottom: 20px; /* Provides some spacing between the two boxes when they are stacked */
  }
}
#MMLogo{
  position: absolute;
  z-index: 3;
  width: 400px;
  right: 0;
  bottom: 0;
}
/* Mobile (you can adjust this breakpoint as needed, 768px is often used for portrait tablets) */
@media (max-width: 768px) {
  #MMLogo{
    position: absolute;
    z-index: 3;
    width: 163px;
    right: 0;
    bottom: 0;
  }
  #menu-item-148{
    border-bottom: 2px solid #01FFFF;
    padding-bottom: 12px;
  }
  .custom-button {
    display: inline-block;
    margin-top: 10px;
  }
  .three-columns {
    flex-direction: column;
  }

  .column {
    margin-bottom: 20px; /* Add space between the stacked columns */
  }
  .three-columns {
    padding: 20px 2%; /* Adjust the padding for smaller screens */
    margin-top: 0px;
    margin-right: 20px;
  }
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 1.5em 0 0;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

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

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5em;
}

.case-study-image{
  max-width: 516px;
}
@media (max-width: 1135px) {
  .menu-container li {
    font-size: 13px;
    margin-right: 0px;
  }
  .logos img {
    max-width: 80%;
  }

  .menu-container a {
    white-space: nowrap;
  }
}
/* Responsiveness for Download Section */
@media (max-width: 768px) {

  .case-study-image{
    max-width: 340px;
  }
  .footer-container {
    padding: 0px;
  }
  #site-navigation {
    padding: 0px;
    align-items: top;
    margin-left: 0px;
  }

  .video-section-home {
    padding-top: 0px;
    height: 400px;
    margin-top: -60px;
  }

  .custom-button {
    font-size: 18px;
  }

  .footer-container {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
  .video-section {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 300px;
    overflow: hidden;
  }

  .case-study-columns {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-direction: column;
    margin-bottom: 50px;
  }

  .team-member p {
    color: var(--ib-blue-lt, #01ffff);
    text-align: center;
    font-family: "Roboto", sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
  }

  .left-image-team {
    border: 1px dashed #01ffff;
    border-radius: 311px;
    max-width: 67%;
    padding: 50px;
    padding-top: 50px;
  }
  li.IBWhite.font-15 {
    padding-bottom: 10px;
    max-width: 300px;
    /* margin-right: 0px; */
    text-align: left;
    margin-top: 5px;
  }

  .cta-container {
    border-radius: 54px;
    border-right: 1px solid #01ffff;
    background: #01ffff;
    display: flex;
    justify-content: space-between;
    padding: 16px 27px;
    width: 334px;
    align-items: center;
    gap: 15px;
    margin: 0 auto;
    margin-bottom: 200px;
  }

  .cta-container-team {
    border-radius: 54px;
    border-right: 1px solid #01ffff;
    background: #01ffff;
    display: flex;
    justify-content: space-between;
    padding: 16px 27px;
    width: 334px;
    align-items: center;
    gap: 0px;
    margin: 0 auto;
    margin-bottom: 200px;
  }
  .cta-text {
    color: var(--ib-blue-dk, #0d021f);
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
  }

  .about-page-column-container {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    text-align: center;
  }

  .about-page-columns {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    flex-direction: column;
    gap: 15px;
  }
  .left-image-about-us {
    width: 37%;
    height: auto;
    /* object-fit: cover; */
    max-width: 346px;
  }

  .flex-container {
    display: flex;
    gap: 30px;
    align-items: center;
    flex-direction: column;
    margin-bottom: 100px;
    margin-top: 75px;
  }

  .team-member {
    width: 75px;
    text-align: left;
  }

  .team-member img {
    position: relative;
    width: 193px;
    cursor: pointer;
    padding: 9px;
    border: 1px dashed #01ffff;
    border-radius: 92px;
    transition: all 0.75s ease-in-out;
    z-index: 1;
  }

  .team-member h3 {
    color: #fff;
    text-align: center;
    margin-bottom: -10px;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 14px;
  }

  .team-img-large {
    border: 1px dashed red;
    border-radius: 300px;
    max-width: 350px;
    padding: 29px;
    overflow: visible;
    position: relative;
    top: -26px;
  }

  .accordion-content {
    padding: 0 5%;
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: center;
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s ease-in-out;
  }

  .accordion-content ul {
    list-style-type: none;
    padding: 5px;
    margin: 0;
  }
  .accordion-header .left-content span {
    color: var(--text-light, #f8f8f8);
    font-family: "Roboto", sans-serif;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .video-header-text {
    width: 100%;
    z-index: 3;
    padding-left: 0px;
    margin-top: 9%;
  }
  .label-section {
    text-transform: uppercase;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    padding: 0px 24px;
  }

  .progress-ring {
    position: absolute;
    transform: rotate(-90deg);
    z-index: 1;
    overflow: visible;
    top: -43px;
    left: 25px;
  }

  .time-section {
    margin-top: 20px;
    padding: 0px 22px;
    padding-left: 6px;
    margin-top: 17px;
    font-size: 7px;
  }
  .progress-ring-bar {
    position: relative;
    left: -10px;
  }

  .time-section span {
    font-size: 43px;
    display: block;
    font-weight: 300;
    padding-right: 2px;
    padding-left: 22px;
  }

  .video-header-text h1,
  #welcome-header {
    margin: 0;
    padding-top: 15px;
    color: white;
    font-family: "Roboto", sans-serif;
    font-size: 60px;
    font-style: normal;
    font-weight: 300;
    line-height: 57px;
  }

  #learn-more {
    font-size: 18px;
    font-weight: 300;
    margin-top: 13px;
    color: #f8f8f8;
    font-family: "Roboto", sans-serif;
  }
  .footer-brand {
    color: var(--ib-blue-lt, #01ffff);
    font-family: "Roboto", sans-serif;
    font-size: 28px;
    font-style: normal;
    padding-right: 17px;
    font-weight: 600;
    line-height: normal;
  }

  .footer-text {
    color: var(--text-light, #f8f8f8);
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    position: relative;
    top: -8px;
  }

  .logos img {
    max-width: 140px !important;
    position: relative;
    top: -7px;
  }

  #IBHeaderText {
    font-size: 20px;
    top: -27px;
  }

  .our-story-header {
    font-family: "Roboto", sans-serif;
    width: 330px;
    top: -149px;
    display: flex;
    justify-content: center;
    position: relative;
    padding: 89px;
    align-items: center;
    border: 2px dashed var(--ib-red, #f00);
    border-radius: 500px;
  }

  .our-story-header span {
    font-family: "Roboto", sans-serif;
    color: var(--ib-blue-lt, #01ffff);
    text-align: center;
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 56px;
    text-transform: uppercase;
  }

  .Our-Story-header-text {
    margin-bottom: 50px;
    margin-top: 0px;
    text-transform: uppercase;
  }

  .Our-Story-side-image {
    max-width: 100%;
    height: 400px;
    display: block;
  }

  .Our-Story-plus-sign {
    position: absolute;
    max-width: 40px;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
  }

  .Our-Story-overlay-text {
    position: absolute;
    top: 50%;
    line-height: 21px !important;
    width: 84%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-light, #f8f8f8);
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    max-width: 100%;
  }

  .menu-container ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    margin: 0;
    flex-direction: column;
  }

  .menu-container .current-menu-item a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -9px;
    top: 13px;
    width: 3px;
    scale: 1;
    height: 17px;
    background-color: #0000fe;
  }
  .download-section-container {
    flex-direction: column;
  }

  .download-section {
    max-width: 100%; /* Ensure it takes the full width of its container */
    margin-bottom: 15px; /* Optional: give a little space between stacked items */
    padding: 20px 0px;
  }

  .first-section {
    border-bottom: 1px dotted #01ffff;
  }
}

#hamburger-button{
  display: none;
}

/* Responsiveness for CTA Section */
@media (max-width: 1126px) {
  .cta-section {
    width: auto;
    padding: 11px 24px; /* Reduced padding for smaller screens */
    text-align: center;
  }

  .cta-left h3 {
    font-size: 28px; /* Reduced font size example */
  }

  /* Similarly, add styles for other text elements that need size reduction */
}
.checkBack{
  font-family: "roboto-condensed", sans-serif;
    font-size: 25px;
    font-weight: 700;
    line-height: normal;
    color: white;
    margin-top: 12px;
    margin-bottom: 100px;
}

.mobile-our-story{
  display: none;
}
/* Further text reduction for even smaller screens */
@media (max-width: 768px) {

  .our-story-content p {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-size: 20px;
    margin-bottom: 58px;
    margin-top: 0px;
    max-width: 100%;
}
  .desktop-our-story{
    display: none!important;
  }
  .mobile-our-story{
    display: block !important;
    padding-right: 0px;
  }
  .header-text-team{
    line-height: 65px;
  }

  .video-background-header{
    height: 64%;
    min-height: 125px;
  }
  #welcome{
    font-size: 19px;
  }
  .RealResults {
    color: var(--ib-blue-lt, #01ffff);
    font-family: "roboto", sans-serif;
    font-size: 56px;
    font-style: normal;
    font-weight: 700;
    line-height: 63px;
    letter-spacing: -2.98px;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 9px;
}

  .current-menu-item{
    background-color: #01FFFF;
  }
  .current-menu-item a{
    color: black;
  }

  .menu-container .current-menu-item a::before {
    content: none;
    position: static;
    width: auto;
    height: auto;
    background-color: transparent;
    /* Reset any other properties as needed */
}
  .menu-container li {
    font-size: 20px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-family: "Roboto", sans-serif;
}

  .hamburger-button {
    display: block !important; /* Show the hamburger button */
    /* additional styles for positioning, etc. */
  }

  .menu-container {
    display: none; /* The menu is hidden by default */
    width: 100%; /* Full width */
    /* additional styles for positioning, etc. */
     background-color: black;
     z-index: 3;
  }

  /* Styles for when the menu is open */
  .menu-container.open {
    display: block; /* Show the menu */
    position: absolute;
    top: 125px;
    left: 0;
  }



  .cta-left h3 {
    font-size: 24px; /* Further reduced font size example */
  }
  .cta-section {
    flex-direction: column; /* Stack the elements for small screens */
    gap: 10px;
  }

  /* Adjust any other necessary styles for mobile here */
}
.video-background-header::-webkit-media-controls {
  display: none !important;
}

.video-background-header::-webkit-media-controls-play-button {
  display: none !important;
}

.video-background-header::-webkit-media-controls-start-playback-button {
  display: none !important;
}

#errorUsernameLabel{
  color: var(--ib-red, #F00);
  /* body bold */
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-style: normal;
  margin: 0px;
  font-weight: 700;
  line-height: normal;
  padding-left: 43px;
  margin-top: -20px;
}


#errorPwLabel{
  color: var(--ib-red, #F00);
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-style: normal;
  margin: 0px;
  font-weight: 700;
  padding-left: 43px;
  margin-top: -20px;
  line-height: normal;
}