@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html{
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

nav {
    overflow: hidden;
    width: 100%;
    transition: 0.6s ease;
    position: fixed;
    box-sizing: border-box;
    z-index: 100000000000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background-color: white;
    height: 15vh;
}

nav ul {
    list-style: none;
    display: inline-flex;
    align-items: center;
    transition: 0.9s ease;
}

nav ul li {
    list-style: none;
    position: relative;
    margin-right: 20px;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li a {
    text-decoration: none;
    color: #000;
    padding: 10px 20px;
    transition: 0.6s ease;
    font-size: 1.1em;
    font-weight: 500;
}

nav ul li a:hover {
    background: transparent;
}

nav ul li a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 5px;
    left: 0;
    bottom: -6px;
    transform: scaleX(0);
    transition: transform .5s;
    transform-origin: left;
}

nav a:hover::after {
    transform-origin: left;
    transform: scaleX(1);
}

nav .logo1 img {
    width: 150px;
    height: auto;
}

nav .login-signup-buttons {
    display: flex;
    gap: 15px;
}

nav .login-signup-buttons .sign-up a,
nav .login-signup-buttons .login a {
    text-decoration: none;
    padding: 10px 15px;
    background-color: #000;
    color: #fff;
    transition: 0.6s ease;
}

nav .login-signup-buttons .sign-up a:hover,
nav .login-signup-buttons .login a:hover {
    background-color: #333;
}

header#h1 {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(sources/investment-planning.jpg);
    background-attachment: fixed;
}

.title1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.title1 h1 {
    color: #000;
    font-size: 30px;
    color: #fff;
}

.slogan {
    position: absolute;
    top: 59%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    word-wrap: break-word;
}

.slogan p{
    color: #fff;
}

.read-more-button{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.read-more-button a{
    color: #fff;
    background: #000;
    text-decoration: none;
    padding: 10px 30px;
    transition: 0.6s ease;
}

.read-more-button a:hover{
    background-color: #333;
}

header#h2{
    height: 75vh;
}

.wrapper2{
    max-width: 1800px;
    margin: auto;
}

.title2{
    position: absolute;
    top: 105%;
    left: 30%;
    transform: translate(-50%,-50%);
}

.title2 h1 span{
    color: maroon;
}

.description1{
    position: absolute;
    top: 120%;
    left: 30%;
    transform: translate(-50%,-50%);
    width: 400px;
}

.fincreed-logo1{
    position: absolute;
    top: 120%;
    left: 70%;
    transform: translate(-50%,-50%);
}

.fincreed-logo1 img{
    width: 100px;
    height: auto;
}

.img-product1{
    position: absolute;
    top: 155%;
    left: 20%;
    transform: translate(-50%,-50%);
}

.img-product2{
    position: absolute;
    top: 155%;
    left: 40%;
    transform: translate(-50%,-50%);
}

.img-product3{
    position: absolute;
    top: 155%;
    left: 60%;
    transform: translate(-50%,-50%);
}

.img-product4{
    position: absolute;
    top: 155%;
    left: 80%;
    transform: translate(-50%,-50%);
}

.img-product1 img{
    width: 300px;
    height: auto;
}

.img-product2 img{
    width: 300px;
    height: auto;
}

.img-product3 img{
    width: 300px;
    height: auto;
}

.img-product4 img{
    width: 300px;
    height: auto;
}

.products-title{
    position: absolute;
    top: 135%;
    left: 50%;
    transform: translate(-50%,-50%);
}

header#h3{
    height: 30vh;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(sources/2.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.clients p{
    color: #fff;
    font-weight: 1000;
    font-size: 20px;
    position: absolute;
    top: 195%;
    left: 20%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
}

.clients h1{
    color: #fff;
    font-weight: 1000;
    font-size: 60px;
    position: absolute;
    top: 190%;
    left: 20%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.families h1{
    color: #fff;
    font-weight: 1000;
    font-size: 60px;
    position: absolute;
    top: 190%;
    left: 40%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.families p{
    color: #fff;
    font-weight: 1000;
    font-size: 20px;
    position: absolute;
    top: 195%;
    left: 40%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
}

.assets h1{
    color: #fff;
    font-weight: 1000;
    font-size: 60px;
    position: absolute;
    top: 190%;
    left: 60%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.assets p{
    color: #fff;
    font-weight: 1000;
    font-size: 20px;
    position: absolute;
    top: 195%;
    left: 60%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
}

.years-of-experience h1{
    color: #fff;
    font-weight: 1000;
    font-size: 60px;
    position: absolute;
    top: 190%;
    left: 80%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #fff;
}

.years-of-experience p{
    color: #fff;
    font-weight: 1000;
    font-size: 20px;
    position: absolute;
    top: 195%;
    left: 80%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
}

header#h4{
    height: 100vh;
    background-color: whitesmoke;
}

.latest-blog-title1{
    position: absolute;
    top: 215%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.latest-blog-title1 h1{
    font-size: 40px;
    font-weight: 1000;
    word-spacing: 10px;
}

.latest-blog-title1 h1 span{
    color: maroon;
}

.blog1{
    width: 500px;
    height: 650px;
    position: absolute;
    top: 260%;
    left: 20%;
    transform: translate(-50%,-50%);
    background-color: white;
    transition: 0.6s ease;
}

.blog1:hover{
    box-shadow: 0px 40px 60px #000;
}

.blog1-title1 h1{
    position: absolute;
    width: 400px;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 1000;
}

.blog1-description1 p{
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.details-button-blog1 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 10px 20px;
    border: transparent;
    border-radius: 10px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.blog2{
    width: 500px;
    height: 650px;
    position: absolute;
    top: 260%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: white;
    transition: 0.6s ease;
}

.blog2:hover{
    box-shadow: 0px 40px 60px #000;
}

.blog2-title1 h1{
    position: absolute;
    width: 400px;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 1000;
}

.blog2-description1 p{
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.details-button-blog2 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 10px 20px;
    border: transparent;
    border-radius: 10px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.blog3{
    width: 500px;
    height: 650px;
    position: absolute;
    top: 260%;
    left: 80%;
    transform: translate(-50%,-50%);
    background-color: white;
    transition: 0.6s ease;
}

.blog3:hover{
    box-shadow: 0px 40px 60px #000;
}

.blog3-title1 h1{
    position: absolute;
    width: 400px;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 40px;
    text-transform: uppercase;
    font-weight: 1000;
}

.blog3-description1 p{
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.details-button-blog3 a{
    text-decoration: none;
    color: #fff;
    background-color: #000;
    padding: 10px 20px;
    border: transparent;
    border-radius: 10px;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
}

header#h5{
    height: 80vh;
    background-color: white;
}

.title-our-partners{
    position: absolute;
    top: 315%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.title-our-partners h1{
    text-transform: uppercase;
    font-weight: 1000;
}

.title-our-partners h1 span{
    color: maroon;
}

.img-our-partners{
    position: absolute;
    top: 350%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 400px;
    overflow: hidden;
}

.img-our-partners img{
    animation: scroll 40s linear infinite;
    margin-bottom: 0px;
}

@keyframes scroll{
    0%{
        transform: translateY(0);
    }

    100%{
        transform: translateY(calc(-250px * 9));
    }
}

header#h6{
    height: 40vh;
    background-image: linear-gradient(rgba(0, 19, 12, 0.5),rgba(0, 20, 13, 0.5)), url(sources/map-world.jpg);
}

/*.address-title{
    position: absolute;
    top: 10%;
    left: 30%;
    transform: translate(-50%,-50%);
}

.address-title h1{
    color: #fff;
    font-weight: 1000;
    text-transform: uppercase;
    font-size: 20px;
}

.address-description p{
    color: #fff;
    font-size: 15px;
    font-weight: 1000;
}

.address-description{
    position: absolute;
    top: 40%;
    left: 30%;
    transform: translate(-50%,-50%);
    width: 400px;
    height: auto;
}

.address-phone p{
    position: absolute;
    top: 70%;
    left: 30%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 20px;
    white-space: nowrap;
}

.address-email p{
    position: absolute;
    top: 90%;
    left: 30%;
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 20px;
    white-space: nowrap;
}*/

/*.address{
    position: absolute;
    top: 405%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1500px;
    height: 340px;
    padding: 20px;
    background: linear-gradient(rgba(1, 71, 1, 0.322),rgba(1, 71, 1, 0.322));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px;
}*/

.background-blur-footer{
    position: absolute;
    top: 407%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 1910px;
    height: 400px;
    padding: 20px;
    background-color: white;
    color: black;
    /*background: linear-gradient(rgba(255, 255, 255, 0.322),rgba(255, 255, 255, 0.322));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);*/
    /*border-radius: 30px;*/
}

.address-title1{
    position: absolute;
    top: 10%;
    left: 25%;
    transform: translate(-50%,-50%);
}

.address-para1{
    position: absolute;
    top: 40%;
    left: 27%;
    transform: translate(-50%,-50%);
    font-size: 17px;
    width: 200px;
}

.address-phone1{
    position: absolute;
    top: 65%;
    left: 28%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    font-weight: 1000;
    font-family: 'Poppins', sans-serif;
}

.address-email1{
    position: absolute;
    top: 75%;
    left: 29.5%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    font-weight: 1000;
    font-family: 'Poppins', sans-serif;
}

.privacy-policy-button{
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.privacy-policy-button a{
    text-decoration: none;
    font-size: 20px;
    font-weight: 300;
    color: #000;
}

.privacy-policy-button a::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    border-radius: 5px;
    left: 0;
    bottom: -6px;
    transform: scaleX(0);
    transition: transform .5s;
    transform-origin: left;
    color: #000;
}

.privacy-policy-button a:hover::after{
    transform-origin: left;
    transform: scaleX(1);
}

.youtube{
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%,-50%);
}

.youtube a{
    color: #000;
    font-size: 50px;
}

.facebook{
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%,-50%);
}

.facebook a{
    color: #000;
    font-size: 50px;
}

.twitter{
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%,-50%);
}

.twitter a{
    color: #000;
    font-size: 50px;
}

.instagram{
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-50%,-50%);
}

.instagram a{
    color: #000;
    font-size: 50px;
}

.links-title1{
    position: absolute;
    top: 10%;
    left: 75%;
    transform: translate(-50%,-50%);
    color: #000;
    font-size: 20px;
    font-weight: 1000;
}