/* =========================================================
CURIOUS EXPLORER
STANDARD ARTICLE STYLES
========================================================= */

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

.article-header {


position: relative;

padding-top: 100px;

padding-bottom: 70px;

background: #ffffff;

z-index: 1;


}

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

.article-breadcrumb {


position: relative;

z-index: 2;

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 12px;

margin-bottom: 30px;

font-size: 0.95rem;

line-height: 1.6;


}

.article-breadcrumb a {


display: inline-flex;

align-items: center;

gap: 8px;

color: #16A34A;

text-decoration: none;

font-weight: 700;

transition: all 0.3s ease;


}

.article-breadcrumb a:hover {


color: #15803D;

transform: translateX(2px);


}

.article-breadcrumb a i {


font-size: 0.85rem;


}

.article-breadcrumb span {


color: #6B7280;

font-weight: 600;


}

.article-breadcrumb .breadcrumb-separator {


color: #A1A1AA;

font-size: 0.65rem;


}

/* =========================================================
ARTICLE CATEGORY
========================================================= */

.article-category {


display: inline-flex;

align-items: center;

gap: 10px;

background: #ECFDF3;

color: #16A34A;

padding: 10px 22px;

border-radius: 40px;

font-weight: 700;

margin-bottom: 25px;


}

.article-category i {


font-size: 1rem;


}

/* =========================================================
ARTICLE TITLE
========================================================= */

.article-header h1 {


font-family: "Plus Jakarta Sans", sans-serif;

font-size: 4rem;

font-weight: 800;

color: #111827;

margin-bottom: 25px;

line-height: 1.1;


}

/* =========================================================
ARTICLE INTRODUCTION
========================================================= */

.article-intro {


max-width: 850px;

font-size: 1.25rem;

line-height: 2;

color: #6B7280;

margin-bottom: 20;


}

/* =========================================================
ARTICLE META
========================================================= */

.article-meta {


display: flex;

flex-wrap: wrap;

gap: 25px;

margin-top: 35px;


}

.article-meta span {


display: flex;

align-items: center;

gap: 10px;

color: #4B5563;

font-weight: 600;


}

.article-meta i {


color: #16A34A;


}

/* =========================================================
FEATURED IMAGE
========================================================= */

.featured-image {


margin-bottom: 90px;


}

.featured-image img {


display: block;

width: 100%;

height: 650px;

object-fit: cover;

border-radius: 30px;

box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);


}

/* =========================================================
QUICK FACTS
========================================================= */

.quick-facts {


margin-bottom: 100px;


}

.fact-box {


background: #ffffff;

border-radius: 24px;

padding: 35px;

text-align: center;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

transition: all 0.35s ease;

height: 100%;


}

.fact-box:hover {


transform: translateY(-10px);

box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);


}

.fact-box i {


display: block;

font-size: 2rem;

color: #16A34A;

margin-bottom: 20px;


}

.fact-box h4 {


font-size: 2rem;

font-weight: 800;

color: #111827;

margin-bottom: 8px;


}

.fact-box p {


margin: 0;

color: #6B7280;

font-weight: 500;



}

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

.article-content {


padding-bottom: 100px;


}

.article-content article {


font-size: 1.15rem;

line-height: 2.05;

color: #374151;


}

.article-content article h2 {


font-family: "Plus Jakarta Sans", sans-serif;

font-size: 2.2rem;

font-weight: 800;

margin-top: 60px;

margin-bottom: 25px;

color: #111827;

line-height: 1.25;


}

.article-content article h2:first-child {


margin-top: 0;


}

.article-content article h3 {


font-size: 1.6rem;

font-weight: 800;

color: #111827;

margin-top: 45px;

margin-bottom: 20px;


}

.article-content article p {


margin-bottom: 30px;


}

.article-content article img {


display: block;

width: 100%;

border-radius: 25px;

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


}

.article-content article ul {


padding-left: 25px;

margin-bottom: 30px;


}

.article-content article ol {


padding-left: 25px;

margin-bottom: 30px;


}

.article-content article li {


margin-bottom: 12px;


}

/* =========================================================
ARTICLE LINKS
========================================================= */

.article-content article a {


color: #16A34A;

font-weight: 600;

text-decoration: none;


}

.article-content article a:hover {


color: #15803D;

text-decoration: underline;


}

/* =========================================================
BLOCKQUOTE
========================================================= */

.article-content blockquote {


margin: 60px 0;

padding: 40px;

border-left: 6px solid #16A34A;

background: #F8FAFC;

font-size: 1.5rem;

font-style: italic;

color: #111827;

border-radius: 0 20px 20px 0;

box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);


}

.article-content blockquote p {


margin: 0;


}

/* =========================================================
SIDEBAR
========================================================= */

.sidebar-card {


background: #ffffff;

border-radius: 24px;

padding: 30px;

margin-bottom: 30px;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

position: sticky;

top: 120px;


}

.sidebar-card h4 {


font-family: "Plus Jakarta Sans", sans-serif;

font-weight: 800;

color: #111827;

margin-bottom: 20px;


}

.sidebar-card ul {


list-style: none;

padding: 0;

margin: 0;


}

.sidebar-card li {


padding: 12px 0;

border-bottom: 1px solid #ECECEC;

color: #4B5563;

line-height: 1.7;


}

.sidebar-card li:last-child {


border-bottom: none;


}

.sidebar-card strong {


color: #111827;


}

/* =========================================================
GALLERY
========================================================= */

.gallery-section {


padding: 100px 0;

background: #F8FAFC;


}

.gallery-section h2 {


font-family: "Plus Jakarta Sans", sans-serif;

font-size: 2.8rem;

font-weight: 800;

color: #111827;


}

.gallery-section img {


display: block;

width: 100%;

height: 320px;

object-fit: cover;

border-radius: 24px;

transition: all 0.45s ease;

cursor: pointer;


}

.gallery-section img:hover {


transform: scale(1.05);

box-shadow: 0 25px 55px rgba(0, 0, 0, 0.15);


}

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

.related-articles {


padding: 100px 0;

background: #ffffff;


}

.related-articles h2 {


font-family: "Plus Jakarta Sans", sans-serif;

font-size: 2.8rem;

font-weight: 800;

color: #111827;


}

.related-card {


background: #ffffff;

border-radius: 25px;

overflow: hidden;

box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

transition: all 0.35s ease;

height: 100%;


}

.related-card:hover {


transform: translateY(-12px);

box-shadow: 0 30px 65px rgba(0, 0, 0, 0.13);


}

.related-card-image {


overflow: hidden;


}

.related-card img {


display: block;

width: 100%;

height: 260px;

object-fit: cover;

transition: transform 0.6s ease;


}

.related-card:hover img {


transform: scale(1.08);


}

.related-card h4 {


font-family: "Plus Jakarta Sans", sans-serif;

font-weight: 800;

color: #111827;

margin-bottom: 15px;


}

.related-card p {


color: #6B7280;

margin: 0;

line-height: 1.7;


}

/* =========================================================
ARTICLE BUTTON
========================================================= */

.article-content .btn-article {


display: inline-flex;

align-items: center;

gap: 10px;

padding: 12px 24px;

border-radius: 50px;

background: #16A34A;

color: #ffffff;

text-decoration: none;

font-weight: 700;

transition: all 0.3s ease;


}

.article-content .btn-article:hover {


background: #15803D;

color: #ffffff;

transform: translateY(-2px);


}

/* =========================================================
ARTICLE DIVIDER
========================================================= */

.article-divider {


width: 80px;

height: 4px;

background: #16A34A;

border-radius: 20px;

margin: 35px 0;


}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991px) {


.article-header {

    padding-top: 165px;

}

.article-header h1 {

    font-size: 3rem;

}

.article-intro {

    font-size: 1.15rem;

}

.featured-image {

    margin-bottom: 70px;

}

.featured-image img {

    height: 450px;

}

.quick-facts {

    margin-bottom: 70px;

}

.article-content {

    padding-bottom: 70px;

}

.sidebar-card {

    position: relative;

    top: auto;

    margin-top: 50px;

}

.gallery-section {

    padding: 80px 0;

}

.related-articles {

    padding: 80px 0;

}


}

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

@media (max-width: 768px) {


.article-header {

    padding-top: 140px;

    padding-bottom: 50px;

}

.article-breadcrumb {

    gap: 8px;

    margin-bottom: 25px;

    font-size: 0.85rem;

}

.article-breadcrumb .breadcrumb-separator {

    font-size: 0.55rem;

}

.article-category {

    padding: 8px 17px;

    font-size: 0.9rem;

}

.article-header h1 {

    font-size: 2.3rem;

    line-height: 1.15;

}

.article-intro {

    font-size: 1.05rem;

    line-height: 1.8;

}

.article-meta {

    gap: 15px;

    flex-direction: column;

}

.featured-image {

    margin-bottom: 55px;

}

.featured-image img {

    height: 300px;

    border-radius: 20px;

}

.quick-facts {

    margin-bottom: 55px;

}

.fact-box {

    padding: 25px 20px;

    border-radius: 20px;

}

.fact-box i {

    font-size: 1.7rem;

    margin-bottom: 15px;

}

.fact-box h4 {

    font-size: 1.6rem;

}

.article-content {

    padding-bottom: 60px;

}

.article-content article {

    font-size: 1.05rem;

    line-height: 1.9;

}

.article-content article h2 {

    font-size: 1.8rem;

    margin-top: 45px;

}

.article-content article h3 {

    font-size: 1.4rem;

}

.article-content article img {

    border-radius: 18px;

}

.article-content blockquote {

    margin: 45px 0;

    padding: 25px;

    font-size: 1.2rem;

    border-left-width: 4px;

}

.sidebar-card {

    padding: 25px;

    border-radius: 20px;

}

.gallery-section {

    padding: 65px 0;

}

.gallery-section h2 {

    font-size: 2.2rem;

}

.gallery-section img {

    height: 220px;

    border-radius: 18px;

}

.related-articles {

    padding: 65px 0;

}

.related-articles h2 {

    font-size: 2.2rem;

}

.related-card {

    border-radius: 20px;

}

.related-card img {

    height: 230px;

}
```

}

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

@media (max-width: 480px) {


.article-header {

    padding-top: 125px;

}

.article-breadcrumb {

    gap: 6px;

    font-size: 0.78rem;

}

.article-header h1 {

    font-size: 2rem;

}

.article-intro {

    font-size: 1rem;

}

.article-meta span {

    font-size: 0.9rem;

}

.featured-image img {

    height: 240px;

    border-radius: 16px;

}

.fact-box {

    padding: 22px 15px;

}

.gallery-section img {

    height: 200px;

}

.related-card img {

    height: 210px;

}


}