/* Define Root CSS Variables */

:root {
      --mainBlueColor: #193566;
      --generalBlueColor: #0047a4;
      --lightBlueColor: #667fa0;
      --background-color: #fff;
      --text-color: #222;
      --lightGrayColor: #616161;
      --darkGrayColor: #4b4b4b;

      --boxShadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      --boxShadowHover: 0 6px 12px rgba(0, 0, 0, 0.15);

      --mainFont: "Montserrat", sans-serif;
      --poppinsFont: "Poppins", sans-serif;
      --condensedFont: "Roboto Condensed", sans-serif;
}

body {
      font-family: var(--mainFont);
      color: var(--text-color);
      background-color: var(--background-color);
      margin: 0;
      padding: 0;
      font-size: 13px;
      line-height: 1.65;
      font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
      margin: 0;
      padding: 0;
      line-height: 100%;
}

h1 {
      text-transform: uppercase;
      font-family: var(--condensedFont);
      font-size: 400%;
      font-weight: 700;
}
h2 {
      font-family: var(--condensedFont);
      font-size: 300%;
      font-weight: 700;
      text-transform: capitalize;
}
h2 small {
      display: block;
      margin-bottom: -5px;
      margin-top: -5px;
      font-size: 40%;
      font-weight: 600;
      font-family: var(--poppinsFont);
      text-transform: none;
}

p{
      margin-bottom: 20px;
      line-height: 1.8;
}

a {
      color: var(--mainBlueColor);
      text-decoration: none;
      transition: 0.5s ease;
}
a:hover {
      color: var(--lightBlueColor);
      text-decoration: none;
}

blockquote{
      font-size: 110%;
      font-weight: 600;
      font-style: italic;
      font-family: "Montserrat", sans-serif;
      padding: 25px;
      color: var(--mainBlueColor);
}


.section {
      width: 100%;
}

#splashScreen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #fff;
      z-index: 9999;
      border: 15px solid var(--mainBlueColor);
      box-sizing: border-box;
      transition: 0.5s ease;
}
#splashScreen.hidden {
      opacity: 0;
      top: -100vh;
      visibility: hidden;
}
#splashScreen .logoAndSpinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
}

#splashScreen .spinner {
      position: absolute;
      top: 85px;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 3px solid var(--lightBlueColor);
      border-top-color: var(--mainBlueColor);
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
}
@keyframes spin {
      0% {
            transform: translate(-50%, -50%) rotate(0deg);
      }
      100% {
            transform: translate(-50%, -50%) rotate(360deg);
      }
}

.container {
      width: 100%;
      max-width: 1280px;
      /* padding: 0px 50px;z */
      margin: 0 auto;
}
@media (max-width: 1023px) {
      .container {
            padding: 0px 35px;
      }
}
@media (max-width: 768px) {
      .container {
            padding: 0px 20px;
      }
}

.fullBar {
      background: var(--mainBlueColor);
      color: #fff;
      min-height: 40px;
      box-sizing: border-box;
      padding: 10px 20px;
      font-size: 75%;
}
.fullBar * {
      color: #fff;
}

#app {
      width: 100%;
      min-height: calc(100vh - 170px);
}

#clientAndPartnersSection{
      /* min-height: 300px; */
      width: 100%;
      background: #FFF;
      border-top: solid 3px var(--lightBlueColor);
}

.breadcrumbs{
      width: calc(100% - 10px);
      padding: 5px 0;
      box-sizing: border-box;
      margin-top: 10px;
      margin-bottom: 20px;
      padding: 0px 15px;
}
      .breadcrumbs span{
            text-transform: capitalize;
      }
      .breadcrumbs a, .breadcrumbs span{
            font-size: 11px;
            text-decoration: none;
      } 
      .breadcrumbs a:after{
            content: ' / ';
            margin: 0 5px;
      }

.mainMenu .featuredMenu, .mainMenu .topMenu {
      display: block;
}
.menu a {
      font-weight: 600;
      padding: 5px 10px;
      text-decoration: none;
      font-family: var(--poppinsFont);
      transition: 0.5s ease;
}
.topMenuLink .menu a {
      color: #FFF;
      padding: 3px 10px;
}
.mainMenu .menu {
      padding-top: 15px;
}
.mainMenu .menu a {
      font-weight: 600;
      color: var(--mainBlueColor);
      font-size: 90%;
      padding: 8px 12px;
      border-radius: 4px;
      margin: 0 3px;
      margin-top: 10px;
      transition: 0.5s ease;
}
.mainMenu .menu a:hover {
      background: var(--lightBlueColor);
      /* color: #fff; */
}

.mobileMenuButton {
      display: block;
      color: var(--mainBlueColor);
      font-size: 150%;
      text-decoration: none;
      transition: 0.5s ease;
      border: solid 1px var(--mainBlueColor);
      box-sizing: border-box;
      padding: 5px 15px;
      line-height: 100%;
      border-radius: 5px;
      height: 38px;
      display: none;
      margin-top: 18px;
}
.mobileMenuButton:hover {
      color: #FFF;
      background: var(--mainBlueColor);
}

.mobileMenuOverlay{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10000;
      opacity: 1;
      background: #FFF;
      overflow: auto;
      padding: 35px 20px;
      box-sizing: border-box;
      transition: 0.5s ease;
}
.mobileMenuOverlay.closing{
      opacity: 0;
      top: -100vh;
      visibility: hidden;
}
      .mobileMenuClose{

            height: 40px;
            width: 40px;
            padding: 10px;
            background: #dce4ec44;
            top: 0px;
            right: 0px;
            /* margin-left: -10px; */
            position: fixed;
            margin: 5px;
            cursor: pointer;
      }

@media (min-width: 1025px) {
      .mainMenu .mobileMenuButton {
            display: none;
      }
      .mainMenu .featuredMenu, .mainMenu .topMenu {
            display: block;
      }
}
/* Mobile Menu Button */
@media (max-width: 1024px) {
      .mobileMenuButton {
            display: block;
      }
      .mainMenu .featuredMenu {
            display: none;
      }
}
@media (max-width: 768px) {
      
      .mainMenu .topMenu {
            display: none;
      }
}


.linkButton {
      padding: 10px 25px;
      box-sizing: border-box;
      font-family: var(--poppinsFont);
      font-weight: 600;
      color: #fff;
      background: var(--mainBlueColor);
      text-decoration: none;
      border-radius: 8px;
      transition: 0.5s ease;
      font-size: 90%;
}
.linkButton:hover {
      background: var(--lightBlueColor);
      color: #fff;
}

.pageTitle{
      color: var(--mainBlueColor);
}
.pageQuote{
      width: 100%;
      color: var(--generalBlueColor);
      text-align: center;
      padding: 30px;
      font-family: var(--poppinsFont);
      font-weight: 300;
}

.content{

}
      .content h2{
            font-size: 200%;
            color: var(--mainBlueColor);
            margin-bottom: 10px;
            margin-top: 20px;
      }
      .content p{
            margin-bottom: 7px;
      }

.infoPod{
      cursor: pointer;
      background: #FFF;
      box-shadow: var(--boxShadow);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 20px;
      transition: all 0.3s ease;
}
      .infoPod:hover{
            box-shadow: var(--boxShadowHover);
            transform: translateY(-5px);
      }
      .infoPod .picture{
            width: 100%;
            height: 250px;
            background-image: url('/assets/images/team/{member.image}') no-repeat center center;
            background-size: cover;
      }
      .infoPod .info{
            padding: 15px;
            text-align: center;
      }
            .infoPod .info h4{
                  font-size: 120%;
                  margin-bottom: 5px;
            }
            .infoPod .info .role{
                  font-size: 90%;
                  color: var(--generalBlueColor);
            }
            .infoPod .info .socials{
                  margin-top: 10px;
            }
                  .info .socials a{
                        display: inline-block;
                        width: 30px;
                        height: 30px;
                        line-height: 30px;
                        background: var(--lightGrayColor);
                        color: #FFF;
                        border-radius: 50%;
                        margin: 0 5px;
                        transition: all 0.3s ease;
                  }
                  .infoPod .info .socials a:hover{
                        background: var(--darkGrayColor);
                  }
                  .infoPod .info .socials a .material-symbols-outlined{
                        font-size: 16px;
                        vertical-align: middle;
                  }

.fullBanner{
      width: 100%;
      min-height: 400px;
      background-color: var(--mainBlueColor);
      background-size: cover;
      background-position: center;
      /* display: flex;
      align-items: center;
      justify-content: center; */
      position: relative;
}
      .fullBannerContent{
            background: #193566d9;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            position: absolute;
      }

.sectionTitle{
      font-size: 220%;
      color: var(--mainBlueColor);
      margin-bottom: 20px;
      margin-top: 20px;
      text-transform: capitalize;
      font-family: var(--condensedFont);
      font-weight: 700;
}