/*====================================================
            AMEERA WELLNESS
         RESEARCH ARTICLE TEMPLATE
=====================================================*/

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*====================================================
                    RESET
=====================================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#FFFDFC;
    color:#444;
    line-height:1.8;
    overflow-x:hidden;
}

/*====================================================
                    VARIABLES
=====================================================*/

:root{

--primary:#D88CB3;
--secondary:#DCCCF7;
--pink:#F9D6E5;
--lavender:#EFE8FF;
--blue:#BFD2F8;

--heading:#3E3051;
--text:#666;
--white:#ffffff;

--shadow:0 15px 40px rgba(0,0,0,.08);

--radius:28px;

}

/*====================================================
            READING PROGRESS BAR
=====================================================*/

.progress-container{

position:fixed;

top:0;

left:0;

width:100%;

height:5px;

background:#f1edf7;

z-index:99999;

}

.progress-bar{

height:100%;

width:0%;

background:linear-gradient(
90deg,
#F6BDD6,
#D7C4F7
);

transition:.2s;

}

/*==========================
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:70px auto;
    padding-left: 40px;
    display:grid;
    grid-template-columns:1.2fr 0.8fr;

    align-items:center;

    gap:20px;

}

.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:140%;

    max-width:500px;

    padding-right: 40px;

}

/*==========================
BREADCRUMB
==========================*/

.breadcrumb-box{

width:90%;

max-width:1200px;

margin:-35px auto 60px;

background:white;

padding:22px 35px;

border-radius:60px;

display:flex;

align-items:center;

gap:18px;

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

font-size:16px;

}

.breadcrumb-box a{

text-decoration:none;

color:#666;

font-weight:500;

transition:.3s;

}

.breadcrumb-box a:hover{

color:#d77ba8;

}

.breadcrumb-box span{

font-size:26px;

color:#c7b8d8;

}

.breadcrumb-box p{

font-weight:600;

color:#453553;

}

/*==========================
ARTICLE INFO
==========================*/

.article-info{

width:90%;

max-width:1200px;

margin:20px;

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:20px;

margin-bottom:80px;

}

.article-info div{

padding:14px 24px;

background:white;

border-radius:40px;

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

font-size:15px;

font-weight:500;

transition:.3s;

}

.article-info div:hover{

transform:translateY(-4px);

}

/*====================================================
                    BUTTONS
=====================================================*/

.hero-buttons{

display:flex;

gap:20px;

}

.primary-btn{

display:inline-block;

padding:18px 38px;

border-radius:50px;

background:linear-gradient(
90deg,
#F7C5D9,
#D5C3F7
);

text-decoration:none;

color:#333;

font-weight:600;

font-size:17px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.primary-btn:hover{

transform:translateY(-5px);

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

}

.secondary-btn{

display:inline-block;

padding:18px 38px;

border-radius:50px;

border:2px solid #E3BDD1;

text-decoration:none;

font-weight:600;

font-size:17px;

color:#C15D8D;

transition:.35s;

}

.secondary-btn:hover{

background:#FDF0F6;

}

/*====================================================
                MAIN LAYOUT
=====================================================*/

.main-wrapper{

display:grid;

grid-template-columns:300px 1fr;

gap:60px;

padding:90px 8%;

align-items:start;

}

/*====================================================
            TABLE OF CONTENTS
=====================================================*/

.toc{

position:sticky;

top:120px;

background:white;

padding:30px;

border-radius:25px;

box-shadow:var(--shadow);

}

.toc h3{

font-size:24px;

margin-bottom:25px;

color:var(--heading);

}

.toc ul{

list-style:none;

}

.toc li{

margin-bottom:18px;

}

.toc a{

text-decoration:none;

color:#666;

font-size:16px;

transition:.3s;

}

.toc a:hover{

color:#D88CB3;

padding-left:6px;

}

.article-content{

width:100%;

}

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

.article-section{

margin-bottom:90px;

animation:fadeUp .8s ease;

}

.section-tag{

display:inline-block;

padding:8px 20px;

background:#F7D7E5;

color:#A05684;

border-radius:30px;

font-size:14px;

font-weight:600;

margin-bottom:18px;

letter-spacing:.5px;

text-transform:uppercase;

}

.article-section h2{

font-size:30px;

font-weight:600;

color:var(--heading);

margin-bottom:25px;

line-height:1.2;

}

.article-section p{

font-size:17px;

color:#666;

margin-bottom:20px;

line-height:2;

}

/*====================================================
                LEAD PARAGRAPH
=====================================================*/

.lead{

font-size:17px !important;

font-weight:500;

color:#555;

position:relative;

padding-left:15px;

}

.lead::first-letter{

font-size:70px;

font-weight:700;

float:left;

line-height:.9;

padding-right:10px;

color:var(--primary);

}

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

.quote-card{

background:linear-gradient(
135deg,
#FFF5FA,
#F6F0FF
);

padding:40px;

border-left:8px solid var(--primary);

border-radius:25px;

margin:45px 0;

position:relative;

box-shadow:var(--shadow);

}

.quote-icon{

font-size:20px;

color:#E6A8C8;

margin-bottom:15px;

}

.quote-card p{

font-size:17px;

font-style:italic;

font-weight:500;

color:#4B3C5D;

line-height:1.8;

}

.quote-card span{

display:block;

margin-top:25px;

font-size:16px;

font-weight:600;

color:#8C5D86;

}

/*====================================================
            FEATURE GRID
=====================================================*/

.feature-grid{

display:grid;

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

gap:30px;

margin-top:45px;

}

.feature-card{

background:white;

padding:35px;

border-radius:25px;

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

transition:.35s;

text-align:center;

}

.feature-card:hover{

transform:translateY(-10px);

box-shadow:0 22px 45px rgba(0,0,0,.12);

}

.feature-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

border-radius:50%;

background:linear-gradient(
135deg,
#FFD8EA,
#E2D5FF
);

}

.feature-card h3{

font-size:20px;

margin-bottom:15px;

color:#444;

}

.feature-card p{

font-size:16px;

line-height:1.8;

}

/*====================================================
            STATISTICS
=====================================================*/

.statistics{

display:grid;

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

gap:30px;

margin:70px 0;

}

.stat-card{

background:white;

border-radius:28px;

padding:40px;

text-align:center;

box-shadow:var(--shadow);

transition:.3s;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card h2{

font-size:33px;

font-weight:700;

background:linear-gradient(90deg,#D88CB3,#A67EF3);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:15px;

}

.stat-card p{

font-size:17px;

color:#666;

line-height:1.8;

}

/*====================================================
            CLINICAL NOTE
=====================================================*/

.clinical-note{

background:#FFF9E9;

border-left:8px solid #F5C842;

padding:35px;

border-radius:20px;

margin:45px 0;

}

.clinical-note h3{

font-size:24px;

margin-bottom:12px;

color:#5A4A2A;

}

.clinical-note p{

font-size:17px;

color:#666;

}

/*====================================================
            COMPARISON TABLE
=====================================================*/

.comparison-table{

overflow-x:auto;

margin-top:40px;

border-radius:25px;

box-shadow:var(--shadow);

}

.comparison-table table{

width:100%;

border-collapse:collapse;

background:white;

}

.comparison-table th{

background:linear-gradient(
90deg,
#F8C7D9,
#D7C4F7
);

padding:22px;

font-size:18px;

color:#333;

text-align:left;

}

.comparison-table td{

padding:20px;

border-bottom:1px solid #EFEFEF;

font-size:17px;

color:#666;

}

.comparison-table tr:hover{

background:#FFF8FC;

}

/*====================================================
            FADE ANIMATION
=====================================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*====================================================
                TIMELINE SECTION
=====================================================*/

.timeline-section{
    margin:90px 0;
}

.timeline-section h2{
    font-size:30px;
    color:var(--heading);
    text-align:center;
    margin-bottom:60px;
}

.timeline{
    position:relative;
    max-width:900px;
    margin:auto;
}

.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:4px;
    height:100%;
    background:#E5D8F7;
}

.timeline-item{
    width:50%;
    position:relative;
    margin-bottom:50px;
}

.timeline-item:nth-child(odd){
    padding-right:55px;
    text-align:right;
}

.timeline-item:nth-child(even){
    margin-left:50%;
    padding-left:55px;
}

.circle{
    position:absolute;
    top:15px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:linear-gradient(135deg,#F6BCD5,#D6C4F8);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.timeline-item:nth-child(odd) .circle{
    right:-18px;
}

.timeline-item:nth-child(even) .circle{
    left:-18px;
}

.timeline-content{
    background:white;
    padding:30px;
    border-radius:22px;
    box-shadow:var(--shadow);
    transition:.35s;
}

.timeline-content:hover{
    transform:translateY(-6px);
}

.timeline-content h3{
    font-size:24px;
    margin-bottom:12px;
    color:var(--heading);
}

.timeline-content p{
    font-size:16px;
}

/*====================================================
                TIPS GRID
=====================================================*/

.tips-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
    margin-top:45px;
}

.tip{
    background:white;
    padding:35px;
    border-radius:25px;
    box-shadow:var(--shadow);
    transition:.35s;
    text-align:center;
    font-size:48px;
}

.tip:hover{
    transform:translateY(-8px);
}

.tip h3{
    font-size:22px;
    margin:20px 0 12px;
    color:var(--heading);
}

.tip p{
    font-size:16px;
    color:#666;
}

/*====================================================
                REFERENCES
=====================================================*/

.reference-list{
    margin-top:35px;
}

.reference-item{
    background:white;
    margin-bottom:18px;
    padding:22px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:.3s;
}

.reference-item:hover{
    transform:translateX(8px);
}

/*====================================================
                SHARE SECTION
=====================================================*/

.share-section{
    text-align:center;
    margin:90px 0;
}

.share-section h2{
    font-size:30px;
    margin-bottom:12px;
}

.share-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:35px;
}

.share-btn{
    padding:10px 25px;
    border-radius:50px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:.35s;
    color:white;
}

.linkedin{background:#0A66C2;}
.whatsapp,
.whatsapp-btn{background:#25D366;}
.facebook{background:#1877F2;}
.copy-link{
    background:linear-gradient(135deg,#F7C4D8,#D2C1F7);
    color:#333;
}

.share-btn:hover{
    transform:translateY(-4px);
    background: #ead3e8;
    color: #262b31;
}

/*====================================================
                AUTHOR CARD
=====================================================*/

.author-section{
    margin:100px 0;
}

.author-card{
    display:flex;
    gap:35px;
    align-items:center;
    background:white;
    padding:40px;
    border-radius:30px;
    box-shadow:var(--shadow);
}

.author-image{

    width:180px;
    height:180px;

    border-radius:50%;

    border:8px solid #f4d4e5;

    background:#fff;

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

    overflow:hidden;

    flex-shrink:0;

}

.author-image img{

    width:72%;

    height:auto;

    display:block;

}

.author-content h2{
    margin:15px 0;
    font-size:30px;
}

.author-social{
    margin-top:25px;
    display:flex;
    gap:18px;
}

.author-social a{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#F6D6E6;
    color:#6A4C7A;
    text-decoration:none;
    transition:.35s;
}

.author-social a:hover{
    transform:translateY(-5px);
}

/*====================================================
            ARTICLE NAVIGATION
=====================================================*/

.article-navigation{
    display:flex;
    justify-content:space-between;
    gap:30px;
    margin:100px 0;
}

.previous-article,
.next-article{
    flex:1;
    background:white;
    padding:30px;
    border-radius:25px;
    box-shadow:var(--shadow);
    transition:.35s;
    cursor:pointer;
}

.previous-article:hover,
.next-article:hover{
    transform:translateY(-5px);
}

.article-navigation span{
    color:#C05F8C;
    font-weight:600;
}

.article-navigation h3{
    margin-top:12px;
    font-size:20px;
}

/*====================================================
            RELATED ARTICLES
=====================================================*/

.related-articles{
    margin:100px 0;
}

.related-articles h2{
    text-align:center;
    margin-bottom:50px;
    font-size:30px;
}

.related-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:35px;
}

.related-card{
    background:white;
    border-radius:28px;
    padding:35px;
    box-shadow:var(--shadow);
    transition:.35s;
}

.related-card:hover{
    transform:translateY(-8px);
}

.related-category{
    display:inline-block;
    padding:8px 18px;
    background:#F6D6E6;
    border-radius:30px;
    color:#9C5A82;
    font-size:14px;
    margin-bottom:18px;
}

.related-card h3{
    font-size:20px;
    margin-bottom:18px;
}

.related-card p{
    font-size:16px;
    margin-bottom:20px;
}

.related-card a{
    color:#C05F8C;
    text-decoration:none;
    font-weight:600;
}

/*====================================================
                NEWSLETTER
=====================================================*/

.newsletter{
    margin:100px 0;
}

.newsletter-card{
    background:linear-gradient(135deg,#FFF6FB,#F3EDFF);
    padding:60px;
    border-radius:35px;
    text-align:center;
    box-shadow:var(--shadow);
}

.newsletter-card h2{
    font-size:30px;
    margin-bottom:15px;
}

.newsletter-card p{
    max-width:700px;
    margin:auto;
    margin-bottom:35px;
}

.newsletter form{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
}

.newsletter input{
    width:420px;
    max-width:100%;
    padding:18px 24px;
    border-radius:50px;
    border:2px solid #E6DDF7;
    outline:none;
    font-size:16px;
}

.newsletter button{
    padding:18px 36px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#F6BCD5,#D4C4F8);
    cursor:pointer;
    font-size:16px;
    font-weight:600;
}

/* ===========================
SUCCESS POPUP
=========================== */

.popup-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    visibility:hidden;

    opacity:0;

    transition:.35s;

    z-index:99999;

}

.popup-overlay.show{

    visibility:visible;

    opacity:1;

}

.popup-box{

    width:430px;

    background:white;

    padding:45px;

    border-radius:30px;

    text-align:center;

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

    animation:popup .35s ease;

}

.popup-icon{

    font-size:70px;

    margin-bottom:20px;

}

.popup-box h2{

    color:#5B4B6B;

    margin-bottom:15px;

}

.popup-box p{

    color:#777;

    line-height:1.8;

    margin-bottom:30px;

}

.popup-box button{

    border:none;

    padding:16px 40px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #F7C7DC,
        #CDB4DB);

    color:#4D4456;

    font-size:17px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.popup-box button:hover{

    transform:translateY(-3px);

}

@keyframes popup{

    from{

        transform:scale(.7);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

.social-buttons{

    display:flex;

    gap:18px;

    margin-top:35px;

}

.social-btn{

    width:140px;

    height:52px;

    border-radius:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#25D366;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    transition:.3s;

    gap: 5px;

    font-weight: 550;

}

.social-btn:hover{

    transform:translateY(-4px);
    background: #ead3e8;
    color: #262b31;
}

.social-buttons{
    flex-wrap: wrap;
}

.social-btn{

width:170px;

height:52px;

font-size:17px;

}

/*====================================================
                RESPONSIVE
=====================================================*/

@media(max-width:992px){

.main-wrapper{
    grid-template-columns:1fr;
}

.toc{
    position:relative;
    top:0;
}

.timeline::before{
    left:20px;
}

.timeline-item{
    width:100%;
    margin-left:0 !important;
    padding-left:70px !important;
    padding-right:0 !important;
    text-align:left !important;
}

.circle{
    left:2px !important;
}

.author-card{
    flex-direction:column;
    text-align:center;
}

.article-navigation{
    flex-direction:column;
}

.hero{
    flex-direction:column;
    text-align:center;
}

.hero-buttons{
    justify-content:center;
}

}

@media(max-width:768px){

.hero h1{
    font-size:40px;
}

.article-section h2{
    font-size:34px;
}

.newsletter-card{
    padding:40px 25px;
}

.newsletter form{
    flex-direction:column;
}

.newsletter input,
.newsletter button{
    width:100%;
}

header{
    flex-direction:column;
    height:auto;
    padding:20px;
}

nav ul{
    flex-wrap:wrap;
    justify-content:center;
}

}

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

.premium-footer {
  background: linear-gradient(135deg, #1f2428, #2d3338);
  color: #ddd;
  padding: 70px 8% 30px;
  font-family: Arial, sans-serif;
}

.footer-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 50px;
}

.footer-col {
  flex: 1;
  min-width: 250px;
}

.footer-col h3 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #ffffff;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col ul li {
  margin-bottom: 12px;
}

.footer-col a {
  color: #bbb;
  text-decoration: none;
  transition: 0.3s ease;
}

.footer-col a:hover {
  color: #f9c9e0;
  padding-left: 5px;
}

/* QR Box */
.qr-box img {
  width: 180px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.powered-text {
  font-size: 13px;
  color: #aaa;
}

/* App Button */
.app-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 30px;
  border: none;
  background: #789ef0;
  color: white;
  font-size: 14px;
  transition: 0.3s;
}

.app-btn:hover {
  background: #588af7;
}

/* Social Buttons */
.social-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
}

.social-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 20px;
  background: #789ef0;
  color: white !important;
  margin-right: 0;
  font-size: 14px;
  transition: 0.3s;
  text-align: center;
}

.social-btn:hover {
  background: #588af7;
}

/* Bottom */
.footer-bottom {
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #444;
  font-size: 14px;
  color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-wrapper {
    flex-direction: column;
  }
}
/* Floating Icons Container */
.floating-icons {
  position: fixed;
  bottom: 20px;
  right: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1000;
}

/* Smaller Button Size */
.floating-icons a {
  width: 45px;      /* reduced from 60px */
  height: 45px;     /* reduced from 60px */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transition: 0.3s ease;
}

/* Smaller Icon Inside */
.floating-icons a img {
  width: 22px;      /* reduced from 30px */
  height: 22px;
}

/* WhatsApp */
.whatsapp {
  background-color: #25D366;
}

/* Call */
.call {
  background-color: #007bff;
}

/* Hover Effect */
.floating-icons a:hover {
  transform: scale(1.1);
}