/* Full height setup */
html,
body,
header,
.Imgview {
    height: 100%;
}

@media (max-width: 740px) {
    html,
    body,
    header,
    .Imgview {
        height: 100vh;
    }
}

@media (min-width: 800px) and (max-width: 850px) {
    html,
    body,
    header,
    .Imgview {
        height: 600px;
    }
}


/* Navbar default: transparent, no shadow */
.navbar {
    background-color: rgba(255, 255, 255, 0.4) !important;
    /* background-color: transparent;*/
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

    .navbar .nav-link {
        color: brown !important;
    }

    /* When scrolled (desktop) */
    .navbar.top-nav-collapse {
        background-color: white;
        color: black;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }

        .navbar.top-nav-collapse .nav-link {
            color: black !important;
        }

/* Mobile styles */
@media (max-width: 991px) {
    /* Page load (mobile) */
    .navbar {
        background-color: white !important;
    }

    .navbar-nav.nav-link {
        color: white !important;
    }

    /* When scrolled (mobile) */
    .navbar.top-nav-collapse {
        background-color: white !important; /*#6a5acd purple-blue */
    }
}

/* Typography */
h1 {
    letter-spacing: 8px;
}

h5 {
    letter-spacing: 3px;
}

.hr-light {
    border-top: 3px solid #fff;
    width: 80px;
}

/* CARD */
.device-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 30px;
    display: flex;
    align-items: flex-end;
}

/* CARD HEIGHTS */
.large-card {
    height: 600px;
    background-image: url('/Assets/Img/Harmony_Securities_Broker_Dealer-In_The_Nigerian_Capital_Market.webp');
}

/* CARD HEIGHTS */
.large-card2 {
    height: 600px;
    background-image: url('/Assets/Img/Harmony_Securities_WealthManagement-In_The_Nigeria.webp');
}


.small-card {
    height: 290px;
}

    /* TOP RIGHT BG */
    .small-card:nth-child(1) {
        background-image: url('images/mifi.jpg');
    }

    /* BOTTOM RIGHT BG */
    .small-card:last-child {
        background-image: url('images/fibrex.jpg');
    }

/* OVERLAY */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
}

    .overlay.dark {
        background: rgba(0,0,0,0.35);
    }

    .overlay.darker {
        background: rgba(0,0,0,0.55);
    }

/* CONTENT */
.card-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* PRICE */
.price-section {
    margin-top: 30px;
}

/* DOTS */
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #999;
    display: inline-block;
    margin-right: 8px;
}

    .dot.active {
        background: #f6c000;
    }


/* This csss is  for the body Template*/

/* =========================
           COVER SECTION
        ==========================*/
.page-profile-cover {
    position: relative;
    width: 100%;
    height: 420px;
    background: url('/Assets/Img/Harmony_Securities_Website_Background_Image_Comp.webp');
    /*    //https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1500&q=80' background-size: cover;
*/ background-position: center;
    background-size: cover;
}

    /* dark overlay */
.page-profile-cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.15);
}

/* =========================
           PROFILE CONTENT AREA
        ==========================*/
.page-profile-wrapper {
    position: relative;
    background: #fff;
    min-height: 600px;
    width: 100%;
    padding-top: 90px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 40px;
    margin-top: -125px;/*/I Added this to close up the top background section of the website page section */
}

/* =========================
           PROFILE IMAGE
        ==========================*/
.page-profile-image {
    position: absolute;
    top: -90px;
    left: 40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #fff;
/*    background: #000;*/    
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.page-profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================
           PROFILE DETAILS
        ==========================*/
.page-profile-info {
    margin-left: 230px;
}

.page-profile-name {
  /*  font-size: 32px;
    font-weight: 700;
    margin-bottom: 5px;*/
}

.page-profile-meta {
    color: #777;
    font-size: 15px;
}

/* =========================
           SAMPLE CONTENT
        ==========================*/
.content-box {
    margin-top: 40px;
    background: #fafafa;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

@media(max-width:768px) {

    .page-profile-cover {
        height: 300px;
    }

    .page-profile-image {
        width: 140px;
        height: 140px;
        left: 50%;
        transform: translateX(-50%);
        top: -70px;
    }

    .page-profile-wrapper {
        padding-top: 90px;
    }

    .page-profile-info {
        margin-left: 0;
        text-align: center;
        margin-top: 20px;
    }
}