@charset "UTF-8";
/* CSS Document */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
	scroll-behavior: smooth;
	overflow-x: hidden;	
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
    
    -webkit-font-smoothing: antialaised;
    -moz-osx-font-smoothing: greyscale;
    font-smooth: never;
}

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1960,26,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7308rem + 0.2524vi, 1.04rem);
  --step--1: clamp(0.9375rem, 0.8668rem + 0.3537vi, 1.3rem);
  --step-0: clamp(1.125rem, 1.0274rem + 0.4878vi, 1.625rem);
  --step-1: clamp(1.35rem, 1.2171rem + 0.6646vi, 2.0313rem);
  --step-2: clamp(1.62rem, 1.4407rem + 0.8966vi, 2.5391rem);
  --step-3: clamp(1.944rem, 1.704rem + 1.1998vi, 3.1738rem);
  --step-4: clamp(2.3328rem, 2.0139rem + 1.5946vi, 3.9673rem);
  --step-5: clamp(2.7994rem, 2.3779rem + 2.1071vi, 4.9591rem);
}

:root {
  --space-3xs: clamp(4px, 3.0244px + 0.3049vi, 9px);
  --space-2xs: clamp(8px, 6.0488px + 0.6098vi, 18px);
  --space-xs: clamp(12px, 9.2683px + 0.8537vi, 26px);
  --space-s: clamp(16px, 12.2927px + 1.1585vi, 35px);
  --space-m: clamp(24px, 18.3415px + 1.7683vi, 53px);
  --space-l: clamp(32px, 24.5854px + 2.3171vi, 70px);
  --space-xl: clamp(48px, 36.878px + 3.4756vi, 105px);
  --space-2xl: clamp(64px, 49.1707px + 4.6341vi, 140px);
  --space-3xl: clamp(96px, 73.7561px + 6.9512vi, 210px);
}

a {
  text-decoration: none;
	color: inherit;
}

/* main top and logo container */
#main-top {
  display: flex;
  justify-content: space-between; /* Aligns items to the start and end of the flex container */
  width: 100%;
  position: relative;
  
}

#logo-container {
  width: 50%;
	padding-top: 35px;
    padding-left: 65px;
	min-width: 280px;
	max-width:280px;
	max-height:85px;
}

#logo-container img {
    max-width: 200px; /* Adjust based on the size of your logo */
    height: auto;
}

/* top left navigation */

#navigation {
    width: 50%;
    text-align: right; /* Aligns the navigation content to the right */
    padding-top: 35px; /* Adjust the padding from the top */
    padding-right: 25px; /* Adjust the padding from the right */
}

#navigation ul {
    list-style-type: none; /* Removes default list styling */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
}

#navigation ul li {
    display: inline; /* Displays list items inline */
    margin-right: 20px; /* Adjust space between list items */
}

#navigation ul li a {
    text-decoration: none; /* Removes default link underline */
    color: #142b48; /* Adjust link color */
    font-size: 18px; /* Adjust font size */
    font-family: "Gloock", serif;
    font-weight: 400;
    font-style: normal;
    position: relative; /* Needed for absolute positioning of the pseudo-element */
    overflow: hidden; /* Ensures the pseudo-element is clipped to the link's dimensions */
    padding-bottom: 5px; /* Adds some space at the bottom for the border */
}

#navigation ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0; /* Start with a width of 0 */
    height: 2px; /* Set the height of the bottom border */
    background-color: #142b48; /* Set the color of the bottom border to match the link color */
    transition: width 0.3s ease; /* Animate the width property */
}

#navigation ul li a:hover::after {
    width: 100%; /* On hover, expand the width to 100% */
}



/* overlay for navigation */

.overlay {
	display: none; 
	position: absolute;
  	top: 0;
  	right: 0;
  	width: 450px;
 	  height: 100vh;
  	background-color: #ffffff;
  	z-index: 9999;
}

.overlay-content {
  background-color: #525f76;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
	padding-top: 150px;
}

.overlay-content a {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
  color: black;
}

.close-button {
  position: absolute;
  top: 15px;
  right: 30px;
  font-size: 35px;
  color: #ffffff;
  cursor: pointer;
}
.overlay-text{
	 font-size: 25px;
	font-family: "Gloock", serif;
  	font-weight: 400;
  	font-style: normal;
	color: #ffffff;
	padding-bottom: 25px;
}

/* hide mobile menu */

.mobile-menu-toggle{
    display: none;
    }
    
    .mobile-overlay-content{
    display: none;
    }
    
    /* hide mobile banner */
    
    .mobile-banner{
    display: none;
    }

    /* banner section */

    /* main image banner */

.banner-container {
    position: relative;
    display: inline-block;
    
  }
  
  #private-credit-banner {
    position: relative;
    z-index: 1;
     max-height:600px;
  }
  
  #private-credit-banner img {
    display: block;
    width: 100%;
    height: auto;
      padding-top:20px;
  }
  
  .banner-overlay {
    position: absolute;
    display: flex;
    justify-content: center;
    top: 20%;
    left: 10%;
    z-index: 2;
    text-align: center;
    color: white;
      background-color: #00477b;
    width: clamp(250px, 70%, 300px);
      bottom: -65px;
  }
  
  .banner-overlay h2 {
      margin-bottom: 20px;
      padding-top: 55px;
      padding-left: var(--space-m);
      padding-right: var(--space-m);
      font-family: "Gloock", serif;
    font-weight: 400;
    font-style: normal;
    letter-spacing:-2.2%;
    font-size: var(--step-1); 
  }

  /* main section */

  .main-parent {
    width: 100%;
    display: flex;
    padding-bottom: 100px;
    padding-top: 150px;
  }
  
  .main-left, .main-right {
    width: 50%;
    box-sizing: border-box;
  }
  
  .main-left {
    text-align: left;
    background-color: #f1f0ef;
    min-height: 500px;
    padding-top: 45px;
  }
  
  .main-right {
    text-align: right;
      
  }
  
  .main-right img {
    width: 100%;
    height: 100%;
  }
  
  .approach-text{
    padding-left: 50px;
    padding-right: 50px;
    font-family: "haboro", sans-serif; 
    font-weight: 200;
    font-style: normal;
    font-size: var(--step--2);
    color: #3D3D3D;
    line-height: 2;
    padding-bottom: 15px;
  }
  
  .our-approach{
    font-family: "haboro", sans-serif; 
    font-weight: 200;
    font-style: normal;
    font-size: var(--step-2);
    color: #404040;
    display: flex;
    justify-content: center;
    padding-bottom: 25px;
  }

  /* Footer */

#footer-container {
    background-color: #424244;
    padding: 20px;
    position: relative;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Align child elements to opposite ends */
  }
  
  #left-footer p {
    color: #ffffff;
    font-size: 12px;
    font-family: "Gloock", serif;
    font-weight: 400;
    font-style: normal;
    padding-top: 15px;
    padding-bottom: 15px;
    padding: 0 10px; /* Adjust padding as needed */
    width: 50%; /* Adjust width as needed */
  width: auto;
  }
  
  #bottom-navigation {
    color: #ffffff;
    line-height: 1;
    font-size: 13px;
    font-family: "Gloock", serif;
    font-weight: 400;
    font-style: normal;
    width: 50%; /* Adjust width as needed */
  }
  
  #bottom-navigation ul {
    list-style-type: none; /* Remove bullet points */
    display: flex; /* Align items horizontally */
    justify-content: flex-end; /* Align items to the right */
    padding: 0; /* Remove default padding */
  }
  
  #bottom-navigation li {
    margin-left: 20px; /* Add space between navigation items */
  }

  .small-approach-banner{
    display: none;;
  }
  

    /* media query 1961px */

    @media (min-width: 1961px) {
        body {
            display: flex;
            justify-content: center;
            min-height: 100vh;
        }
        .centered-content {
            max-width: 1960px;
            width: 100%;
        }
      }

      /* media query 1961px */

      @media screen and (max-width: 700px){
   
        #footer-container {
            flex-direction: column;
        }
      
        #left-footer {
            order: 1;
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
        }
      
        #bottom-navigation {
            order: 2;
            width: 100%;
            margin-top: 20px;
            
        }
      
        #bottom-navigation ul {
            justify-content: center;
            padding-bottom: 20px;
        }
      }

      @media screen and (min-width: 600px) {
        .mobile-overlay {
          display: none;
        }
      }

      /* media query 340 and 600px */

      @media only screen and (min-width: 340px) and (max-width: 600px) {
        #navigation {
          display: none;
        }
      
        #main-top {
          display: flex;
          justify-content: space-between; /* Aligns items to the start and end of the flex container */
          width: 100%;
          position: relative;
        }
      
        #logo-container {
          width: 50%;
          padding-top: 35px;
          padding-left: 35px;
          min-width: 200px;
          max-width: 200px;
          max-height: 85px;
        }
      
        #logo-container img {
          min-width: 200px;
          max-width: 220px; /* Adjust based on the size of your logo */
          height: auto;
        }
      
        /* Position the mobile menu toggle button in the top right corner */
        .mobile-menu-toggle {
          cursor: pointer;
          display: block; /* Ensure it's visible */
          position: absolute;
           right: 35px;
           top: 25px;
        }
        
        .mobile-overlay {
          display: none;
          position: absolute;
          top: 0px;
          width: 100vw;
             height: 100vh;
          background-color: #142b48;
          font-family: "Gloock", serif;
            font-weight: 400;
            font-style: normal;
          z-index: 999;
        }
        
        .mobile-overlay-content {
          position: absolute;
          display: block;
          color: #fff;
          top: 20%;
          left: 50%;
          transform: translate(-50%, -50%);
      
        }
        
        .mobile-overlay-content ul {
          list-style-type: none;
          padding: 0;
          margin: 0;
        }
        
        .mobile-overlay-content li {
          margin-bottom: 20px;
        }
        
        .mobile-overlay-content a {
          color: #fff;
          text-decoration: none;
          font-size: 20px;
        }
        
        .close-button {
          position: absolute;
          top: 20px;
          right: 35px;
          color: #fff;
          font-size: 60px;
          cursor: pointer;
        }

        #private-credit-banner{
            display: none;
            }
            
            .small-approach-banner{
            display: block;
            padding-top: 0px;
            width: 100%;
            }

            .banner-overlay {
                position: absolute;
                display: flex;
                justify-content: center;
                top: 58px;
                right: 0;
                z-index: 2;
                text-align: center;
                color: white;
                  background-color: #00477b;
                height: 220px;
                width: 250px;
                margin-left: auto;
              }
              
              .banner-overlay h2 {
                  margin-bottom: 20px;
                  padding-top: 30px;
                  padding-left: var(--space-m);
                  padding-right: var(--space-m);
                  font-family: "Gloock", serif;
                font-weight: 400;
                font-style: normal;
                letter-spacing:-2.2%;
                font-size: 26px;
                  
              }
              
    }


    @media screen and (max-width: 1000px){
    .main-parent {
        width: 100%;
        display: flex;
        flex-direction:column;
          padding-bottom: 100px;
      }   
      .main-left, .main-right {
        width: 100%;
        box-sizing: border-box;
      }
      .main-left {
        text-align: left;
        background-color: #f1f0ef;
        min-height: 350px;
        padding-top: 45px;
        padding-bottom: 35px;
      }

    }