/* Importing Open Sans Font  from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600&display=swap');

/* Resetting deafault styles to ensure consistent box-sizing */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* Base body styling with fallback fonts */
body {
 font-family: 'Open Sans', 'Segoe UI', Calibri, 'Roboto', Helvetica, Arial, 'DejaVu Sans', sans-serif;
overflow-x: hidden;

}
/* Custom CSS variables for consistent theming */
:root{
    --cerulean-blue:   #234ac1;
    --transparent-overlay:  #204cb8;  /* Opacity to  0.9; */
    --text-color: #333;
    --burger-icon:  #071b2b;
   
}

/*  Navigation Section */
    .nav {
        margin-top: 3%;
       
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2rem 5%;
    
    }

    .nav img {
        height: 35px;
        margin-left: 10%;
    }

    .nav svg {
        width: 24px;
        fill: var(--burger-icon);
        margin-right: 10%;
    }

/*  Hero Section with full viewport height  */
    .hero-section {
        margin-top: 3%;
        position: relative;
        overflow: visible; /* Changed from hidden to allow underlay to extend */
        height: 100vh;
    }

/*    Slider Container for image slideshow */
.slider-container {
    position: relative;
    width: 90%; 
    height: 100%;
    margin: 0 3em;
    z-index: 1; /* Higher than underlay */
    overflow: hidden; /* Hide overflow images */
}

.slider-image {
    width: 100%; /* Changed from 90% */
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin: 0; 
}


    .slider-image.active {
        opacity: 1;
    }

    .slider-dots {
        position: absolute;
        bottom: 20px;
        right: 10%;
        display: flex;
        gap: 10px;
    }
/*  Overlay Element on Hero Slider */
    .overlay-text {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: var(--cerulean-blue);
        letter-spacing: 0.01em;
        color: white;
        padding: 25px 40px;
        padding-left: 110px;
        width: 40%;
        max-width: 450px;
        font-weight: 700;
        font-size: 1rem;
        z-index: 2;
    
    }
 /* Black Underlay beneath hero slider for visual contrast */

 .black-underlay {
    position: absolute;
    top: 42%;
    left: calc(90% + 3em); /* Positioning it  just after slider container */
    padding: 25px 40px;
    z-index: 0; /* Below slider images but above background */
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    background-color: black;
    height: 60px;
    width: 2%;
    max-width: 450px;
}
/* 
.hero-section:hover .black-underlay {
    opacity: 1; /* Show with full opacity when hovering over the hero section */

  
/*   Navigation Arrow for slider  */
    .nav-arrow {
        position: absolute;
        left: calc(90% - 60px); /* 90% - slider width, minus the arrow width */
        top: 42%;
        transform: translateY(-60%);
        transform: translateX(98%);
        background: transparent;
        border: none;
        z-index: 2;
    }

    .nav-arrow svg {
        
        width: 60px;
        height: 50px;
        fill: white;
    }



/* Carousel Indicator (dot)*/
    .dot {
        width: 15px;
        height: 15px;
        opacity: 0.5;
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    .dot.active {
        opacity: 1;
    }

/* Main Content Section */
    .content-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4rem 5%;
        background-color: white;
        margin-top: 3%;
        margin-left: 5%;
    }
/* Text Content */
    .text-content {
        width: 50%;
    }

    .text-content p {
        color: var(--text-color);
        
        font-weight: 300;
        line-height: 1.6;
        font-size: 1rem;
        padding-left: 7%;
        letter-spacing: 0.02em;
    }
/* Image Content  */
    .image-content {
        width: 45%;
    }

    .image-content img {
        width: 90%;
        height: auto;
        padding-right: 13%;
     
    }

/*  == Services Section ==*/
    .services-section {
        
        margin-top: 5%;

    }

    .services-grid {
        display: flex;
        gap: 2%;
    
    }
 /* Services Item   */
    .service-item {
        width: 100%;
        padding-left: 1%;
       
    }

    .service-item img {
        width: 90%;
        height: auto;
        transition: transform 0.3s ease;
    }

    .service-item img:hover {
        transform: scale(1.03);
    }

/* Fund types Section */
.fund-types {
    display: flex;
    flex-direction: row;
    gap: 0.5%;
    height: auto;
    margin-left: 8%; /* Change from 8% to match services-section */
    width: 90%; /* Add to match overall width */
    margin-top: 3%;
    text-align: center;
}
    .fund-type {
        background-color: var(--cerulean-blue);
        color: white;
        font-size: x-small;
        width: 10%;
        font-weight: bold;
        margin-bottom: 3%;
        height: auto; 
        transition: transform 0.4s ease;
        padding: 7px;
        position: relative; /* Required for pseudo-element */
    }
    
    .fund-type::after {
        content: '>';
        font-weight: bolder;
        color: #2aa4e7;
        position: absolute;
        right: 10px; /* Position from right edge */
        top: 50%; /* Center vertically */
        transform: translateY(-50%); /* Fine-tune vertical centering */
    }

    .fund-type:hover  {
        transform: scale(1.03);
    
    }
    /*  */
.fund-type:nth-child(2n) {
    margin-right: 20px;
    margin-left: -11px;
     
}
.fund-type:nth-child(3n) {
    margin-right: 20px;
    margin-left: 4px !important;
 
}
.fund-type:nth-child(4n){
    margin-right: 18px;
    margin-left: -30px;
     
    
}
.fund-type:nth-child(5n){

  margin-left: 3px;
     
    
}
.fund-type:nth-child(6n) {
    margin-right: 24px;
    margin-left: -6px !important;
     /* Adjust the value as needed */
}
/* Cursor styling for 'interactive' elements */
    .fund-type img:hover,
    .service-item img:hover,
    .dot, .nav img, .nav-arrow,
     .nav svg {
        cursor: pointer;
    }

    

/* == Tablet Break Point (max-width: 768px) == */
@media (max-width: 768px) {
  
    .hero-section{
         height: 300px;  /* Reduced height for tablets*/
     }
     .overlay-text{
         width: 50%;
         font-size: 0.9rem;
         padding: 5% 10%;
     }
     .black-underlay{
      display: none;
     }
     .nav-arrow{
        display: none;
     }
     .content-section{
         width: 100%;
         margin-top: 2%;

        
     }
     .text-content{
        padding-left: 0;
       
     }

     .fund-type:nth-child(2n),
    .fund-type:nth-child(3n),
    .fund-type:nth-child(4n),
    .fund-type:nth-child(5n),
    .fund-type:nth-child(6n) {
        margin-right: 0;
        margin-left: 0;
    } 
 }

 /* Larger Tablet breakpoint (max-width: 1024px) */
 @media (max-width: 1024px) {
    .hero-section {
        height: 50vh; /* Adjusted for better proportionality */

    }
    .fund-type:nth-child(2n),
    .fund-type:nth-child(3n),
    .fund-type:nth-child(4n),
    .fund-type:nth-child(5n),
    .fund-type:nth-child(6n) {
        margin-right: 0;
        margin-left: 0;
    }
}
 /* == Mobile == */
 
 /* == Break Point: Mobile ==*/
 @media (max-width: 600px) {
     .nav img {
         height: 30px;
         margin-left: 12%;
     }
     .nav-arrow{
       display: none;
     }
     .black-underlay{
        display: none;
     }
     .hero-section {
         height: 30vh;
     }
     .slider-image {
         width: 90%;
     }
     .slider-dots{
         right: 14%;
     }
    
     .overlay-text {
         width: 50%;
         left: 5%;
         font-size: 0.5rem;
         font-weight: 600;
         line-height: 1.2; 
         padding: 3% 11% 3%;
     }
     .text-content {
         
         
         margin-right: 10%;
         width: 90%;
         font-size: 0.08rem;
     }
     .image-content {
         width: 100%;
     }
     .image-content img {
         width: 100%;
         padding-left: 5%;
         padding-top: 10%;
         margin-left: 0;
     }
     .services-grid {
         flex-direction: column;
     }
     .service-item {
         width: 100%;
         padding-top: 5%;
        
     }
     .service-item img{
        width: 70%;

        margin-left: 14%;
     }
     .service-item, .fund-type {
         margin-top: -3%;
     }
     .content-section {
         display: flex;
         flex-direction: column;
         align-items: center;
         padding: 2rem 5%;
     }
     /* .fund-types and .fund-type 2-by-2 layout */
     .fund-types {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         width: 90%; 
         padding: 10%;
         gap: 2%; 
         margin: 0 auto; 
         margin-left: 4%;
         
         
     }
     .fund-type {
         width: 48%; /* Two per row  */
         color: white;
         font-size: x-small;
         font-weight: bold;
         padding: 10px;
         height: auto;
         transition: transform 0.4s ease;
         margin-top: 2%; 
         font-size: 0.5rem;
 
     }
     
     .fund-type:nth-child(2n),
     .fund-type:nth-child(3n),
     .fund-type:nth-child(4n),
     .fund-type:nth-child(5n),
     .fund-type:nth-child(6n) {
         margin-right: 0;
         margin-left: 0;
     }
 }
 
 
 /* Laptop Breakpoint (min-width: 1024px) */
 @media (min-width: 1024px){
     .nav {
         padding: 2rem var(--base-padding); 
     }
     .hero-section {
         height: 60vh; 
     }
     .slider-image {
         margin: 0 3em;
     }
     .overlay-text {
         width: 35%;
         max-width: 450px;
         font-weight: 700;
     }
   
     .black-underlay {
        top: 50%;
        transform: translateY(-50%); /* Aligns it with the nav arrow */
        height: 4rem; 
    }
     .nav-arrow {
         right: 9%;
     } 
     .services-section{
        margin-left: 2%;
        padding: 0 5% 0 5%;
     }
     .service-item{
        width: 50%;
     }
     .content-section {
         padding: 4rem var(--base-padding);
     }
     .fund-types {
         flex-wrap: nowrap;
         flex-direction: row;
         
         gap: 4%;
     }
     .fund-type {
         width: 12%;

     }
 
 
 
    }


/* Medium screens between mobile and laptop (600px - 1024px) */
    @media (min-width: 600px) and (max-width: 1024px) {
    .fund-types {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 items per row */
        gap: 10px; 
        justify-content: center;
        
    }
   
    .text-content{
        width: 100%;
        padding-left: 0%;
    }
    .image-content img {
     
        padding-left: 5%;
    }
    .content-section{
        margin-top: 0%;
        margin-top: 0%;
    }
    .service-item img {
         width: 90%;
       
       
    }
    .services-grid{
       margin-left: 7%;
    }
    .fund-type {
        width: 96%;
                
    }
    }