@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;
}

/* 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-2);
	
}

.button-link {
  position: absolute; /* Positions the button within banner-overlay */
  bottom: 50px;
  align-self: center;
}


.rounded-button {
  padding: 10px 40px;
  font-weight: bold;
  color: #F5F5F5;
  background-color: transparent;
  border: 2px solid #F5F5F5;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
	font-size: 14px;
	font-family: "Gloock", serif;
  	font-weight: 400;
  	font-style: normal;
	 text-decoration: none;
	
}
.rounded-button:hover {
  color: #ffffff;
  border-color: #ffffff;
	border: dashed;
}
	
/* main services content */

.main-title{

  margin-top: 115px;       /* Top margin */
  padding-left: var(--space-3xl);       /* Left padding */
  padding-right: var(--space-3xl);     /* Right padding */
  text-align: center;
  
}

.main-title h1{

    font-family: "Gloock", serif;
  	font-weight: 400;
  	font-style: normal;
    color: #49004b;
    font-size: var(--step-2) ;
}

.section-one {
  margin-top: 65px;       /* Top margin */
  padding-left: 10%;       /* Left padding */
  padding-right: 10%;      /* Right padding */
  display: grid;           /* Enable grid layout */
  grid-template-columns: repeat(2, 1fr); /* Define two columns of equal width */
  gap: 50px;               /* Space between grid items */
  box-sizing: border-box;
 
}
.child-div-1{
  border-bottom: 1.5px solid #787B00; /* 1px solid black border at the bottom */
  border-left: 1.5px solid #787B00;   /* 1px solid black border on the left */
  min-height: 280px;         /* 20px padding at the bottom */
  max-height: 380px;
  box-sizing: border-box;
  bottom: 0;
 
}

.child-div-1 h2{
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
  color: #274b00;
  font-size: 24px;
  padding-left: 15px;
  padding-bottom: 20px;
}



.content-1-text{
  font-family: haboro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: var(--step--0);
  padding-left: 20px;
  padding-bottom: 20px;
  line-height: 1.4;
  color: #273f4c;
}

.child2{
  border: 0px   /* Border for each child */
}

.child-div-2 {
  border-bottom: 1.5px solid #787B00; /* 1px solid black border at the bottom */
  border-left: 1.5px solid #787B00;   /* 1px solid black border on the left */
  min-height: 280px;         /* 20px padding at the bottom */
  max-height: 380px;
  box-sizing: border-box;

}
.child-div-2 h2{
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
  color: #274b00;
  font-size: 24px;
  padding-left: 15px;
  padding-bottom: 20px;
  
}

.content-2-text{
  font-family: haboro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: var(--step--0);
  padding-left: 20px;
  padding-bottom: 20px;
  line-height: 1.4;
  color: #273f4c;
}


/* Section Two */

.bottom-banner {
  position: relative;
  margin-top: 75px;
  margin-bottom: 75px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  place-items: center;

}

.bottom-banner h1 {
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
  color: #49004b;
  font-size: var(--step-2);
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
  line-height: 1.5;
  text-align: center;
}

/* bottom banner animation */

/* Initial state of the element */
.bottom-banner {
  opacity: 0;
  transition: opacity 4.5s ease-in-out;
}

/* Keyframes for the fade-in effect */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Class added via JavaScript when element is visible */
.fade-in {
  animation-name: fadeIn;
  animation-duration: 4.5s;
  animation-fill-mode: forwards;  /* Keeps the element visible after animation ends */
}

/* content animation left to right*/

.section-one .child1, .section-one .child2 {
  position: relative;
  opacity: 0; /* Start elements as invisible */
  transition: opacity 2.5s ease-in-out; /* Smooth transition for opacity */
}

.section-one .child1 {
  left: -100%; /* Start off-screen to the left */
}

.section-one .child2 {
  left: 100%; /* Start off-screen to the right */
}
	   
@keyframes fadeInSlideInFromLeft {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

@keyframes fadeInSlideInFromRight {
  from {
    left: 100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
	   
.section-one .child1.start-animation {
  animation: fadeInSlideInFromLeft 2.5s forwards;
}

.section-one .child2.start-animation {
  animation: fadeInSlideInFromRight 2.5s forwards;
}

/* 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 */
}

/* hide mobile menu */

.mobile-menu-toggle{
display: none;
}

.mobile-overlay-content{
display: none;
}

/* hide mobile banner */

.mobile-banner{
display: none;
}


/* media query */

@media only screen and (min-width: 600px) and (max-width: 1280px){
  

  .section-one {
  
    padding-left: 10%;       /* Left padding */
    padding-right: 10%;      /* Right padding */
    display: grid;           /* Enable grid layout */
    grid-template-columns: 1fr; /* Set a single column */
    grid-auto-rows: auto;  
    gap: 50px;               /* Space between grid items */
    box-sizing: border-box;
  }
  
  .button-link{display: none;}
}

@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;
  }


/* XXXXXXXXXXXX */

.section-one {
  margin-top: 45px;       /* Top margin */
  padding-left: 10%;       /* Left padding */
  padding-right: 10%;      /* Right padding */
  display: grid;           /* Enable grid layout */
  grid-template-columns: 1fr; /* Set a single column */
  grid-auto-rows: auto;  
  gap: 50px;               /* Space between grid items */
  box-sizing: border-box;
}

.main-title{

  margin-top: 45px;       /* Top margin */
  padding-left: var(--space-2xl);       /* Left padding */
  padding-right: var(--space-2xl);     /* Right padding */
  text-align: center;
  
}

.main-title h1{

    font-family: "Gloock", serif;
  	font-weight: 400;
  	font-style: normal;
    color: #49004b;
    font-size: var(--step-2);
}

.bottom-banner {
  position: relative;
  margin-top: 50px;
  margin-bottom: 50px;
  box-sizing: border-box;
  width: 100%;
  display: grid;
  place-items: center;
}

.bottom-banner h1 {
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
  color: #49004b;
  font-size: var(--step-2);
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
  line-height: 1.2;
  text-align: center;
}

#private-credit-banner{
display: none;
}

.mobile-banner{
display: block;
padding-top: 35px;
width: 100%;
}

/* banner overlay */

.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;
	
}

.button-link{
  display: none;
}

.child-div-1{
  border-bottom: 1.5px solid #787B00; /* 1px solid black border at the bottom */
  border-left: 1.5px solid #787B00;   /* 1px solid black border on the left */
 min-height: 500px;

}

.child-div-1 h2{
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
  color: #274b00;
  font-size: 20px;
  padding-left: 15px;
  padding-bottom: 20px;
}

.child-div-2 {
  border-bottom: 1.5px solid #787B00; /* 1px solid black border at the bottom */
  border-left: 1.5px solid #787B00;   /* 1px solid black border on the left */
  min-height: 500px;        /* 20px padding at the bottom */
  
  
 
}

.child-div-2 h2{
  font-family: "Gloock", serif;
  font-weight: 400;
  font-style: normal;
  color: #274b00;
  font-size: 20px;
  padding-left: 15px;
  padding-bottom: 20px;
 
  
}

.content-1-text{
  font-family: haboro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: var(--step-0);
  padding-left: 20px;
  padding-bottom: 20px;
  line-height: 1.4;
  color: #333333;
  text-align: justify;
}

.content-2-text{
  font-family: haboro, sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: var(--step-0);
  padding-left: 20px;
  padding-bottom: 20px;
  line-height: 1.4;
  color: #333333;
  text-align: justify;
}
}

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

@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 (min-width: 1961px) {
  body {
      display: flex;
      justify-content: center;
      min-height: 100vh;
  }
  .centered-content {
      max-width: 1960px;
      width: 100%;
  }
}

@media (max-width: 370px){
  .child-div-1{
    border-bottom: 1.5px solid #787B00; /* 1px solid black border at the bottom */
    border-left: 1.5px solid #787B00;   /* 1px solid black border on the left */
   min-height: 600px;
  }

  .child-div-2 {
    border-bottom: 1.5px solid #787B00; /* 1px solid black border at the bottom */
    border-left: 1.5px solid #787B00;   /* 1px solid black border on the left */
    min-height: 600px;        /* 20px padding at the bottom */
  }

}