/* =================================
GGR PREMIUM ARTICLE DESIGN SYSTEM
================================= */


/* SITE CONTENT WIDTH */

.single .site-content {

max-width: 1280px;

margin: auto;

padding: 40px 20px;

}



/* GRID LAYOUT */

.single .content-area {

width: 72%;

float: left;

}



.single .widget-area {

width: 28%;

float: right;

padding-left: 40px;

}



/* ARTICLE CARD */

.single .inside-article {

background: #ffffff;

padding: 45px;

border-radius: 16px;

box-shadow:

0 20px 60px rgba(0,0,0,0.08);

transition: all .3s ease;

}



.single .inside-article:hover {

transform: translateY(-3px);

}



/* HERO IMAGE */

.single .post-image img {

border-radius: 12px;

box-shadow:

0 25px 50px rgba(0,0,0,0.25);

margin-bottom: 30px;

transition: transform .35s ease;

}



.single .post-image img:hover {

transform: scale(1.02);

}



/* TYPOGRAPHY */

.single h1 {

font-size: 40px;

line-height: 1.3;

font-weight: 700;

margin-bottom: 20px;

}



.single h2 {

font-size: 30px;

margin-top: 50px;

margin-bottom: 14px;

border-bottom: 2px solid #f1f1f1;

padding-bottom: 6px;

}



.single h3 {

font-size: 24px;

margin-top: 35px;

}



.single p {

font-size: 18px;

line-height: 1.8;

color: #444;

margin-bottom: 20px;

}



/* IMAGE STYLE */

.single .inside-article img {

border-radius: 10px;

box-shadow:

0 10px 30px rgba(0,0,0,0.12);

margin: 25px 0;

transition: transform .3s ease;

}



.single .inside-article img:hover {

transform: scale(1.03);

}



/* TABLE OF CONTENTS */

#ez-toc-container {

background: #f9fafc;

border-radius: 12px;

padding: 20px;

box-shadow:

0 6px 20px rgba(0,0,0,0.06);

margin-bottom: 30px;

}



/* HIGHLIGHT BOX */

.ggr-highlight {

background: #f0f7ff;

border-left: 5px solid #1e73be;

padding: 22px;

margin: 30px 0;

border-radius: 8px;

}



/* TIP BOX */

.ggr-tip {

background: #f4fff4;

border-left: 5px solid #2ecc71;

padding: 22px;

margin: 30px 0;

border-radius: 8px;

}



/* WARNING BOX */

.ggr-warning {

background: #fff6f6;

border-left: 5px solid #ff5c5c;

padding: 22px;

margin: 30px 0;

border-radius: 8px;

}



/* BUTTON */

.ggr-button {

display: inline-block;

background: #1e73be;

color: white;

padding: 12px 24px;

border-radius: 8px;

font-weight: 600;

text-decoration: none;

transition: all .3s ease;

}



.ggr-button:hover {

background: #155a94;

transform: translateY(-2px);

}



/* SIDEBAR WIDGET */

.widget {

background: white;

padding: 20px;

border-radius: 12px;

box-shadow:

0 6px 20px rgba(0,0,0,0.08);

margin-bottom: 25px;

}



/* SIDEBAR TITLE */

.widget-title {

font-size: 18px;

margin-bottom: 10px;

}


.ggr-product-box{

display:flex;

align-items:center;

gap:20px;

background:#fff;

padding:25px;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

margin:30px 0;

}

#ggr-progress{


position:fixed;
top:0;
left:0;
height:4px;
background:linear-gradient(90deg,#1e73be,#4aa3ff);
width:0%;
z-index:9999;
transition:width .2s ease;
box-shadow:0 1px 4px rgba(0,0,0,0.2);

}



/* RESPONSIVE TABLET */

@media (max-width: 1024px) {


.single .content-area {

width: 100%;

}


.single .widget-area {

width: 100%;

padding-left: 0;

margin-top: 40px;

}


.single .inside-article {

padding: 30px;

}


.single h1 {

font-size: 32px;

}


.single h2 {

font-size: 26px;

}

}



/* MOBILE */

@media (max-width: 768px) {


.single .inside-article {

padding: 22px;

}


.single h1 {

font-size: 28px;

}


.single h2 {

font-size: 24px;

}


.single p {

font-size: 17px;

}

}



/* SMALL MOBILE */

@media (max-width: 480px) {


.single .inside-article {

padding: 18px;

}


.single h1 {

font-size: 24px;

}


.single h2 {

font-size: 22px;

}


.single p {

font-size: 16px;

}

}