/*=================THEME COLOR==============*/

/*================LIGHT THEME============*/
.theme-light{
--overall-bg: #F3F4F6;
--primary-bg: #F9FAFB;

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

--section-header-title: #111827;
--section-header-subtitle: #4B5563;
--section-header-link: #4B5563;
--section-header-link-hover: #111827;

--nav-bg: #f9fafb;
--nav-border: #e5e7eb;
--nav-tagline: #6b7280;

/*===========NAV ICON==========*/
--nav-icon-color: #6b7280;
--nav-icon-hover-bg: rgba(255, 255, 255, 0.6);
--nav-icon-hover-color: #4b5563;

/*===========NAV LINES==========*/

--nav-divider: linear-gradient(to bottom, transparent, rgba(209, 213, 219, 0.5), transparent);
--nav-top-line: linear-gradient(to right, transparent, rgba(209, 213, 219, 0.3), transparent);

/*===========NAV ITEM==========*/
--nav-item: #374151;
--nav-item-hover: #1f2937; /*==#111827===*/
--nav-item-hover-line: linear-gradient(to right, rgba(156, 163, 175, 0.5), rgba(107, 114, 128, 0.7), rgba(156, 163, 175, 0.5));

/*===========SUN MENU=========*/
--submenu-divider: linear-gradient(to right, transparent, rgba(209, 213, 219, 0.25), transparent);
--submenu-hover-bg: rgba(243, 244, 246, 0.9);

/*===========DROPDOWN BG==========*/

--dropdown-bg: rgba(255, 255, 255, 0.95);
--dropdown-border: rgba(229, 231, 235, 0.5);
--dropdown-header: #6B7280; 


--lang-dropdown-option-hover-bg: #F9FAFB;
--lang-dropdown-option-hover: #111827;

--lang-sub: #6B7280;


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

--card-bg: #ffffff;
--card-border: #f3f4f6;
--card-title: #111827;
--card-title-hover: #374151;
--card-badge-bg: rgba(255, 255, 255, 0.9);
--card-badge-color: #1f2937;
--card-category: #4B5563;
--card-desc: #4b5563;
--card-label: #6B7280;
--card-value: #1F2937;
--card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 
0 2px 4px -2px rgba(0,0,0,0.1);

--card-shadow-hover: 0 10px 15px -3px rgba(0,0,0,0.1), 
0 4px 6px -4px rgba(0,0,0,0.1);


/*=================PAGINATION================*/

--page-bg: rgba(255, 255, 255, 0.8);
--page-border: rgba(229, 231, 235, 0.6);
--page-btn-color: #4B5563;
--page-btn-hover: #111827;
--page-btn-hover-bg: #F9FAFB;
--page-btn-disable: #D1D5DB;
--page-active: #629c49;


/*===========RIGHT SECTION LIST================*/

--rg-sec-box-bg: rgba(255, 255, 255, 0.95);
--rg-sec-box-border: rgba(229, 231, 235, 0.6);

--rg-sec-header-border: rgba(243, 244, 246, 0.5);

--sponsor-color: rgba(107, 114, 128, 0.9);

--rg-sec-title-bg: rgba(31, 41, 55, 0.95);
--rg-sec-title-color: #FFFFFF;

--rg-sec-body-title: #1f2937;
--rg-sec-body-title-hover: #111827;

--rg-sec-body-subtitle: #4B5563;


--tool-bg: rgba(249, 250, 251, 0.8);
--tool-border: rgba(243, 244, 246, 0.5);

--tool-bg-hover: rgba(255, 255, 255, 0.9);
--tool-bg-border: rgba(229, 231, 235, 0.6);


/*===========SEARCH BAR================*/


--search-bar-bg: #ffffff;
--search-bar-border: rgba(229, 231, 235, 0.6);
--search-bar-color: #111827;

--search-bar-placeholder: rgba(107, 114, 128, 0.6);
--search-bar-hover: rgba(209, 213, 219, 0.8);
--search-bar-focus: #d1d5db;

/*===========FILTER================*/

--filter-icon: #9CA3AF;

--filter-bg: #FFFFFF;
--filter-border: rgba(229, 231, 235, 0.6);

--filter-button-color: #111827;
--filter-button-hover: rgba(209, 213, 219, 0.8);

--filter-arrow: #FFFFFF;

--filter-header-color: #6B7280;

--filter-divider: rgba(229, 231, 235, 0.6);

--filter-option: #374151;
--filter-option-hover-color: #111827;
--filter-option-hover-bg: rgba(249, 250, 251, 0.8);
--filter-hover-line: linear-gradient(to right, rgba(156, 163, 175, 0.4), rgba(107, 114, 128, 0.6), rgba(156, 163, 175, 0.4));

--filter-option-active: #f5f5f5;

/*===========AD================*/
--ad-color: #6B7280;
--ad-bg: linear-gradient(to right, #F9FAFB, #F3F4F6);
--ad-border: #F3F4F6;

--fixed-ad-bg: linear-gradient(to bottom, #E5E7EB, #D1D5DB);

/*===========Footer========*/
--footer-bg: #f9fafb;
--footer-color: #6b7280;
--footer-border: #e5e7eb;
--footer-logo-text: #6B7280;

--footer-heading: #111827;

--footer-divider: #e5e7eb;

/*================reels==============*/
--reels-btn-bg: rgba(255, 255, 255, 0.8);
--reels-btn-color: #4b5563;
--reels-btn-border: rgba(229, 231, 235, 0.6);
--reels-btn-hover-bg: #ffffff;
--reels-btn-hover-color: #111827;
--reels-btn-hover-border: rgba(209, 213, 219, 0.8);
--reels-btn-disable-bg: rgba(243, 244, 246, 0.5);
--reels-btn-disable-color: #d1d5db;
--reels-btn-disable-border: rgba(229, 231, 235, 0.3);

--reels-dot-bg: #d1d5db;
--reels-dot-hover-bg: #9ca3af;
--reels-dot-active: #e84d67;
--header-close: url(../images/header-close-light.svg);

--breadcrumb-p-color: #6b7280;
--article-whatsapp : url(../images/whatsapp-light.svg);
--notification-on: url(https://images.gizbot.com/images/notification-on-1770274567242.svg);
--notification-off: url(https://images.gizbot.com/images/notification-off-1770274567241.svg);
}


/*================DARK THEME============*/

.theme-dark{
--overall-bg: #1f2937;
--primary-bg: #111827;

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

--section-header-title: #f3f4f6;
--section-header-subtitle: #d1d5db;
--section-header-link: #d1d5db;
--section-header-link-hover: #f3f4f6;

--nav-bg: #111827;
--nav-border: #374151;
--nav-tagline: #d1d5db;

/*===========NAV ICON==========*/
--nav-icon-color: #9ca3af;
--nav-icon-hover-bg: rgba(31, 41, 55, 0.3);
--nav-icon-hover-color: #e5e7eb;

/*===========NAV LINES==========*/

--nav-divider: linear-gradient(to bottom, transparent, rgba(107,114,128,0.5), transparent);
--nav-top-line: linear-gradient(to right, transparent, rgba(107,114,128,0.25), transparent);

/*===========NAV ITEM==========*/
--nav-item: #e5e7eb;
--nav-item-hover: #f3f4f6;
--nav-item-hover-line: linear-gradient(to right, rgba(209,213,219,0.6), rgba(156,163,175,0.8), rgba(209,213,219,0.6));

/*===========SUN MENU=========*/
--submenu-divider: linear-gradient(to right, transparent, rgba(107,114,128,0.2), transparent);
--submenu-hover-bg: rgba(55, 65, 81, 0.6);

/*===========DROPDOWN BG==========*/

--dropdown-bg: rgba(31, 41, 55, 0.98);
--dropdown-border: rgba(55, 65, 81, 0.6);
--dropdown-header: #D1D5DB; 


--lang-dropdown-option-hover-bg: rgba(55, 65, 81, 0.6);
--lang-dropdown-option-hover: #FFFFFF;

--lang-sub: #9CA3AF;


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

--card-bg: rgba(31, 41, 55, 0.95);
--card-border: rgba(55, 65, 81, 0.6);
--card-title: #f3f4f6;
--card-title-hover: #fafafa;
--card-badge-bg: rgba(31,41,55,0.9);
--card-badge-color: #e5e7eb;
--card-category: #e5e7eb;
--card-desc: #d1d5db;
--card-label: #9ca3af;
--card-value: #e5e7eb;

--card-shadow: 0 4px 6px rgba(0,0,0,0.4);

--card-shadow-hover: 0 8px 16px rgba(0,0,0,0.5);


/*=================PAGINATION================*/

--page-bg: rgba(31, 41, 55, 0.6);
--page-border: rgba(55, 65, 81, 0.4);
--page-btn-color: #d1d5db;
--page-btn-hover: #f3f4f6;
--page-btn-hover-bg: rgba(55, 65, 81, 0.6);
--page-btn-disable: #4b5563;
--page-active: #629c49;


/*===========RIGHT SECTION LIST================*/

--rg-sec-box-bg: rgba(31, 41, 55, 0.95);
--rg-sec-box-border: rgba(55, 65, 81, 0.6);

--rg-sec-header-border: rgba(55,65,81,0.3);

--sponsor-color: rgba(209,213,219,0.8);

--rg-sec-title-bg: rgba(55,65,81,0.9);
--rg-sec-title-color: #FFFFFF;

--rg-sec-body-title: #e5e7eb;
--rg-sec-body-title-hover: #ffffff;
--rg-sec-body-subtitle: #d1d5db;


--tool-bg: rgba(55,65,81,0.6);
--tool-border: rgba(75,85,99,0.4);

--tool-bg-hover: rgba(55,65,81,0.8);
--tool-bg-border: rgba(75,85,99,0.6);


/*===========SEARCH BAR================*/


--search-bar-bg: #1f2937;
--search-bar-border: rgba(55, 65, 81, 0.6);
--search-bar-color: #f3f4f6;

--search-bar-placeholder: rgba(209, 213, 219, 0.6);
--search-bar-hover: rgba(75, 85, 99, 0.8);
--search-bar-focus: #4B5563;


/*===========FILTER================*/

--filter-icon: #9CA3AF;

--filter-bg: #1F2937;
--filter-border: rgba(55, 65, 81, 0.6);

--filter-button-color: #F3F4F6;
--filter-button-hover: rgba(75, 85, 99, 0.8);

--filter-arrow: rgba(31, 41, 55, 0.95);

--filter-header-color: #D1D5DB;

--filter-divider: linear-gradient(to right, transparent, rgba(107, 114, 128, 0.2), transparent);

--filter-option: #E5E7EB;
--filter-option-hover-color: #F3F4F6;
--filter-option-hover-bg: rgba(55, 65, 81, 0.4);
--filter-hover-line: linear-gradient(to right, rgba(209,213,219,0.5), rgba(156,163,175,0.7), rgba(209,213,219,0.5));

--filter-option-active: #3b4450;

/*===========AD================*/
--ad-color: #9ca3af;
--ad-bg: linear-gradient(
to right,
rgba(55, 65, 81, 0.5),
rgba(75, 85, 99, 0.5)  
);
--ad-border: rgba(55, 65, 81, 0.5);

--fixed-ad-bg: linear-gradient(to bottom, #374151, #4B5563);

/*===========Footer========*/
--footer-bg: #111827;
--footer-color: #9ca3af;
--footer-border: #374151;
--footer-logo-text: #d1d5db;

--footer-heading: #ffffff;

--footer-divider: #FFFFFF1A;

/*===============Reels nav btn============*/
--reels-btn-bg: rgba(31, 41, 55, 0.6);
--reels-btn-color: #d1d5db;
--reels-btn-border: rgba(55, 65, 81, 0.4);
--reels-btn-hover-bg: rgba(55, 65, 81, 0.8);
--reels-btn-hover-color: #f9fafb;
--reels-btn-hover-border: rgba(75, 85, 99, 0.6);
--reels-btn-disable-bg: rgba(31, 41, 55, 0.3);
--reels-btn-disable-color: #4b5563;
--reels-btn-disable-border: rgba(55, 65, 81, 0.2);

--reels-dot-bg: #4b5563;
--reels-dot-hover-bg: #6b7280;
--reels-dot-active: #629c49;
--header-close: url(../images/header-close-dark.svg);

--breadcrumb-p-color: #6b7280;
--article-whatsapp : url(../images/whatsapp-dark.svg);
--notification-on: url(../images/notification-on-dark.svg);
--notification-off: url(../images/notification-off-dark.svg);
}


/*====================GENERAL STYLE==================*/
*{
padding: 0;
margin: 0;
/*box-sizing: border-box;*/
}

a{
text-decoration: none;
}

ul,li{
list-style: none;
}

body{
font-family: -apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Helvetica Neue,Helvetica,Arial,sans-serif;
background: #F9FAFB;
}

/* Default: dark theme */
.logo-dark {
display: block;
}
.logo-light {
display: none;
}

/* Light theme active */
html.theme-light .logo-dark {
display: none;
}
html.theme-light .logo-light {
display: block;
}

/*===========================AD STYLE=====================*/
/*==========top AD=======*/

.top-ad-container {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1),
0 10px 10px -5px rgba(0,0,0,0.04); 
border: 1px solid var(--ad-border); 
background: var(--ad-bg);
width: 970px;
height: 140px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 48px;margin-top: 48px;
}

/*=====RIGHT AD=========*/
.right-ad-container{
width: 100%;
height: 250px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
overflow: hidden;
box-shadow: var(--card-shadow); 
border: 1px solid var(--ad-border); 
background: var(--ad-bg);
}

.ad-text {
text-align: center;
transition: color 0.3s ease; 
color: var(--ad-color);
}

.ad-label {
font-size: 14px; 
font-weight: 300; 
margin-bottom: 4px; 
}

.ad-size {
font-size: 12px; 
color: var(--ad-color); 
}

/*==========LEFT AND RIGHT FIXED AD============*/
.fixed-left-ad {
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 600px;
z-index: 10;

}

.fixed-right-ad {
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 600px;
z-index: 10;

}

.fixed-ad-wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: var(--fixed-ad-bg);
}

.fixed-ad-text {
text-align: center;
transform: rotate(-90deg);
color: var(--ad-color);
}

.fixed-ad-text .title {
font-size: 12px;
font-weight: 500;
margin-bottom: 4px;
}

.fixed-ad-text .size {
font-size: 12px;
}


/*===========================LAYOUT STYLE=====================*/
.wrapper-container{
width: 1000px;
/* padding: 48px 20px; */
margin: 0 auto;
background: #f9fafb;
}

.main-section-wrapper{
display: flex;flex-direction: row;align-items: flex-start;
gap: 32px;
justify-content: space-between;
}

.left-wrapper{
width: 668px;
}

.right-wrapper{
width: 300px;
}

/*=============SECTION HEADER=============*/
.section-header{
margin-bottom: 32px; 
}

.section-header__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px; 
}

.section-header__title {
font-size: 32px; 
font-weight: 600;
letter-spacing: -0.02em;
color: var(--section-header-title);
transition: color 0.3s ease;
}

.section-header__link {
display: flex;
align-items: center;
font-size: 14px;
font-weight: 500;
color: var(--section-header-link);
text-decoration: none;
transition: color 0.3s ease;
}

.section-header__link:hover {
color: var(--section-header-link-hover);
text-decoration: underline;
}

.section-header__icon {
width: 16px;
height: 16px;
margin-left: 4px;
transition: transform 0.2s ease;
}

.section-header__link:hover .section-header__icon {
transform: translateX(2px);
}

.section-header__subtitle {
font-size: 18px;
font-weight: 300;
max-width: 640px;
color: var(--section-header-subtitle);
transition: color 0.3s ease;
}

/*=============SECTION CONTAINER=============*/
.section-container {
margin: 96px 0px;
}


/*======HERO NEWS CARD=====*/
.hero-news-card {
margin-bottom: 64px;
}

.hero-news-card article {
border-radius: 12px; 
box-shadow: var(--card-shadow);
transition: all 0.5s ease;
overflow: hidden;
cursor: pointer;
height: 100%;
width: 100%;
background: var(--card-bg);
backdrop-filter: blur(4px);
border: 1px solid var(--card-border);
border: 0;
}

.hero-news-card article:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-4px);
}

.hero-news-card .hero-news-card__content {
display: flex;
gap: 24px;
height: 100%;
}

.hero-news-card .hero-news-card__img-wrapper {
position: relative;
overflow: hidden;
flex-shrink: 0;
width: 354px;
height: 234px;
}

.hero-news-card .hero-news-card__img-wrapper img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease-out;
display: block;
}

.hero-news-card:hover .hero-news-card__img-wrapper img {
transform: scale(1.02);
}

.hero-news-card .hero-news-card__text-content {
flex: 1;
padding: 24px; 
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}

.hero-news-card .hero-news-card__text-content h3 {
font-size: 20px; 
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
color: var(--card-title); 
transition: color 0.3s ease;
}

.hero-news-card .hero-news-card__text-content:hover h3 {
color: var(--card-title-hover);
}

/*====NEWS CRAD=====*/
.news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px; 
/* margin-bottom: 64px; */
}

.news-card {
border-radius: 12px; 
box-shadow: var(--card-shadow);
transition: all 0.5s ease;
overflow: hidden;
cursor: pointer;
background: var(--card-bg);
backdrop-filter: blur(4px); 
border: 1px solid var(--card-border); 
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 0;
}

.news-card:hover {
box-shadow: var(--card-shadow-hover); 
transform: translateY(-4px);
}

.news-card-img-wrapper {
position: relative;
width: 100%;
}

.news-card-img-container {
width: 100%;
height: 100%;
aspect-ratio: 16 / 9;
}

.news-card-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease-out;
}

.news-card:hover .news-card-img-container img {
transform: scale(1.02);
}

.news-content {
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.news-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
line-height: 1.4;
color: var(--card-title);
transition: color 0.3s ease;
}

.news-card:hover .news-title {
color: var(--card-title-hover); 
}

.news-description {
font-size: 14px;
font-weight: 300;
line-height: 1.6;
color: var(--card-desc);
transition: color 0.3s ease;
}

/*==============REVIEW SECTION==============*/

/* .reviews-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); 
gap: 32px;
} */


.review-card {
border-radius: 12px;
border: 1px solid var(--card-border);
background: var(--card-bg);
box-shadow: var(--card-shadow);
overflow: hidden;
cursor: pointer;
transition: all 0.5s ease;
backdrop-filter: blur(4px);
border: 0;
width: 100%;
height: 100%;
}

.review-card:hover {
box-shadow: var(--card-shadow-hover);
transform: translateY(-4px);
}

.review-image-wrapper {
position: relative;
overflow: hidden;
}

.review-image-container{
width: 100%;
aspect-ratio: 16 / 9;
}

.review-image-container .review-image{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease-out;
}

.review-card:hover .review-image {
transform: scale(1.02);
}

.review-content {
padding: 20px;
}

.review-title {
font-size: 18px;
font-weight: 600;
line-height: 1.4;
color: var(--card-title);
transition: color 0.3s ease;
}

.review-card:hover .review-title {
color: var(--card-title-hover);
}

/*=================REELS============*/
.reels-nav-section{
display: flex;
align-items: center;
gap: 16px;
}

.reels-nav {
display: flex;
align-items: center;
gap: 8px; 
/* padding: 10px 0px; */
}

.reels-btn {
background-color: var(--reels-btn-bg); 
color: var(--reels-btn-color); 
border: 1px solid var(--reels-btn-border); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
padding: 12px; 
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.reels-btn:not(:disabled):hover{
background-color: var(--reels-btn-hover-bg); 
color: var(--reels-btn-hover-color);
border: 1px solid var(--reels-btn-hover-border); 
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
transform: scale(1.10); 
}

.reels-btn:not(:disabled):active{
transform: scale(0.95); 
}


.reels-btn-prev.disable{
background-color: var(--reels-btn-disable-bg); 
color: var(--reels-btn-disable-color);
border: 1px solid var(--reels-btn-disable-border); 
cursor: not-allowed;
pointer-events: none;
}

.reels-btn-next.disable{
background-color: var(--reels-btn-disable-bg); 
color: var(--reels-btn-disable-color);
border: 1px solid var(--reels-btn-disable-border); 
cursor: not-allowed;
pointer-events: none;
}

.reels-btn .icon {
width: 20px; 
height: 20px; 
}


.reels-container {
position: relative;
overflow: hidden; 
padding-bottom: 10px;
}

.reels-grid {
display: flex;
gap: 32px; 
transition: transform 0.5s ease;
will-change: transform;
padding-bottom: 10px;

}

.reels-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
box-shadow: var(--card-shadow);
overflow: hidden;
cursor: pointer;
transition: all 0.5s ease;
width: 100%;
flex: 0 0 190px;
height: auto;
border: 0;
}

.reels-card:hover {
border-radius: 12px;
transform: translateY(-4px);
box-shadow: var(--card-shadow-hover);
}

.reels-card-img {
position: relative;
width: 100%;
aspect-ratio: 9 / 16;
overflow: hidden;
}

.reels-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease-out;
}

.reels-card:hover img {
transform: scale(1.02);
}

.reels-play-btn-wrapper {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}

.reels-play-btn {
background: rgba(255, 255, 255, 0.95);
color: #111827;
width: 50px;
height: 50px;
border-radius: 50%;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.reels-play-btn:hover {
transform: scale(1.25);
box-shadow: 0 8px 16px rgba(0,0,0,0.5);
background: #ffffff;
}

.reels-play-btn svg {
width: 24px;
height: 24px;
fill: #111827;
}

.reels-card-body {
padding: 16px;
}

.reels-card-title {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--card-title);
margin: 0;
}

.reels-card:hover .reels-card-title {
color: var(--card-title-hover);
}

.reels-dots-wrapper {
display: flex;
justify-content: center;
margin-top: 32px; 
gap: 8px;
}

.reels-dot {
width: 8px; 
height: 8px;
border-radius: 9999px; 
background-color: var(--reels-dot-bg); 
border: none;
cursor: pointer;
transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}


.reels-dot:hover {
background-color: var(--reels-dot-hover-bg); 
}

.reels-dot.active {
background-color: var(--reels-dot-active); 
width: 24px; 
}

/*=================Videos============*/
.videos-container {
position: relative;
overflow: hidden;
padding-bottom: 10px;
}

.videos-nav-section{
display: flex;
align-items: center;
gap: 16px;
}

.videos-nav {
display: flex;
align-items: center;
gap: 8px; 
/* padding: 10px 0px; */
}

.videos-btn {
background-color: var(--reels-btn-bg); 
color: var(--reels-btn-color); 
border: 1px solid var(--reels-btn-border); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
padding: 12px; 
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.videos-btn:not(:disabled):hover{
background-color: var(--reels-btn-hover-bg); 
color: var(--reels-btn-hover-color);
border: 1px solid var(--reels-btn-hover-border); 
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
transform: scale(1.10); 
}

.videos-btn:not(:disabled):active{
transform: scale(0.95); 
}

.videos-btn-prev.disable{
background-color: var(--reels-btn-disable-bg); 
color: var(--reels-btn-disable-color);
border: 1px solid var(--reels-btn-disable-border); 
cursor: not-allowed;
pointer-events: none;
}

.videos-btn-next.disable{
background-color: var(--reels-btn-disable-bg); 
color: var(--reels-btn-disable-color);
border: 1px solid var(--reels-btn-disable-border); 
cursor: not-allowed;
pointer-events: none;
}

.videos-grid{display: flex;
gap: 32px;
transition: transform 0.5s ease;
will-change: transform;
padding-bottom: 10px;
}

.videos-card {
overflow: hidden;
cursor: pointer;
transition: all 0.5s ease;
width: 100%;
flex: 0 0 340px;
height: auto;
border: 0;
}

.videos-dots-wrapper {
display: flex;
justify-content: center;
margin-top: 32px; 
gap: 8px;
}

.videos-dot {
width: 8px; 
height: 8px;
border-radius: 9999px; 
background-color: var(--reels-dot-bg); 
border: none;
cursor: pointer;
transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.videos-dot:hover {
background-color: var(--reels-dot-hover-bg); 
}

.videos-dot.active {
background-color: var(--reels-dot-active); 
width: 24px; 
}

.review-image-container iframe {width: 100%;}

/*=====================SLIDER========================*/

.latest-slider{
position: relative;
overflow: hidden;
padding-bottom: 10px;
}

.latest-nav-section{
display: flex;
align-items: center;
gap: 16px;
}

.latest-nav {
display: flex;
align-items: center;
gap: 8px; 
/* padding: 10px 0px; */
}

.latest-btn {
background-color: var(--reels-btn-bg); 
color: var(--reels-btn-color); 
border: 1px solid var(--reels-btn-border); 
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
padding: 10px; 
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.latest-btn:not(:disabled):hover{
background-color: var(--reels-btn-hover-bg); 
color: var(--reels-btn-hover-color);
border: 1px solid var(--reels-btn-hover-border); 
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
/* transform: scale(1.10);  */
}

/* .latest-btn:not(:disabled):active{
transform: scale(0.95); 
} */


.latest-btn-prev.disable{
background-color: var(--reels-btn-disable-bg); 
color: var(--reels-btn-disable-color);
border: 1px solid var(--reels-btn-disable-border); 
cursor: not-allowed;
pointer-events: none;
}

.latest-btn-next.disable{
background-color: var(--reels-btn-disable-bg); 
color: var(--reels-btn-disable-color);
border: 1px solid var(--reels-btn-disable-border); 
cursor: not-allowed;
pointer-events: none;
}

/*=====================SLIDER GRID========================*/
.latest-grid{
display: flex;
gap: 32px;
transition: transform 0.5s ease;
will-change: transform;
}

.latest-card{
width: 100%;
flex: 0 0 338px;
height: 100%;
box-shadow: 0px 4px 6px -1px #0000001A;
background: #FFFFFF;
overflow: hidden;
border-radius: 10px;
}

.latest-image{
width: 100%;
height: 189px;
}

.latest-image img{
width: 100%;
height: 100%;
object-fit: cover;
}

.latest-card-desc{
padding: 15px;
font-weight: 700;
font-size: 18px;
line-height: 28px;
color: #111827;
}

.topics-wrapper{
margin: 32px 0;
}

.right-sec-header{
margin-bottom: 20px;
}

.right-sec-header__title{
font-weight: 700;
font-size: 48px;
line-height: 48px;
color: #111827;
margin-bottom: 24px;
}

.right-sec-header__subtitle{
font-weight: 400;
font-size: 17.9px;
line-height: 28px;
color: #4B5563;
}

/*===========right body=========*/
.topics-lists-container{
padding: 24px 16px;
border-radius: 16px;
overflow: hidden;
background: #FFFFFFF2;

border: 1px solid #E5E7EB99;
box-shadow: 0px 1px 2px 0px #0000000D;

backdrop-filter: blur(4px)
}

.topic-list{
padding: 20px;
background: #F9FAFBCC;
border: 1px solid #F3F4F680;
border-radius: 12px;
margin-bottom: 16px;
text-align: center;
}

.topic-list a{
color: #1F2937;
font-weight: 400;
font-size: 18px;
line-height: 24px;
}

.topic-list:last-child{
margin-bottom: 0px;
}


/*===========right container box=========*/
.buyer-tools {
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--rg-sec-box-border);
background: var(--rg-sec-box-bg);
backdrop-filter: blur(8px);
/* box-shadow: 0px 6px 20px rgba(0,0,0,0.5); */
box-shadow: var(--card-shadow);
margin: 32px 0px;
}

/*===========right header=========*/
.right-section-header {
padding: 12px 24px;
border-bottom: 1px solid var(--rg-sec-header-border);
}

/*===========right title=========*/
.right-section-title {
padding: 24px;
background: var(--rg-sec-title-bg);
font-size: 18px;
color: var(--rg-sec-title-color);
font-weight: 300;
letter-spacing: 0.5px;
}

/*===========right body=========*/
.right-section-body {
padding: 24px;
}

/* Buyer Tools */
.tool-btn {
width: 100%;
padding: 16px;
border-radius: 12px;
background: var(--tool-bg);
border: 1px solid var(--tool-border);
margin-bottom: 16px;
cursor: pointer;
/* transition: all 0.3s ease; */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.tool-btn:last-child{
    margin-bottom: 0px;
}
.tool-btn:hover {
transform: scale(1.01);
background: var(--tool-bg-hover);
border-color: var(--tool-bg-border);
/* box-shadow: 0px 4px 10px rgba(0,0,0,0.4); */
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 
0 4px 6px -4px rgba(0,0,0,0.1);
}

.tool-text {
text-align: center;
font-size: 14px;
font-weight: 500;
color: var(--rg-sec-body-title);
}

/*============================ Main Style ==================*/
*, :before, :after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}
.section-header{margin-bottom: 0px !important;}
/* .gb-readmore-section{margin-bottom: 40px;} */
.gb-top-header{font-size: 42px;}
/* calculator-style */
.gb-calculator-container{margin-top: 32px !important;margin-bottom: 0px !important;}
.gb-common-container{margin: 40px 0px;}
.price-box {background: #fff;border-radius: 10px;border: 1px solid #e5e7eb;box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 3px;overflow: hidden;}
.price-top {display: flex;align-items: center;gap: 12px;padding: 16px 14px;}
.price-label {font-weight: 400;color: #4b5563;max-width: 44px;font-size: 13px;}
.gb-price-enter-box{width: 100%;flex: 1 1 0%;align-items: center;gap: 8px;display: flex;}
.price-input {padding: 8px 12px;border-radius: 8px;border: 1px solid #d1d5db;font-size: 15px;background: #fff;width: 180px;}
.to-text {font-size: 13px;font-weight: 400;color: #6b7280;}
.find-btn {margin-left: auto;background: #629c49;color: #fff;border: none;padding: 8px 24px;font-size: 15px;border-radius: 8px;cursor: pointer;white-space: nowrap;transition-duration: .15s;}
.find-btn:hover {background: #5c9644;}
.gb-range-wrapper {position: relative;padding-top: 8px;padding-bottom: 30px;box-sizing: border-box;}
.slider-track {position: relative;height: 2px;background: #6aa84f;top: 50%;transform: translateY(-50%);left: 0;right: 0;}
/* .range-wrapper input[type=range] {position: absolute;width: 100%;pointer-events: auto;-webkit-appearance: none;background: none;top: 13px;} */
/* .range-wrapper input[type=range]::-webkit-slider-thumb {pointer-events: auto;-webkit-appearance: none;height: 20px;width: 20px;background: #5a8f3b;border-radius: 50%;cursor: pointer;} */
/* .range-wrapper input[type=range]::-moz-range-thumb {height: 20px;width: 20px;background: #5a8f3b;border-radius: 50%;cursor: pointer;} */
/* #minRange{z-index: 2;}
#maxRange{z-index: 1;} */
#maxRange {
    padding-right: 24px;
    z-index: 1;
}
#minRange {
    padding-left: 24px;
    z-index: 2;
}
.price-box-dtls-container{margin-top: 24px;animation-delay: .2s;animation-fill-mode: both;animation: slideUp .6s ease-out;}
.price-box-block{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 16px;}
.price-box-block a{padding: 0px 10px;background: #fff;border: 1px solid #e5e7eb;justify-content: space-between;border-radius: 12px;display: flex;align-items: center;height: 120px;transition: transform .3s ease, box-shadow .3s ease;}
.price-box-lt-dtls{display: flex;justify-content: center;flex-direction: column;}
.top-text, .botm-text{color: #111827;font-size: 24px;line-height: 32px;}
.font-strong{font-weight: 600;}
.price-box-rt-thumbnail{display: flex;width: 90px;height: 90px;align-items: center;justify-content: center;}
.price-box-rt-thumbnail img{transition-duration: .2s;-o-object-fit: contain;object-fit: contain;width: 100%;height: 80px;transition-duration: .2s;
}
.pricebox-hover:hover .thumbnail-hover{--tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));}

.pricebox-hover:hover{transform: translateY(-4px);
    box-shadow: 0 10px 20px #0000001a;}
    .animate-slideUp {
    
    
}
@keyframes slideUp{
    0% {
    opacity: 0;
    transform: translateY(20px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}


/*===========FILTER BAR==========*/
.filter-bar {display: flex;gap: 16px;}
.search-box-wrapper{position: relative;flex: 1;}
.search-box{border-radius: 8px;border: 1px solid #d1d5db;background: #fff ;display: flex;align-items: center;gap: 5px;padding: 10px 16px 10px 16px;color: #111827;transition: all 0.3s ease-out;width: 100%;box-sizing: border-box;}
.search-box svg{color: var(--search-bar-placeholder);}
.search-box:hover {border: 1px solid #bfc2c6;}
.search-box:focus {border: 1px solid #bfc2c6;}
.search-box input {width: 100%;font-size: 16px;color: var(--search-bar-color);background: transparent;border: none;outline: none;}
.search-box input::placeholder{opacity: 0.6;color: var(--search-bar-placeholder);}
.search-box-filter{position: absolute;margin-top: 10px;border-radius: 16px;background: var(--filter-bg);border: 1px solid var(--filter-border);box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);z-index: 20000;transition: all 0.5s ease-out;height: 360px;overflow-x: hidden;overflow-y: scroll;-ms-overflow-style: none;  scrollbar-width: none; width: 100%;display: none;}

.search-box-filter.active{display: block;}
.filter-dropdown {position: relative;display: inline-block;}

.filter-select{padding: 12px 0px;}
.filter-button {
padding: 10px 12px;
border-radius: 8px;
font-size: 16px;
font-weight: 300;
border: 1px solid #d1d5db;
outline: none;
background: #fff;
color: #111827;
cursor: pointer;
min-width: 180px;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.3s ease-out;
}

.filter-button:hover {
border: 1px solid #bfc2c6
}

.filter-arrow {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
transform: rotate(0deg);
}

.filter-dropdown.filter-open .filter-arrow {
transform: rotate(180deg);
}

.filter-box {
position: absolute;
top: 100%;
left: 0;
margin-top: 12px;
width: 180px;
border-radius: 16px;
background: #fff;
border: 1px solid rgba(229, 231, 235, 0.6);
/* box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
z-index: 200;
transition: all 0.5s ease-out;
display: none;
height: 360px;
overflow-x: hidden;
overflow-y: scroll;
-ms-overflow-style: none;  
scrollbar-width: none;  
}

.filter-box::-webkit-scrollbar { 
display: none; 
}

.filter-box.filter-active{
display: block;
}

.filter-box::before {
content: "";
position: absolute;
top: -17px; 
left: 24px;
border: 8px solid transparent;
border-bottom-color: #ffffff;
}



.filter-select .filter-option {
width: 100%;
text-align: left;
display: block;
padding: 16px 16px;
font-size: 14px;
font-weight: 300;
color: #374151;
background: transparent;
border: none;
cursor: pointer;
position: relative;
transition: all 0.5s ease-out;box-sizing: border-box;
}

.filter-option:hover {
color: #111827;
background: rgba(249, 250, 251, 0.8);
transform: scale(1.01);
}

.filter-hover-line {
position: absolute;
bottom: 0;
left: 16px;
right: 24px;
height: 1px;
background: linear-gradient(to right, rgba(156, 163, 175, 0.4), rgba(107, 114, 128, 0.6), rgba(156, 163, 175, 0.4));
width: 0;
transition: width 0.7s ease-out;
}

.filter-option:hover .filter-hover-line {
width: calc(100% - 16px);
}

.filter-option.active {background: #f5f5f5;color: #374151;border-left: 2px solid #374151;}




/* Latest Popular Mobile Brands */

.gb-brand-block{background: #fff;border: 1px solid #e5e7eb;border-radius: 8px;overflow: hidden;transition: transform .3s ease, box-shadow .3s ease;width: 100%;flex: 0 0 180px;}
.gb-brand-inner{display: flex;height: 100%;flex-direction: column;}
.gb-brand-logo{display: flex;flex: 1 1 0%;padding: 24px;align-items: center;justify-content: center;}
.brand-logo-thumbnail{-o-object-fit: contain;object-fit: contain;width: 100%;height: 40px;}
.gb-mob-name{padding: 12px 16px;background: #f3f4f6;display: flex;justify-content: center;align-items: center;width: 100%;box-sizing: border-box;}
.gb-mob-name p{color: #1f2937;font-weight: 500;font-size: 14px;line-height: 20px;}
.gb-brand-block:hover{transform: translateY(-4px);box-shadow: 0 10px 20px #0000001a;}
.gb-brands{transition-timing-function: cubic-bezier(.4, 0, .2, 1);transition-duration: .5s;}
.gb-slider {display: flex;gap: 20px;transition: transform 0.5s ease;will-change: transform;}
.gb-common-slider {position: relative;overflow: hidden;}
.gb-common-slider-inner {position: relative;margin-bottom: 10px;}
/* Arrowleft&right-buttons-css */
.gb-slider-nav-prev {left: 0px;}
.gb-slider-nav-btn {position: absolute;top: 50%;transform: translateY(-50%);z-index: 30;width: 40px;height: 40px;border-radius: 9999px;display: flex;align-items: center;justify-content: center;transition: all 200ms;cursor: pointer;border: none;background: #fff;color: #374151;margin: 3px;transition-duration: .2s;opacity: .9;}
.gb-slider-nav-btn:hover{background: #629c49;color: #ffffff;opacity: 1;}
/* .gb-slider-nav-prev.disable {box-shadow: var(--car-slider-nav-disable-shadow);background-color: var(--car-slider-nav-disable-bg);color: var(--car-slider-nav-disable-color);cursor: not-allowed;pointer-events: none;display: none;} */
.gb-slider-nav-next {right: 0;}
.gb-dots-wrapper {display: flex;justify-content: center;margin-top: 32px;gap: 8px;}
.gb-dot.active {background-color: #629c49;width: 24px;}
.gb-dot {width: 6px;height: 6px;border-radius: 9999px;background-color: var(--reels-dot-bg);border: none;cursor: pointer;transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1);}
.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}





/* Latest Popular Mobile */
.gb-popular-brand-block {background: #fff;border: 1px solid #e5e7eb;border-radius: 12px;overflow: hidden;transition: transform .3s ease, box-shadow .3s ease;width: 180px;flex: 0 0 auto;}
.gb-popular-brand-block:hover {transform: translateY(-4px);box-shadow: 0 10px 20px #0000001a;}
.gb-popular-brand-thumbnail{padding: 16px;background: #f9fafb;justify-content: center;align-items: center;display: flex;}
.brand-thumbnail{-o-object-fit: contain;object-fit: contain;width: 100%;height: 128px;}
.popular-brand-desc{padding: 12px;}
.popular-brand-model{font-weight: 600;font-size: 16px;line-height: 24px;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin-bottom: 8px;}
.popular-brand-price{font-size: 14px;line-height: 20px;}
.gb-pp-brand{    width: 150px !important;}




/* Latest Popular Features */
/* .gb-popular-features-section{display: flex;justify-content: space-between;align-items: flex-start;} */
/* .gb-slider-nav-prev,
.gb-slider-nav-next {
  transition: opacity 0.2s ease;
}
.gb-slider-nav-prev,
.gb-slider-nav-next {
  display: flex;
  align-items: center;
  justify-content: center;
} */
.gb-features-block{width: 110px;display: flex;gap: 8px;align-items: center;flex-direction: column;overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    width: 100%;
    flex: 0 0 105px;padding-top: 5px;}
.gb-features-icon{transition: all .3s ease;color: #4b5563;background: #fff;border: 1px solid #e5e7eb;border-radius: 9999px;justify-content: center;align-items: center;cursor: pointer;width: 64px;height: 64px;display: flex;}
.gb-features-icon:hover{--tw-bg-opacity: 1;
    background-color: rgb(98 156 73 / var(--tw-bg-opacity, 1));color: #fff;--tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.gb-features-icon:hover img {
  filter: brightness(0) invert(1);
}
.features-icon{width: 40px;height: 40px;}
.features-icon-name{color: #374151;font-size: 12px;line-height: 20px;text-align: center;text-transform: capitalize;}
.gb-features-icon img {
    width: 40px;
    height: 40px;
}


/* Latest News */
.latest-news-section{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 16px;}
.latest-news-block{transition: transform .3s ease, box-shadow .3s ease;background: #fff;border: 1px solid #e5e7eb;border-radius: 12px;overflow: hidden;}
.latest-news-block:hover{transform: translateY(-4px);box-shadow: 0 10px 20px #0000001a;}
.latest-news-thumbnail{background: #f3f4f6;overflow: hidden;width: 100%;aspect-ratio: 16 / 9;}
.latest-news-thumb{width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;}
.latest-news-desc{padding: 12px;height:90px;}
.latest-news-desc p{color: #1f2937;font-weight: 700;font-size: 16px;line-height: 24px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}


/* Mobile Comparisons */
.gb-mobile-comparision{transition: transform .3s ease, box-shadow .3s ease;padding: 16px;background: #fff;border: 1px solid #e5e7eb;border-radius: 12px;width: 100%;flex: 0 0 285px;}
.gb-mobile-comp-col2{display: flex;align-items: center;justify-content: space-between;gap: 8px;}
.gb-mobile-comp{display: flex;flex: 1 1 0%;flex-direction: column;align-items: center;}
.gb-mobile-comp-image{width: 80px;height: 96px;align-items: center;justify-content: center; display: flex;}
.comp-image-thumbnail{-o-object-fit: contain;object-fit: contain;width: 100%;height: 80px;}
.gb-mobile-comp-model{overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 16px;line-height: 24px;text-align: center;font-weight: 600;color: #111827;margin-top: 8px;}
.gb-mobile-comp-price{font-size: 14px;line-height: 20px;color: #6b7280;margin-top: 4px;}
.gb-mobile-comp-vs{padding: 0px 8px;display: flex;align-items: center;justify-content: center;}
.gb-mobile-comp-vs .vs{font-size: 12px;line-height: 16px;font-weight: 700;color: #fff;padding: 4px 12px;background: #4b5563;border-radius: 9999px;}
.gb-mobile-comparision:hover{transform: translateY(-4px);box-shadow: 0 10px 20px #0000001a;}

/* mobile-price-category */
.price-category {display: flex;gap: 40px;margin-bottom: 24px;border-bottom: 1px solid #e5e7eb;}
.price-btn {padding-bottom: 12px;font-size: 16px;font-weight: 500;color: #4b5563;background: transparent;border: none;cursor: pointer;transition: all 0.2s ease;position: relative;}
.price-btn:hover {color: #111827;}
.price-btn.active {color: #629c49;}
.price-btn.active::before {position: absolute;content: '';width: 100%;height: 2px;background: #629c49;left: 0;bottom: 0;}
.tab-content.active {display: block;}
.tab-content {display: none;position: relative;}
.viewall-link {position: absolute;top: -117px;right: 0;}

/* Readmore&less-style */
.gb-readmore-text {max-height: 95px;overflow: hidden;transition: max-height 0.4s ease;color: #374151;line-height: 26px;display: -webkit-box;
-webkit-line-clamp: 3;      /* number of lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}
.gb-readmore-text.expanded {max-height: 500px;-webkit-line-clamp: unset;
overflow: visible;}
.read-more {margin-top: 8px;gap: 4px; align-items: center;flex-direction: row-reverse;font-size: 16px;font-weight: 500;color: #4b5563;cursor: pointer;user-select: none;}
.read-more span {margin-right: 6px;}
.read-more:hover{color: #111827;}
.readmore-arrow {transition: transform 0.3s ease;width: 16px;height: 16px;}
.readmore-arrow.rotate {transform: rotate(180deg);}
.gb-readmore-text.expanded + .read-more .readmore-arrow {
transform: rotate(180deg);
}



/* Filter-page-style */
.update-text{color: #6b7280;font-size: 14px;line-height: 20px;margin-top: 8px;}
.section-top__header{margin-bottom: 24px;}
.gb-mobile-filter-flex{display: flex;gap: 24px;}
.gb-available-mobile-filter-container{flex: 1 1 0%;margin-bottom: 24px;}
.sort-label {
  font-size: 14px;
  color: #374151;
  line-height: 20px;
  display: block;
}

.custom-dropdown {
  position: relative;
  user-select: none;
}

.dropdown-selected {
  background: #ffffff;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;min-width: 180px;
}

.filt-arrow {
  font-size: 12px;
  transition: transform 0.3s ease;width: 16px;height: 16px;
}
.filt-arrow  svg{width: 16px;height: 16px;color: #6b7280;}

.custom-dropdown.active .filt-arrow {
  transform: rotate(180deg);
}

.dropdown-options {
  position: absolute;
  top: 120%;
  left: 0;
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: none;
  overflow: hidden;
  z-index: 100;
}

.custom-dropdown.active .dropdown-options {
  display: block;
}

.option {
  padding: 10px 16px;
  cursor: pointer;font-size: 14px;color: #374151;line-height: 20px;
}

.option:hover {
  background: #f9fafb;
}

.option.active {
  background: #629c491a;
  font-weight: 500;
  color: #629c49;
}
.gb-available-mobile-filter-head{display: flex;flex-direction: row;align-items: center;justify-content: space-between;gap: 12px;margin-bottom: 16px;}
.available-phones{color: #111827;font-weight: 600;font-size: 20px;line-height: 28px;}
.gb-available-mobile-sort{display: flex;align-items: center;gap: 12px;}
.sel-text{font-size: 14px;line-height: 20px;font-weight: 500;color: #111827;}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.gb-available-mobile{padding: 24px;transition-duration: .5s;background: #fff;border: 1px solid #e5e7ebcc;border-radius: 16px;overflow: hidden;position: relative;margin-bottom: 24px;}
.gb-available-mobile:hover{box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);--tw-shadow: 0 8px 30px rgba(0, 0, 0, .12);border: 1px solid #d1d5dbcc;}
.gb-available-mobile:hover .gb-filtermobile-image{--tw-ring-color: rgb(98 156 73 / .2);}
.gb-available-mobile:hover .gb-filtermobile-image img{--tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));}
.gb-available-mobile:hover .gb-filtermobile-name{color: #629c49;}
.gb-available-mobile:nth-child(n+7) {
  display: block;
}
.gb-mobile-absolute{transition-duration: .5s;opacity: 0;--tw-gradient-to: transparent var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to);--tw-gradient-from: rgb(98 156 73 / 0) var(--tw-gradient-from-position);background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));top: 0;right: 0;bottom: 0;left: 0;position: absolute;}


.gb-filtermobile-container{z-index: 10;position: relative;}
.gb-filtermobile-innercontainer{display: flex;gap: 24px;width: 100%;}
.gb-filtermobile-image{transition-duration: .5s;border-radius: 12px;align-items: center;justify-content: center;flex-shrink: 0;width: 150px;height: 300px;display: flex;--tw-ring-color: rgb(17 24 39 / .05);--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);}
.gb-filtermobile-image img{transition-timing-function: cubic-bezier(0, 0, .2, 1);transition-duration: .7s;object-fit: contain;width: 100%;height: 100%;display: block;}

.gb-filtermobile-details{display: flex;flex-direction: column;flex: 1 1 0%;}
.gb-filtermobile-namehead{margin-bottom: 12px;}
.gb-filtermobile-name{    transition-duration: .3s;color: #111827;font-weight: 700;line-height: 24px;font-size: 20px;margin-bottom: 4px;}
.gb-filtermobile-releasedate{color: #6b7280;text-transform: uppercase;font-size: 10px;font-weight: 500;margin-bottom: 4px;}

.gb-filtermobile-other-dtls{flex: 1 1 0%;margin-bottom: 12px;list-style: disc !important;padding-left: 13px;}
.gb-filtermobile-other-dtls li{color: #374151;font-size: 14px;line-height: 20px;display: list-item;align-items: flex-start;list-style: disc !important;margin-bottom: 8px;}
.gb-filtermobile-other-dtls li:last-child{margin-bottom: 0px;}

.gb-filtermobile-lastrow{align-items: flex-end;display: flex;min-width: 150px;flex-direction: column;justify-content: space-between;gap: 8px; }
.gb-filtermobile-rating{background: #fffbeb;padding: 6px 12px;box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);border: 1px solid #fde68a80;border-radius: 9999px;white-space: nowrap;gap: 6px;align-items: center;display: flex;}
.filtermobile-star{color: #f59e0b;width: 14px;height: 14px;display: block;}
.rating-text{color: #374151;font-size: 14px;line-height: 20px;font-weight: 600;}
.gb-filtermobile-price{text-align: right;}
.price-text{color: #111827;font-size: 24px;line-height: 32px;font-weight: 700;letter-spacing: -0.6px;}
.onwards-text{color: #6b7280;font-weight: 500;font-size: 12px;line-height: 16px;margin-top: 2px;}
.gb-filtermobile-bottom-block {display: flex;align-items: center;justify-content: space-between;}
.compare-btn{transition-duration: .3s;color: #629c49;font-size: 14px;line-height: 20px;text-align: left;font-weight: 600;border: none;background: none;cursor: pointer;}
.compare-space-link{transition-duration: .3s;color: #629c49;font-size: 14px;line-height: 20px;text-align: left;font-weight: 600;position: relative;top: 18px;}
.compare-space-link:hover{text-decoration: underline;}

#viewMoreBtn{background: #629c49;font-size: 14px;line-height: 20px;width: auto;border: none;cursor: pointer; height: 44px;transition-duration: .2s;color: #fff;font-weight: 500;padding: 0px 24px;border-radius: 8px;}
.gb-available-moremobiles{margin-top: 40px;display: flex;justify-content: center;}
#viewMoreBtn:hover{opacity: .9;}

.gb-launching-desc p{font-size: 16px;line-height: 24px;margin-bottom: 24px;color: #374151;text-align: left;}
.types-of-phones{display: flex;flex-wrap: wrap;gap: 12px;border-bottom: 1px solid #e5e7eb;padding-bottom: 32px;}
.types-of-phone{padding: 8px 16px;    transition-duration: .2s;font-size: 14px;line-height: 20px;color: #374151;font-weight: 500;background: #fff;border: 1px solid #d1d5db;border-radius: 9999px;cursor: pointer;}
.types-of-phone:hover{color: #629c49;border: 1px solid #629c49;}

.faq-item {background: #ffffff;border-radius: 12px;margin-bottom: 15px;overflow: hidden;border: 1px solid #e5e7eb;}
.faq-question {padding: 20px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-weight: 600;font-size: 16px;line-height: 24px;color: #111827;}
.faq-question:hover{background: #f9fafb;}
.faq-answer {padding: 5px 20px 20px;font-size: 16px;line-height: 24px;color: #374151;display: none;}
.faq-item.active .faq-answer {display: block;}
.faq-icon {font-size: 16px;width: 20px;height: 20px;}
.faq-icon svg{color: #6b7280;}
.faq-item.active .faq-icon svg {transform: rotate(180deg);}


/*=====================leftside-filter-css================*/

.filter-sidebar {
  width: 227px;
  padding: 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.gb-filter-item {
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
    margin-top: 16px;
}

.gb-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  padding: 4px 0;
}

.gb-filter-content {
  display: none;
  /* padding: 8px 0; */
}

.gb-filter-item.active .gb-filter-content {
  display: block;margin-top: 8px;
}

.gb-filter-content label {
  display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0px;
    cursor: pointer;
    font-size: 12px;
    line-height: 16px;
    color: #374151;margin-top: 4px;
}
.gb-filter-content label:first-child{margin-top: 0px;}

.gb-filtr-more-options {
  display: none;
}

.filtr-show-more {
  color: #629c49;
    cursor: pointer;
    font-weight: 500;
    margin-top: 8px;
    font-size: 12px;
    line-height: 16px;
    transition-duration: .15s;
}

.slide-filtr-arrow {
  transition: transform 0.3s ease;
}

.gb-filter-item.active .slide-filtr-arrow {
  transform: rotate(90deg);
}
.gb-fliter-side-head{transition-duration: .15s;color: #111827;font-size: 14px;line-height: 20px;font-weight: 500;}
.slide-filtr-arrow{transition-duration: .2s;}
.slide-filtr-arrow svg{width: 16px;height: 16px;color: #6b7280;transition-duration: .2s;display: block;}
.gb-max-filter-height{max-height: 192px;overflow-y: auto;scrollbar-width: thin;
  scrollbar-color: #629c49 #f1f1f1;}
  .gb-max-filter-height::-webkit-scrollbar-track {
  background: #f1f1f1;   /* Track color */
  border-radius: 10px;
}

.gb-max-filter-height::-webkit-scrollbar-thumb {
  background: #629c49;   /* Scrollbar color */
  border-radius: 10px;
}
.gb-max-filter-height::-webkit-scrollbar {
  width: 8px;
}
.gb-filter-search-block{position: relative;}
.gb-filter-search-icon{color: #9ca3af;width: 14px;height: 14px;top: 30%;left: 10px;position: absolute;}
.gb-filter-search-input{font-size: 12px;line-height: 16px;padding-right: 8px;padding-left: 32px;border: 1px solid #d1d5db;border-radius: 4px;width: 100%;height: 36px;box-sizing: border-box;}
.gb-filter-search-input:focus {
  outline-color: #629c49; /* Color when the input is focused */
}
.gb-filter-sidebar-head{display: flex;align-items: center;justify-content: space-between;}
.filters-text{color: #111827;font-weight: 600;font-size: 16px;line-height: 24px;}
.resetall-btn{color: #629c49;background: none;border: none;font-size: 12px;line-height: 16px;font-weight: 500;cursor: pointer;}
/*.gb-mobile-filter-container{position: sticky;top: 16px;height: fit-content;}*/



.price-inputs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.input-box {
  flex: 1 1 0%;
    position: relative;
}

.input-box input {
  padding-right: 8px;padding-left: 24px;font-size: 12px;line-height: 16px;border: 1px solid #d1d5db;width: 100%;height: 36px;box-sizing: border-box;border-radius: 4px;
}
.gb-rupee-text{color: #6b7280;font-size: 12px;line-height: 16px;top: 30%;left: 10px;position: absolute;}
.range-wrapper {
    overflow: hidden;
    position: relative;
    padding: 24px;
    height: 30px;
    box-sizing: border-box;
}
.range-wrapper input[type="range"] {
   position: absolute;
    width: 100%;
    pointer-events: auto;
    -webkit-appearance: none;
    background: none;
    top: 13px;
    right: 0;
    box-sizing: border-box;
}
.range-wrapper input[type=range]::-webkit-slider-thumb {pointer-events: auto;-webkit-appearance: none;height: 20px;width: 20px;background: #5a8f3b;border-radius: 50%;cursor: pointer;}
.range-wrapper input[type=range]::-moz-range-thumb {height: 20px;width: 20px;background: #5a8f3b;border-radius: 50%;cursor: pointer;}

.gb-range-wrapper input[type="range"] {
   position: absolute;
  width: 100%;
  appearance: none;
  background: none;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
}

.gb-range-wrapper input::-webkit-slider-thumb {
  appearance: none;
  pointer-events: all;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #ffffff;          /* 👈 inner white */
  border: 3px solid #5c8c2a;    /* 👈 green border */
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

.price-options label {
  display: block;
  margin-bottom: 8px;
  cursor: pointer;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  background: #629c491a;
  padding: 2px 8px;
  border-radius: 4px;
  margin: 5px 5px 5px 0;font-size: 12px;line-height: 16px;
  color: #629c49;
}

.filter-tag button {
  background: none;
  border: none;
  margin-left: 8px;
  cursor: pointer;
  font-size: 12px;color: #629c49;
}
.price-inputs-block{display: none;}
.gb-range-wrapper{display: none;}
.gb-filter-wrapper.active .price-inputs-block{display: block;}
.gb-filter-wrapper.active .gb-range-wrapper{display: block;}
.gb-range-track {
    position: absolute;
    height: 4px;
    background: #5c8c2a;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
}
.gb-range-wrapper::before {
    content: "";
    position: absolute;
    height: 4px;
    width: 100%;
    background: #ddd;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;left: 0;
}
.gb-activate-filtr-text{color: #374151;font-weight: 600;font-size: 12px;line-height: 16px;margin-bottom: 8px;}



/*=====================Landing Page style================*/

.landing-title {font-size: 24px;font-weight: 700;color: #111827;line-height: 36px;margin-bottom: 12px;}
.launch-date{color: #4b5563;font-size: 14px;line-height: 20px;margin-bottom: 16px;}
.landing-para{font-size: 15px;line-height: 1.6;color: rgb(68, 68, 68);margin-bottom: 24px;}
.gb-landing-phone-container{display: flex;gap: 16px;}
.gb-landing-phone-flex{display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;width: 30%;}
.gb-landing-phone-flex img{height: auto;object-fit: contain;width: 100%;border-radius: 8px;width: 100%;display: block;aspect-ratio: 275 / 435;}
.gb-landing-phone-compare{text-align: left;width: 100%;margin-top: 12px;}
.gb-landing-phone-compare a{color: #2aa84a;font-size: 14px;line-height: 20px;}
.shadow-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.gb-landing-phone-moredtls{width: 70%;}
.gb-landing-phone-priceblock{display: flex;align-items: flex-start;justify-content: flex-start;gap: 8px;flex-direction: column;margin-bottom: 16px;}
.landing-phone-price{font-size: 28px;font-weight: bold;color: rgb(17, 24, 39);display: block;}
.gb-landing-phone-rating{display: flex;align-items: center;gap: 8px;flex-wrap: wrap;}
.phone-rating-star{font-size: 14px;color: #a16207;font-weight: 500;padding: 4px 12px;background: #fefce8;border-radius: 9999px;}
.ratenow-text{color: #4b5563;font-size: 14px;}
.ratenow-text:hover{color: #111827;}
.landing-phone-share-icon{display: flex;align-items: center;gap: 4px;position: relative;color: #4b5563;border: none;background: none;cursor: pointer;}
.landing-phone-share-icon:hover{color: #111827;}
.landing-phone-share-icon svg{width: 16px;height: 16px;display: block;}
.keyfeatures-text{font-size: 16px;font-weight: bold;color: rgb(17, 24, 39);margin-bottom: 12px;}
.keyfeatures-list{margin-bottom: 12px;list-style: disc !important;padding-left: 13px;}
.keyfeatures-list li{color: #374151;font-size: 16px;line-height: 24px;display: list-item;align-items: flex-start;list-style: disc !important;margin-bottom: 10px;}
.keyfeatures-list li::marker{color: #629c49;width: 10px;height: 10px;font-size: 19px;}

.landing-header__title{color: #111827;font-size: 24px;line-height: 32px;font-weight: 700;}
.gb-specification-col{margin-bottom: 24px;}
.spec-title{color: #111827;font-size: 18px;line-height: 28px;font-weight: 600;margin-bottom: 20px;}
.gb-spec-table-container{border: 1px solid #e5e7eb;border-radius: 8px;overflow: hidden;background: #fff;}
.gb-spec-table-container table{width: 100%;border-collapse: collapse;}
.gb-spec-table-container table tr{transition-duration: .15s;}
.gb-spec-table-container table tr td{width: 33.33%;vertical-align: top;padding: 16px;border: 1px solid #e5e7eb;}
.gb-spec-sml-txt{color: #6b7280;font-size: 12px;line-height: 16px;margin-bottom: 6px;}
.gb-spec-mid-txt{color: #111827;font-size: 14px;line-height: 20px;font-weight: 600;}
.gb-spec-table-container table tr:hover{background: #f9fafb;}
/*=====================RATING CARD================*/
.rating-card {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 24px;
margin-bottom: 40px;
}

.rating-header {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
height: 48px;
margin-bottom: 20px;
}

.rating-header h3 {
font-size: 18px;
font-weight: 700;
color: #111827;
margin: 0;
}

/* Stars */
.stars {
display: flex;
gap: 4px;
}

.star {
width: 20px;
height: 20px;
}

.star.filled {
fill: #629c49;
stroke: #629c49;
}

.star.empty {
fill: #d1d5db;
stroke: #d1d5db;
}

/* Description */
.rating-description {
font-size: 15px;
line-height: 1.6;
color: #374151;
margin-bottom: 24px;
}

/* Pros & Cons Grid */
.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 24px;
}

/* Pros Box */
.pros-box {
background: #ecfdf5;
padding: 16px;
border-radius: 10px;
}

.pros-box__heading{
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}

.pros-box__heading h4{
color: #065f46;
}

.pros-box__heading .thumb-up{
width: 20px;
height: 20px;
color: #065F46;
}

.pros-box ul {
margin: 0;
}

.pros-box li {
font-size: 14px;
line-height: 1.6;
color: #065f46;
margin-bottom: 8px;
display: flex;
gap:  6px;
}
.pros-box li .plus{
width: 16px;
height: 16px;
margin-top: 2px;
}

.pros-box li p{
flex: 1;
}

.pros-box li:last-child{
margin-bottom: 0px;
}

/* Cons Box */
.cons-box {
background: #fef2f2;
padding: 16px;
border-radius: 10px;
}

.cons-box__heading {
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}

.cons-box__heading h4 {
color: #7f1d1d;

}

.cons-box__heading .thumb-down{
width: 20px;
height: 20px;
color: #7f1d1d;
}

.cons-box ul {
/* padding-left: 18px; */
margin: 0;
}

.cons-box li {
font-size: 14px;
line-height: 1.6;
color: #7f1d1d;
margin-bottom: 8px;
display: flex;
/* align-items: center; */
gap: 6px;
}
.cons-box li p{
flex: 1;
}
.cons-box li .minus{
width: 16px;
height: 16px;
margin-top: 2px;
}

.cons-box li:last-child{
margin-bottom: 0px;
}

/*=====================E-Commerce-price================*/
.gb-pricevalue-container{display: flex;align-items: center;justify-content: space-between;gap: 40px;flex-direction: row;padding: 24px;border-radius: 16px;background: #fff;}
.gb-pricevalue-row{display: flex;align-items: center;gap: 10px;justify-content: flex-start;}
.gb-e-com-site{color: #111827;font-size: 16px;line-height: 24px;font-weight: 600;min-width: 80px;}
.gb-e-com-site-price{color: #111827;font-size: 16px;line-height: 24px;font-weight: 500;min-width: 90px;}
.buy-link{color: #fff;font-size: 14px;line-height: 20px;font-weight: 600;padding: 8px 14px;background: #111827;border-radius: 6px;white-space: nowrap;cursor: pointer;}
.buy-link:hover{background: #1f2937;}


/*=====================In-Depth Feature================*/

.gb-indepth-feature-container {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
}
.gb-indepth-feature-row{margin-bottom: 32px;}
.gb-indepth-feature-row:last-child{margin-bottom: 0px;}
.indepth-head{color: #111827;font-weight: 700;font-size: 20px;line-height: 28px;padding-bottom: 8px;border-bottom: 2px solid #e5e7eb;margin-bottom: 16px;}
.gb-indepth-feature-row p{color: #374151;line-height: 1.625;font-size: 16px;max-width: 900px;margin-bottom: 16px;}
.gb-indepth-feature-row p:last-child{margin-bottom: 0px;}

.gb-updates-container{
  background: #fff;
    padding: 40px;
    border-radius: 8px;
}

.latest-update-text{color: #1f2937;line-height: 1.625;font-size: 16px;margin-bottom: 8px;}
.update-date{color: #374151;font-weight: 500;font-size: 14px;line-height: 20px;text-align: right;}
.gb-latest-update {
    margin-bottom: 32px;
}
.gb-latest-update:last-child{margin-bottom: 0px;}


.gb-trents-container{padding: 32px;background: #f3f4f6;border-radius: 12px;}
.trents-desc{color: #374151;line-height: 1.625;font-size: 14px;margin-bottom: 20px;}
.gb-trends-tabs{display: flex;gap: 10px;margin-bottom: 20px;overflow-x: auto;padding-bottom: 8px;}
.gb-trends-tab{color: #1f2937;font-size: 12px;line-height: 16px;padding: 6px 12px;background: #d1d5db;border-radius: 6px;cursor: pointer;border: none;transition-duration: .15s;}
.gb-trends-tab.active{color: #fff;background: #111827;}
.gb-tab-contentgraph{width: 100%;}
.gb-tab-contentgraph img{width: 100%;display: block;}
.gb-tabcontent{display: none;}
.gb-tabcontent.active {
  display: block;
}

/*=====================JUMP TO MENU================*/

.jump-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #ffffff;
    border-radius: 10px;
    margin-bottom: 32px;margin-top: 32px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.jump-container {
    display: flex;
    align-items: center;
}
.jump-label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    padding: 12px 12px 12px 16px;
    white-space: nowrap;
    background: #ffffff;
    position: sticky;
    left: 0;
    z-index: 2;
}
.jump-scroll {
    flex: 1;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.jump-links {
    display: flex;
    align-items: center;
    padding: 12px 16px 12px 0;
    white-space: nowrap;
}
.jump-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.jump-item button {
    font-size: 14px;
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #4b5563;
    cursor: pointer;
    transition: all 0.3s ease;
}
.jump-item button:hover{color: #111827;}
.jump-item.active button {
    background: #eaf8ef;
    color: #2aa84a;
    font-weight: 700;
}
.separator {
    color: #d1d5db;
    margin: 0 6px;
}

/* share-button */
.share-container {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transform: translateX(0px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    position: absolute;
    top: -10px;
    right: -35px;background: #fff;
}
.share-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(10px);top: -10px;
}
.share-label {
    font-size: 14px;
    color: #6b7280;
    margin-right: 4px;
}
.share-icon-btn {
    padding: 8px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.icon {
    width: 20px;
    height: 20px;
    color: #4b5563;
    transition: stroke 0.3s ease;
}
.share-action.hide {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}
.share-wrapper{position: relative;}
.gb-readmore-text {
	-webkit-line-clamp: 5;
	max-height: 55px;
}
.ds-breadcrumb {
	font-size: 14px;
	color: #4b5563;
	line-height: 20px;
	display: flex;
	align-items: center;
	margin: 10px 16px 16px 0px;
}
.ds-breadcrumb a {
	color: #4b5563;
}
.ds-breadcrumb-arrow {
	margin: 0 8px;
	display: inline-block;
	background: url(https://images.gizbot.com/images/breadcrumb-arrow-1765189228597.svg) no-repeat 0 0;
	width: 6px;
	height: 10px;
}
.ds-breadcrumb span {
	display: inline-block;
}
.ds-breadcrumb-label {
	font-size: 14px;
	color: #111827;
	line-height: 20px;
	display: inline-block;
}

.fixed-left-ad, .fixed-right-ad {display: none;}
 @media only screen and (min-width: 1300px) {.fixed-left-ad, .fixed-right-ad {display: block;}}	
 
 .gb-filtermobile-image {
    width: 100px;
    height: 220px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.gb-filtermobile-image figure,
.gb-filtermobile-image picture {
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gb-filtermobile-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}