/*==================================================
ARTICLE PAGE
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;
    background:linear-gradient(to bottom,#fffefd,#fffafc);
    color:#4b4b4b;
    line-height:1.9;
    overflow-x:hidden;

}

/*==========================
HEADER
==========================*/

.research-header{

height:87px;

padding:0 7%;

display:flex;

justify-content:space-between;

align-items:center;

background:linear-gradient(
90deg,
#b7c7d6,
#d7c8ea,
#f3c0d5
);

box-shadow:0 10px 25px rgba(0,0,0,.08);

position:sticky;

top:0;

z-index:999;

}

.logo-area{

display:flex;

align-items:center;

gap:150px;

}

.logo-area img{

height:50px;

}

.logo-area h1{

font-size:23px;

font-weight:600;

color:#333;

white-space:nowrap;

}

.research-header nav ul{

display:flex;

gap:20px;

list-style:none;

}

.research-header nav a{

text-decoration:none;

font-size:15px;

font-weight:600;

color:#333;

transition:.3s;

position:relative;

}

.research-header nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:#d987b0;

transition:.3s;

border-radius:30px;

}

.research-header nav a:hover{

color:#bb5b8d;

}

.research-header nav a:hover::after{

width:100%;

}

.article-hero{

    max-width:1350px;
    margin:0px;

    /* display:grid;
    grid-template-columns:1.2fr 0.8fr; */

    align-items:center;

    gap:70px;

}

.hero-left h1{

    font-size:30px;

    line-height:1.15;

    margin:25px 20px;

    color:#31313b;

}

.hero-description{

    font-size:18px;

    color:#666;

    line-height:1.8;

    margin-bottom:35px;

    margin: 20px

}

.article-tag{

    display:inline-block;

    padding:10px 22px;

    background:#f6edf8;

    color:#7a4c92;

    border-radius:30px;

    font-weight:600;

    font-size:17px;

    margin: 20px;

}

.article-meta{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-bottom:45px;

    color:#777;

    font-size:18px;

    margin: 20px;

}

.hero-buttons{

    display:flex;

    gap:25px;

}

.start-btn{

    padding:15px 38px;

    margin: 20px;

    border-radius:50px;

    background:linear-gradient(90deg,#efbdd6,#ccbaf4);

    color:#333;

    text-decoration:none;

    font-weight:700;

    font-size:15px;

    transition:.3s;

}

.start-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.share-btn{

    padding:18px 42px;

    border-radius:50px;

    border:2px solid #e4bfd7;

    text-decoration:none;

    color:#c45e91;

    font-weight:700;

    font-size:18px;

    transition:.3s;

}

.share-btn:hover{

    background:#fff2f8;

}

.hero-right{

    text-align:center;

}

.hero-right img{

    width:100%;

    max-width:500px;

}

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

.article-hero{

    padding:40px 8% 40px;
    background:
    linear-gradient(180deg,#fff8fb 0%,#ffffff 100%);

    position:relative;
    overflow:hidden;

}

/* Decorative Shapes */

.article-hero::before{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    background:#f8dce8;

    border-radius:50%;

    top:-180px;
    left:-130px;

    opacity:.45;

}

.article-hero::after{

    content:"";

    position:absolute;

    width:320px;
    height:320px;

    background:#e9eefc;

    border-radius:50%;

    right:-120px;
    bottom:-120px;

    opacity:.55;

}

.hero-container{

    position:relative;

    z-index:5;

    max-width:1050px;

    margin:auto;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.65);

    border-radius:36px;

    padding:65px;

    box-shadow:

    0 20px 60px rgba(0,0,0,.05),

    0 8px 20px rgba(212,171,196,.15);

}

/* Previous Button */

.back-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:30px;

    background:#fff;

    border:1px solid #f0dce7;

    color:#b9608d;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.35s;

}

.back-link:hover{

    background:#fef3f8;

    transform:translateX(-5px);

}

/* Category Badge */

.article-category{

    display:inline-block;

    margin-top:28px;

    padding:10px 22px;

    border-radius:30px;

    background:linear-gradient(90deg,#f7dfe9,#f3e8ff);

    color:#a45480;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

/* Main Heading */

.article-hero h1{

    margin-top:28px;

    font-size:30px;

    line-height:1.15;

    color:#2f2f2f;

    font-weight:500;

    letter-spacing:-1px;

    max-width:760px;

}

/* Description */

.hero-description{

    margin-top:28px;

    max-width:760px;

    font-size:19px;

    line-height:2;

    color:#666;

}

/* Meta */

.article-meta{

    margin-top:40px;

    display:flex;

    gap:35px;

    flex-wrap:wrap;

    padding-top:28px;

    border-top:1px solid #f2edf2;

}

.article-meta div{

    display:flex;

    align-items:center;

    gap:8px;

    color:#777;

    font-size:15px;

    font-weight:500;

}

/* Read Button */

.read-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    padding:16px 34px;

    background:linear-gradient(135deg,#d786b4,#9c87df);

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:500;

    transition:.35s;

    box-shadow:0 10px 30px rgba(197,126,171,.35);

}

.read-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 45px rgba(197,126,171,.4);

}

/*==================================================
                ARTICLE CONTENT
==================================================*/

.article-content{

    padding:50px 8%;
    background:#fffdfd;

}

.content-wrapper{

    max-width:920px;
    margin:auto;

}

/* Beautiful First Paragraph */

.intro{

    font-size:20px;
    line-height:2.1;
    color:#555;
    font-weight:400;

    padding:35px 40px;

    background:linear-gradient(135deg,#fff8fb,#ffffff);

    border-left:6px solid #d98cb3;

    border-radius:25px;

    box-shadow:
    0 12px 40px rgba(0,0,0,.04);

    margin-bottom:70px;

}

/* Headings */

.article-content h2{

    position:relative;

    margin-top:90px;
    margin-bottom:28px;

    font-size:30px;
    font-weight:500;

    color:#2d2d2d;

    line-height:1.3;

}

.article-content h2::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-12px;

    width:90px;
    height:5px;

    border-radius:30px;

    background:linear-gradient(
    90deg,
    #d98cb3,
    #a38ef5
    );

}

.article-content h3{

    margin-top:55px;
    margin-bottom:20px;

    font-size:30px;

    color:#6a5486;

    font-weight:600;

}

/* Paragraph */

.article-content p{

    font-size:19px;

    line-height:2.05;

    color:#5d5d5d;

    margin-bottom:28px;

}

/* Links */

.article-content a{

    color:#b15f8d;
    text-decoration:none;
    font-weight:600;

}

.article-content a:hover{

    color:#8d4b72;

}

/* Lists */

.article-content ul{

    margin:30px 0 40px;

    padding-left:28px;

}

.article-content li{

    margin-bottom:18px;

    font-size:19px;

    line-height:1.9;

    color:#555;

}

/* Custom Bullet */

.article-content li::marker{

    color:#cf88af;

}

/* Horizontal Divider */

.article-divider{

    width:100%;
    height:1px;

    background:#eee;

    margin:70px 0;

}

/* Small Section */

.small-heading{

    font-size:20px;

    font-weight:500;

    color:#444;

    margin-bottom:20px;

}

/* Reading Width */

.content-wrapper>*{

    max-width:860px;

}

/*==================================================
            HIGHLIGHT BOX
==================================================*/

.highlight-box{

    position:relative;

    margin:60px 0;

    padding:40px 45px;

    background:linear-gradient(135deg,#fff8fc,#ffffff);

    border:1px solid #f5dce9;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
    0 18px 40px rgba(0,0,0,.05);

}

.highlight-box::before{

    content:"📚";

    position:absolute;

    top:25px;
    right:35px;

    font-size:30px;

    opacity:.08;

}

.highlight-box strong{

    display:block;

    font-size:20px;

    color:#694d86;

    margin-bottom:25px;

    font-weight:500;

}

.highlight-box ul{

    list-style:none;

    padding:0;

    margin-top:25px;

}

.highlight-box li{

    position:relative;

    padding-left:38px;

    margin-bottom:18px;

    font-size:18px;

    color:#555;

}

.highlight-box li::before{

    content:"✓";

    position:absolute;

    left:0;

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#e8f6ee;

    color:#32a36d;

    font-size:14px;

    font-weight:700;

}

/*==================================================
QUOTE
==================================================*/

blockquote{

    margin:60px 0;

    padding:45px;

    background:#ffffff;

    border-radius:24px;

    border-left:6px solid #d98cb3;

    box-shadow:0 20px 45px rgba(0,0,0,.06);

    font-size:20px;

    line-height:1.8;

    font-style:italic;

    color:#666;

    position:relative;

}

blockquote::before{

    content:"“";

    position:absolute;

    left:25px;
    top:20px;

    font-size:30px;

    color:#f2d8e8;

}

blockquote::after{

    content:"”";

    position:absolute;

    right:470px;
    bottom:40px;

    font-size:30px;

    color:#f2d8e8;

}

/* ==========================================
SKILLS GRID
========================================== */

.skills-section{

    width:100%;

    max-width:1300px;

    margin:80px auto;

    padding:0 40px;

}

.skills-grid{

    display:grid;

    grid-template-columns:repeat(3, minmax(300px,1fr));

    gap:35px;

    width:100%;

}
.skill-card{

    width:100%;

    min-height:340px;

    padding:40px 30px;

    border-radius:28px;

    background:#fff;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

/* Top Gradient Strip */

.skill-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:8px;

    background:linear-gradient(
    90deg,
    #f2a8c8,
    #9a8cf4
    );

}

.skill-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.skill-card span{

    display:block;

    font-size:30px;

    margin-bottom:22px;

}

.skill-card h3{

    font-size:23px;

    color:#333;

    margin-bottom:20px;

    line-height:1.3;

}

.skill-card p{

    font-size:15px;

    color:#666;

    line-height:1.8;

}


/* ==========================================
Responsive
========================================== */

@media(max-width:992px){

.skills-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:650px){

.skills-grid{

grid-template-columns:1fr;

}

}

/*==================================================
TABLES
==================================================*/

table{

    width:100%;

    border-collapse:collapse;

    margin:40px 0;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.06);

}

table th{

    background:#f8e8f1;

    color:#654a83;

    padding:18px;

    text-align:left;

}

table td{

    padding:18px;

    border-bottom:1px solid #f2f2f2;

}

/*==================================================
Images
==================================================*/

.article-content img{

    width:100%;

    border-radius:25px;

    margin:50px 0;

    box-shadow:0 25px 50px rgba(0,0,0,.08);

}

/*==================================================
Links
==================================================*/

.article-content a{

    color:#b55d8c;

    text-decoration:none;

    font-weight:500;

}

.article-content a:hover{

    color:#8f4870;

}

/*==================================================
Selection
==================================================*/

::selection{

    background:#f7cddd;

    color:#333;

}

/*==================================================
Responsive
==================================================*/

@media(max-width:992px){

.hero-container{

padding:45px;

}

.article-hero h1{

font-size:30px;

}

.article-content h2{

font-size:30px;

}

.skills-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.article-hero{

padding:40px 5%;

}

.hero-container{

padding:35px;

border-radius:25px;

}

.article-hero h1{

font-size:30px;

}

.hero-description{

font-size:18px;

}

.article-meta{

gap:18px;

font-size:15px;

}

.article-content{

padding:60px 5%;

}

.article-content h2{

font-size:30px;

}

.article-content h3{

font-size:20px;

}

.intro{

font-size:18px;

}

.article-content p,
.article-content li{

font-size:17px;

}

.skills-grid{

grid-template-columns:1fr;

}

blockquote{

font-size:20px;

padding:30px;

}

}