/* =========================================================
   DESIGN 8
   OFFICEPOINTONLINE DV3 STYLE
   Clean / Professional / White / Blue
========================================================= */

:root{
    --d8-bg:#f3f6fa;
    --d8-card:#ffffff;
    --d8-primary:#155eef;
    --d8-primary-dark:#0b4dcc;
    --d8-primary-soft:#eef4ff;
    --d8-text:#172033;
    --d8-secondary:#475467;
    --d8-muted:#ffffff;
    --d8-border:#e4e7ec;
    --d8-light:#f8fafc;
    --d8-success:#16a34a;
    --d8-shadow:0 10px 30px rgba(16,24,40,.08);
    --d8-shadow-lg:0 18px 50px rgba(16,24,40,.12);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body.design-8{
    margin:0;
    min-height:100vh;
    padding-bottom:90px;
    font-family:Arial,Helvetica,sans-serif;
    color:var(--d8-text);
    background:
        linear-gradient(180deg,#eef4fb 0%,#f7f9fc 42%,#ffffff 100%);
}

/* =========================================================
   MAIN WRAPPER
========================================================= */

.design-8 .card-wrapper{
    width:100%;
    max-width:720px;
    margin:0 auto;
    padding:16px 14px 105px;
}

/* =========================================================
   COMMON CARD
========================================================= */

.design-8 .hero,
.design-8 .section,
.design-8 .content-section,
.design-8 .primary-actions,
.design-8 .quick-actions{
    /*background:linear-gradient(180deg,#eef4fb 0%,#f7f9fc 42%,#ffffff 100%);*/
    /*border:1px solid var(--d8-border);*/
    box-shadow:white;
    /*box-shadow:linear-gradient(190deg, #fff, var(--d8-primary));*/
}

/* =========================================================
   HERO
========================================================= */

.design-8 .hero{
    position:relative;
    text-align:center;
    padding:34px 24px 28px;
    margin-bottom:12px;
    border-radius:20px;
    overflow:hidden;
    /*background: var(--d8-primary);*/
    background: linear-gradient(190deg, #103B26, var(--d8-primary)); 

}

.design-8 .hero::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:6px;
    background:linear-gradient(
        90deg,
        #155eef,
        #3b82f6,
        #60a5fa
    );
}

.design-8 .hero::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-120px;
    top:-120px;
    border-radius:50%;
    background:rgba(21,94,239,.055);
}

.design-8 .profile-photo-wrap{
    position:relative;
    z-index:2;
    width:132px;
    height:auto;
   
/*    margin:0 auto 17px; */
    padding:4px;
/*   
    border-radius:50%;
    background:#fff;
    border:1px solid #d0d5dd;
    box-shadow:0 8px 24px rgba(16,24,40,.12);
*/

}

.design-8 .profile-photo{
    width:232px;
    height:auto;

 /*   width:100%; */
    height:100%;
    display:block;
       
/*    
   object-fit:cover;

    border-radius:50%; 
    border:3px solid #fff;
    background:#f2f4f7;
*/

}

.design-8 .profile-name{
    position:relative;
    z-index:2;
    margin:6px 0 7px;
    color:white;
    font-size:31px;
    line-height:1.2;
    font-weight:800;

}

.design-8 .profile-designation{
    position:relative;
    z-index:2;
    display:inline-block;
    margin-bottom:8px;
    padding:5px 12px;
    border-radius:20px;
    color:var(--d8-primary);
    background:var(--d8-primary-soft);
    border:1px solid #dbe7ff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.design-8 .profile-company{
    position:relative;
    z-index:2;
    margin-top:2px;
    color:white;
    font-size:18px;
    line-height:1.4;
    font-weight:700;
}

.design-8 .profile-tagline{
    position:relative;
    z-index:2;
    max-width:570px;
    margin:9px auto 0;
    color:white;
    font-size:13px;
    line-height:1.65;
}

.design-8 .profile-views{
    position:relative;
    z-index:2;
    margin-top:13px;
    color:white;
    font-size:12px;
}

.design-8 .profile-views i{
    margin-right:5px;
    color:var(--d8-primary);
}

/* =========================================================
   QUICK ACTIONS
========================================================= */

.design-8 .quick-actions{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    padding:7px;
    margin-bottom:12px;
    border-radius:16px;
    overflow:hidden;
}

.design-8 .quick-action{
    min-height:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    color:#344054;
    text-decoration:none;
    border-radius:11px;
    transition:.2s ease;
}

.design-8 .quick-action:hover{
    color:var(--d8-primary);
    background:var(--d8-primary-soft);
    transform:translateY(-2px);
}

.design-8 .quick-icon{
    width:37px;
    height:37px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--d8-primary);
    background:var(--d8-primary-soft);
    font-size:16px;
}

.design-8 .quick-icon.whatsapp{
    color:var(--d8-success);
    background:#ecfdf3;
}

.design-8 .quick-action > span:last-child{
    font-size:12px;
    font-weight:600;
}

/* =========================================================
   SECTIONS
========================================================= */

.design-8 .section,
.design-8 .content-section{
    padding:20px;
    margin-bottom:12px;
    border-radius:16px;
    background:linear-gradient(180deg, #fff, var(--d8-primary));;
}

.design-8 .section-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}

.design-8 .section-title h2{
    margin:0;
    color:#101828;
    font-size:18px;
    line-height:1.3;
    font-weight:750;
}

.design-8 .section-title-icon{
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--d8-primary);
    background:var(--d8-primary-soft);
    border:1px solid #dbe7ff;
}

/* =========================================================
   CONTACT
========================================================= */

.design-8 .contact-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.design-8 .contact-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 12px;
    border-radius:11px;
    color:#344054;
    background:#f9fafb;
    border:1px solid #eaecf0;
    text-decoration:none;
    transition:.2s ease;
}

.design-8 .contact-item:hover{
    background:var(--d8-primary-soft);
    border-color:#dbe7ff;
    color:#101828;
}

.design-8 .contact-icon{
    width:39px;
    height:39px;
    flex:0 0 39px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--d8-primary);
    background:#fff;
    border:1px solid #dbe7ff;
}

.design-8 .contact-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.design-8 .contact-text small{
    color:#98a2b3;
    font-size:11px;
}

.design-8 .contact-text strong{
    color:#344054;
    font-size:13px;
    font-weight:600;
    word-break:break-word;
}

/* =========================================================
   SAVE / SHARE
========================================================= */

.design-8 .primary-actions{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px;
    padding:8px;
    margin-bottom:12px;
    border-radius:16px;
}

.design-8 .primary-btn{
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 16px;
    border:0;
    border-radius:11px;
    cursor:pointer;
    text-decoration:none;
    color:#fff;
    background:var(--d8-primary);
    font-size:13px;
    font-weight:700;
    box-shadow:0 5px 14px rgba(21,94,239,.16);
    transition:.2s ease;
}

.design-8 .primary-btn:hover{


    background:var(--d8-primary);
    border-color:var(--d8-primary);
    transform:translateY(-2px);
}

/* =========================================================
   FEATURE CARDS
========================================================= */

.design-8 .feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
}

.design-8 .feature-card{
    min-height:92px;
    padding:12px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
    text-decoration:none;
    color:#344054;
    background:#f9fafb;
    border:1px solid #eaecf0;
    border-radius:12px;
    transition:.2s ease;
}

.design-8 .feature-card:hover{
    color:var(--d8-primary);
    background:var(--d8-primary-soft);
    border-color:#dbe7ff;
    transform:translateY(-3px);
}

.design-8 .feature-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:var(--d8-primary);
    background:#fff;
    border:1px solid #dbe7ff;
    font-size:16px;
}

.design-8 .feature-card > span:last-child{
    font-size:12px;
    font-weight:600;
}

/* =========================================================
   RICH CONTENT
========================================================= */

.design-8 .rich-content{
    color:#000;
    font-size:14px;
    line-height:1.75;
    overflow-wrap:anywhere;
}

.design-8 .rich-content p{
    margin:0 0 13px;
}

.design-8 .rich-content p:last-child{
    margin-bottom:0;
}

.design-8 .rich-content h1,
.design-8 .rich-content h2,
.design-8 .rich-content h3,
.design-8 .rich-content h4,
.design-8 .rich-content h5,
.design-8 .rich-content h6{
    margin:19px 0 9px;
    color:#101828;
    line-height:1.35;
}

.design-8 .rich-content h1{font-size:24px;}
.design-8 .rich-content h2{font-size:20px;}
.design-8 .rich-content h3{font-size:17px;color:var(--d8-primary);}

.design-8 .rich-content strong,
.design-8 .rich-content b{
    color:#101828;
}

.design-8 .rich-content a{
    color:var(--d8-primary);
    text-decoration:none;
    border-bottom:1px dashed #98b9ff;
}

.design-8 .rich-content ul,
.design-8 .rich-content ol{
    margin:9px 0 17px;
    padding-left:23px;
}

.design-8 .rich-content ul{
    list-style:none;
}

.design-8 .rich-content ul li{
    position:relative;
    margin-bottom:8px;
    padding-left:18px;
}

.design-8 .rich-content ul li::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--d8-primary);
}

.design-8 .rich-content ol li{
    margin-bottom:8px;
}

.design-8 .rich-content img{
    max-width:100%;
    height:auto;
    display:block;
    margin:14px auto;
    border-radius:11px;
    border:1px solid var(--d8-border);
}

.design-8 .rich-content table{
    width:100%;
    border-collapse:collapse;
    margin:14px 0;
}

.design-8 .rich-content th,
.design-8 .rich-content td{
    padding:9px;
    text-align:left;
    border:1px solid var(--d8-border);
}

.design-8 .rich-content th{
    color:#101828;
    background:#f2f4f7;
}

.design-8 .rich-content blockquote{
    margin:14px 0;
    padding:12px 16px;
    border-left:3px solid var(--d8-primary);
    background:var(--d8-primary-soft);
    color:#475467;
    border-radius:0 10px 10px 0;
}

/* =========================================================
   SOCIAL
========================================================= */

.design-8 .social-list{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:9px;
}

.design-8 .social{
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:#475467;
    text-decoration:none;
    background:#f9fafb;
    border:1px solid #eaecf0;
    font-size:17px;
    transition:.2s ease;
}

.design-8 .social:hover{
    color:#fff;
    background:var(--d8-primary);
    border-color:var(--d8-primary);
    transform:translateY(-3px);
}

/* =========================================================
   FOOTER
========================================================= */

.design-8 .footer{
    padding:18px 12px 10px;
    text-align:center;
    color:#98a2b3;
    font-size:11px;
    line-height:1.6;
}

/* =========================================================
   BOTTOM NAVIGATION
========================================================= */

.design-8 .bottom-nav{
    position:fixed;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    z-index:9999;
    width:min(calc(100% - 24px),560px);
    min-height:60px;
    display:flex;
    align-items:center;
    justify-content:space-around;
    padding:6px;
    border:1px solid #d0d5dd;
    border-radius:17px;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 10px 30px rgba(16,24,40,.14);
}

.design-8 .bottom-nav-item{
    min-width:65px;
    padding:6px 9px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    border-radius:11px;
    text-decoration:none;
    color:#667085;
    font-size:10px;
    transition:.2s ease;
}

.design-8 .bottom-nav-item i{
    font-size:16px;
}

.design-8 .bottom-nav-item:hover,
.design-8 .bottom-nav-item.active{
    color:var(--d8-primary);
    background:var(--d8-primary-soft);
}

/* =========================================================
   SCROLLBAR
========================================================= */

.design-8 ::-webkit-scrollbar{
    width:7px;
}

.design-8 ::-webkit-scrollbar-track{
    background:#f2f4f7;
}

.design-8 ::-webkit-scrollbar-thumb{
    background:#bfc8d6;
    border-radius:10px;
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    body.design-8{
        padding-bottom:78px;
    }

    .design-8 .card-wrapper{
        padding:8px 8px 92px;
    }

    .design-8 .hero{
        padding:29px 17px 24px;
        border-radius:17px;
    }

    .design-8 .profile-photo-wrap{
        width:112px;
        height:112px;
    }

    .design-8 .profile-name{
        font-size:27px;
    }

    .design-8 .profile-company{
        font-size:16px;
    }

    .design-8 .profile-tagline{
        font-size:12px;
    }

    .design-8 .quick-actions{
        grid-template-columns:repeat(2,1fr);
        gap:2px;
        padding:5px;
    }

    .design-8 .section,
    .design-8 .content-section{
        padding:16px;
        border-radius:14px;
    }

    .design-8 .section-title h2{
        font-size:17px;
    }

    .design-8 .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .design-8 .primary-actions{
        grid-template-columns:1fr;
        padding:7px;
    }

    .design-8 .rich-content{
        font-size:13px;
    }

    .design-8 .bottom-nav{
        bottom:6px;
        width:calc(100% - 14px);
        min-height:58px;
        border-radius:15px;
    }

    .design-8 .bottom-nav-item{
        min-width:53px;
        padding:5px 4px;
        font-size:9px;
    }
}

@media(max-width:380px){

    .design-8 .profile-name{
        font-size:24px;
    }

    .design-8 .profile-photo-wrap{
        width:100px;
        height:100px;
    }

    .design-8 .section,
    .design-8 .content-section{
        padding:14px;
    }

    .design-8 .feature-card{
        min-height:84px;
    }
}

@media(prefers-reduced-motion:reduce){

    .design-8 *,
    .design-8 *::before,
    .design-8 *::after{
        transition:none !important;
        animation:none !important;
    }
}