*{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

body{

    padding: 0;

    margin: 0;

    font-family: var(--poppins);

    background-color: var(--bg-lightblue);

}

/* font */

@font-face {

    font-family: "Lora", serif;

    src: url(../font/Lora-Medium.ttf);

    font-weight: 500;

    font-style: normal;

}

@font-face {

    font-family: "Lora", serif;

    src: url(../font/Lora-SemiBold.ttf);

    font-weight: 600;

    font-style: normal;

}

@font-face {

    font-family: "Poppins", sans-serif;

    src: url(../font/Poppins-Regular.ttf);

    font-weight: 400;

    font-style: normal;

}

@font-face {

    font-family: "Poppins", sans-serif;

    src: url(../font/Poppins-Medium.ttf);

    font-weight: 500;

    font-style: normal;

}

@font-face {

    font-family: "Poppins", sans-serif;

    src: url(../font/Poppins-SemiBold.ttf);

    font-weight: 600;

    font-style: normal;

}

@font-face {

    font-family: "Poppins", sans-serif;

    src: url(../font/Poppins-Italic.ttf);

    font-weight: 400;

    font-style: italic;

}

/* root css */

:root{

    --primary-blue:#123653;

    --header-black:#020202;

    --text-grey:#666666;

    --bg-lightblue:#DAE4ED;

    --secondary-black:#302E2E;

    --bg-black:#191919;

    --button-cream:#F5F2E9;

    --white:#ffffff;

    --poppins:"Poppins", sans-serif;

    --lora:"Lora", serif;

}



/* common css */

.primary-button{

    font-size: 16px;

    text-decoration: none;

    color: var(--white);

    padding: 7px 20px;

    transition: all 0.3s ease-in-out;

    border: 1px solid var(--primary-blue);

    background-color: var(--primary-blue);

    border-radius: 5px;

    cursor: pointer;

    display: inline-block;

}

.primary-button:hover{

    transition: all 0.3s ease-in-out;

    color: var(--primary-blue);

    background-color: var(--white);

}

.secondary-button{

    font-size: 16px;

    text-decoration: none;

    color: var(--primary-blue);

    padding: 7px 20px;

    transition: all 0.3s ease-in-out;

    border: 1px solid var(--button-cream);

    background-color: var(--button-cream);

    border-radius: 5px;

    cursor: pointer;

    display: inline-block;

}

.secondary-button:hover{

    transition: all 0.3s ease-in-out;

    color: var(--button-cream);

    background-color: rgba(245, 242, 233, 0.2);

}

.main-header{

    font-size: 36px;

    font-family: var(--lora);

    font-weight: 600;

    color: var(--header-black);

    margin: 0;

}

.content-para{

    font-size: 16px;

    font-weight: 400;

    font-family: var(--poppins);

    margin: 0;

}

.text-grey{

    color: var(--text-grey);

}

.text-white{

    color: var(--white);

}

.p-50{

    padding: 50px 0;

}

.bg-black{

    background-color: var(--bg-black);

}

.bg-white{

    background-color: var(--white);

}

/* topbar */

.topbar {

    position: sticky;

    top: 0;

    z-index: 999;

    background-color: var(--white);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);

}

.topbar .navbar-nav {

    gap: 30px;

}

.topbar .navbar-expand-lg .navbar-collapse {

    justify-content: end;

}

.topbar .navbar-brand{

    height: 125px;

}

.topbar .navbar-brand img{

    height: 100%;

    width: 100%;

    object-fit: cover;
	max-width: 97px;
}

.topbar .navbar-expand-lg .navbar-collapse .nav-link {

    position: relative;

    padding: 8px 0px;

}

.topbar .nav-link{

    font-size: 16px;

    color: var(--text-grey);

    font-weight: 500;

    font-family: var(--poppins);

}

.topbar .nav-link::after{

    position: absolute;

    content: "";

    bottom: 3px;

    left: 0;

    width: 0%;

    height: 3px;

    border-radius: 10px;

    background-color: var(--primary-blue);

    transition: all 0.5s ease-out;

}

.topbar .nav-link.active,

.topbar .nav-link:hover{

    color: var(--primary-blue);

}

.topbar .nav-item:hover  .dropdown-menu{

    display: block;

    top: 100%;

    left: 0;

    margin-top: 2px;

    transition: all 0.5s ease-in-out;

}

.topbar .nav-item:hover .nav-link::after{

    width: 100%;

}

.topbar .nav-link.active::after{

    width: 100%;

}

.topbar .nav-link:hover::after{

    width: 100%;

    transition: all 0.3s ease-out;

}

.topbar .navbar-toggler {

    outline: none;

    border: none;

}

.topbar .dropdown-toggle::after{

    margin: 0;

    border: 0;

}

.topbar .dropdown-item{

    font-size: 16px;

    font-weight: 400;

    color: var(--text-grey);

    padding: 7px 16px ;

}

.topbar .dropdown-item:hover{

    color: var(--white);

    background-color: var(--primary-blue);

}

/* .topbar .navbar-nav .dropdown-menu{

    padding: 0;

} */

/* banner */

.banner{

/*    background-image: url(../images/home-banner.webp);*/
    background-image: url(../images/home-page-main-picture.webp);

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    height: 100%;

    width: 100%;

    min-height: 800px;

    position: relative;

}

.banner .container {

    height: 600px;

    display: flex;

    justify-content: center;

    align-items: center;

}

.banner::after{

    position: absolute;

    content: "";

    height: 100%;

    width: 100%;

    top: 0;

    left: 0;

    background-color: rgba(0,0,0,0.6);

    z-index: 1;

}

.banner-content{

    position: relative;

    z-index: 10;

    max-width: 1098px;

    margin: 0 auto;

}

.banner-content h1{

    font-size: 50px;

    margin: 0;

    font-family: var(--lora);

    font-weight: 600;

    color: var(--white);

    line-height: 64px;

    padding-bottom: 30px;

}

/* mission */

.mission {

    margin-top: -200px;

    position: relative;

    z-index: 99;

}

.mission-wrapper{

    background-color: var(--white);

    box-shadow: 0 2px 10px 4px rgba(0,0,0,0.1);

    padding: 50px 30px;

    border-radius: 10px;

}

.mission-content{

    max-width: 1200px;

    margin: 0 auto;

}

.mission-header .main-header {

    font-size: 30px;

}

.mission-header .pt-3 {

    padding-top: 10px !important;

}

.grey-divider{

    height: 1px;

    width: 100%;

    max-width: 1200px;

    background-color: #d9d9d9;

    border-radius: 10px;

    margin: 30px auto;

}

.core-item{

    padding: 35px;

    border-radius: 10px;

    background-color: var(--primary-blue);

    height: 100%;

}

.core-item h6{

    font-size: 30px;

    font-family: var(--lora);

    font-weight: 600;

    color: var(--white);

    margin: 0;

}

.core-card{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 40px;

    height: 100%;

    max-width: 1200px;

    margin: 0 auto;

}

/* Works */

.work-card{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    justify-content: center;

    height: 100%;

    gap: 20px;

}

.work-item{

    background-color: var(--white);

    padding: 35px 20px;

    border-radius: 10px;

    box-shadow: 0 0 10px 3px rgba(0,0,0,0.1);

}

.work-item h6{

    font-size: 50px;

    font-family: var(--lora);

    font-weight: 600;

    color: var(--primary-blue);

    margin: 0;

}

.work-item p{

    font-size: 20px;

    font-family: var(--poppins);

    font-weight: 600;

    color: var(--secondary-black);

    margin: 0;

    padding-top: 10px;

}

/* investing */

.investing{

    background-image: url(../images/value.webp);

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    height: 100%;

    width: 100%;

    padding: 100px 0;

    position: relative;

}

.investing::after{

    position: absolute;

    content: "";

    height: 100%;

    width: 100%;

    top: 0;

    left: 0;

    background-color: rgba(0,0,0,0.6);

    z-index: 1;

}

.investing-wrapper{

    position: relative;

    z-index: 99;

    display: flex;

    justify-content: end;

}

.investing-header{

    background-color: var(--white);

    border-radius: 10px;

    padding: 50px;

}

/* benefits */

.benefits{

    background-color: var(--white);

}

.item-img{

    height: 60px;

    width: 60px;

}

.item-img img{

    height: 100%;

    width: 100%;

    object-fit: cover;

}

.benefits-card{

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    justify-content: center;

    height: 100%;

    gap: 40px;

    max-width:900px;

    margin: 0 auto;

}

.benefits-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}

.benefits-item .content-para{

    font-size: 20px;

    font-weight: 600;

    padding: 0 10px;

}

.benefit-button {

    padding-top: 25px;

}

/* universal */

.universal{

    background-color: var(--primary-blue);

    padding-top: 50px;

}

.universal-image img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}





/* about-us-page */

.about-banner{

/*        background-image: url(../images/about.webp);*/
        background-image: url(../images/aboutus-main-picture.webp);

/*        background-position: 50% 20%;*/
        background-position: center;

        background-size: cover;

        background-repeat: no-repeat;

        height: 100%;

        width: 100%;

        min-height: 400px;

        position: relative;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .about-banner::after{

        position: absolute;

        content: "";

        height: 100%;

        width: 100%;

        top: 0;

        left: 0;

        background-color: rgba(0,0,0,0.6);

        z-index: 1;

    }

    .about-content{

        background-color: var(--white);

    }

    /* meaning */

    .meaning{

        background-color: var(--white);

        padding-bottom: 50px;

    }

    .meaning p span{

        font-style: italic;

    }

    .have-qs{

        font-size: 20px;

        font-weight: 400;

        color: #666;

    }

    /* getting started */

    .mission-content h6{

        font-size: 20px;

        color: var(--text-grey);

        margin: 0;

        padding-top: 10px;

    }

    .started{

        padding-bottom: 50px;

    }

    .benefit-card{

        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    }

    .contact-form {

        background-color: var(--white);

        box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.1);

        padding: 30px 30px;

        border-radius: 10px;

    }

    .accredited-card {

        grid-template-columns: repeat(auto-fit, minmax(320px, 400px));

        justify-content: center;

    }

    /* disclaimer */

    .disclaimer {

        padding: 30px 0;

    }

    .disclaimer .content-para span {

        font-weight: 700;

    }

    .disclaimer .disclaimer-header {

        font-size: 20px;

        padding-bottom: 5px;

    }

    .verified{

        background-color: var(--white);

        padding-bottom: 40px;

    }

    .verified .main-header{

        font-size: 20px;

    }

    .verified-content ul {

        padding-top: 15px;

        padding-left: 20px;

        margin: 0;

    }

    .verified-content ul li {

        padding-bottom: 6px;

        line-height: 27px;

    }

    .verified-content ul li a {

        padding-top: 0;

        padding-left: 7px;

        color: #0077d5;

    }

    .market-content{

        background-color: var(--white);

    }

    .value-strategy{

        background-color: transparent;

    }

    .terms h6{

        font-size: 24px;

        color: var(--primary-blue);

        margin: 0;

        padding-bottom: 10px;

    }

    .terms p span{

        font-weight: 700;

    }

    .terms p a{

        font-weight: 700;

        color:#666666;

        text-decoration:none;

    }

    .terms .grey-divider{

        max-width: 100%;

    }

    .copyright-content {

        display: flex;

        justify-content: space-between;

        align-items: center;

        gap: 15px;

        width: 100%;

        flex-wrap: wrap;

    }

    .copyright-content a{

        text-decoration: none;

    }

    .copyright-content a:hover{

        opacity: 0.6;

    }

    .copyright-content p,

    .copyright-content p a{

        font-size: 14px;

        margin: 0;

    }

/* Responsive */

@media(min-width:1200px){

    .about-image{

        height: 300px;

    }

    .about-image img{

        width: 100%;

        height: 100%;

        object-fit: cover;

    }

}

@media(max-width:992px){

    .core-card {

        gap: 20px;

    }

    .investing{

        padding: 50px 0;

        text-align: center;

    }

    .topbar .navbar-expand-lg .navbar-collapse .nav-link {

        position: relative;

        padding: 8px 0px;

        width: fit-content;

    }

    .topbar .primary-button{

        width: fit-content;

        margin-bottom: 30px;

    }

    .topbar .navbar-nav {

        gap: 15px;

    }

}

@media(max-width:575px){

    .banner-content h1 {

        font-size: 36px;

        line-height: 45px;

    }

}

.core-item:nth-child(7) {

    grid-column: span 3;

    justify-self: center;

    width:50%;

}   

@media(max-width:768px){

    .core-item:nth-child(7) {

    grid-column: unset;

    justify-self: center;

    width:100%;

}   

}
.about-banner.benefit-of-investing-banner{background-image: url(../images/benefit-of-investing.webp);background-position: 50% 40%;}
.about-banner.contact-banner{background-image: url(../images/contact-us-main-picture.webp);}
.about-banner.getting-started-banner{background-image: url(../images/getting-started-main-picture.webp);}
.about-banner.investment-strategy-banner{background-image: url(../images/investment-strategy-main-picture.webp);background-position: 50% 75%;}
.about-banner.club-banner{background-image: url(../images/join-our-invst-club-main-picture.webp);}
.about-banner.accredited-validation-banner{background-image: url(../images/about.webp);}