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

/*================LIGHT THEME============*/
:root{
--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: #629c49;

--header-close: url(https://images.gizbot.com/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);
}



/*====================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: var(--primary-bg);
}



/*===========================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: 100%;
height: 140px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 56px;
}

/*=====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);
margin-bottom: 40px;
}

.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); 
}


/*===========================LAYOUT STYLE=====================*/
.wrapper-container{
padding: 0px 16px;
background: var(--primary-bg);
}


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

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

.section-header__title {
font-size: 24px; 
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: 12px;
font-weight: 500;
color: var(--section-header-link);
text-decoration: none;
transition: color 0.3s ease;white-space: nowrap;
}

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

.section-header__icon {
width: 14px;
height: 14px;
margin-left: 4px;
}

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


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


.text {max-height: 55px;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;}
.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;}
.arrow {transition: transform 0.3s ease;width: 16px;height: 16px;}
.arrow.rotate {transform: rotate(180deg);}
.text.expanded + .read-more .arrow {
transform: rotate(180deg);
}

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

.hero-news-card article {
border-radius: 12px; 
box-shadow: var(--card-shadow);
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__img-wrapper{
position: relative;
overflow: hidden;
width: 100%;
aspect-ratio: 16 / 9;
}

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

.hero-news-card .hero-news-card__text-content {
padding: 16px; 
}

.hero-news-card .hero-news-card__text-content h3 {
font-size: 18px; 
font-weight: 600;
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: 1fr;
gap: 32px; 
margin-bottom: 40px;
}

.news-card {
border-radius: 12px; 
box-shadow: var(--card-shadow);
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-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;
}


.news-content {
padding: 16px; 
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}

.news-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
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: 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;
backdrop-filter: blur(4px);
border: 0;
width: 100%;
height: 100%;
}

.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;
}

.rating-badge {
position: absolute;
top: 12px;
right: 12px;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(4px);
padding: 4px 8px;
border-radius: 12px;
}

.rating-text {
color: #ffffff;
font-size: 14px;
font-weight: 300;
}

.rating-sub {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
margin-left: 3px;
}

.review-content {
padding: 16px;
}

.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-container{
overflow: hidden;
} */

.reels-grid {
display: flex;
gap: 32px; 
overflow-x: auto; 
scroll-snap-type: x mandatory; 
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 10px;
scroll-behavior: smooth;
}

.reels-grid::-webkit-scrollbar {
display: none;
}

/* .reels-grid a {
width: 100%;
flex: 0 0 auto;
} */

.reels-card {
background: var(--card-bg);
border: 1px solid var(--card-border);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--card-shadow);
border: 0;
width: 200px;
    flex: 0 0 auto;
height: auto;
scroll-snap-align: start;
  scroll-snap-stop: always; /* ensures precise snap */
}

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

.reels-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
}

.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 {
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: 30px; 
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;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 10px;
}

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

.videos-dots-wrapper {
display: flex;
justify-content: center;
margin-top: 30px; 
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; */
display: flex;
gap: 32px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
padding-bottom: 10px;
}

.latest-card{
/* width: 100%;
flex: 0 0 338px;
height: 100%;
*/
border-radius: 10px;
box-shadow: 0px 4px 6px -1px #0000001A;
background: #FFFFFF;
overflow: hidden;
cursor: pointer;
transition: all 0.5s ease;
width: 100%;flex: 0 0 auto;
height: auto;
border: 0;    
scroll-snap-align: start;
}

.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;
}


/* Dots container */
.latest-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 30px;
}

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

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

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

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

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

.right-sec-header__title{
    font-size: 24px;
    font-weight: 600;
color: #111827;
}

.right-sec-header__subtitle{
font-size: 14px;
    font-weight: 300;
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);
}


/*===========================Video page style=====================*/

.videos-section{
    margin-bottom: 40px;
}

.video-page-card{
   display: grid;
grid-template-columns: 1fr; 
gap: 32px; 
/* margin-bottom: 32px; */
}


.yt-video-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%;
}

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

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

.yt-video-image-wrapper{
width: 100%;
aspect-ratio: 16 / 9;
}

.yt-video-image-wrapper img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease-out;
}


.yt-play-btn-wrapper{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.yt-play-btn{
    background: transparent;
    border: none;
    outline: none;
    width: 68px;
    height: 48px;
}


.inner-ad-block{
    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);
}


*, :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-common-container{margin: 40px 0px;}
.mobile-finder-container{margin-top: 0px !important;}
/* calculator-style */
.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;margin-bottom: 32px;}
.price-top {display: flex;align-items: flex-start;gap: 12px;padding: 14px 16px;flex-direction: column;}
.price-label {font-weight: 400;color: #4b5563;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: 100%;box-sizing: border-box;}
.to-text {font-size: 13px;font-weight: 400;color: #6b7280;}
.find-btn {width: 100%;box-sizing: border-box;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;}
.range-wrapper {overflow: hidden;position: relative;padding: 24px;height: 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: none;-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;}
#minRange{padding-left: 15px;}
#maxRange{padding-right: 15px;}
.price-box-dtls-container{margin-top: 32px;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: 16px;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;width: 180px;}
.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));}

@keyframes slideUp{
    0% {
    opacity: 0;
    transform: translateY(20px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}


/* Latest Popular Features */
.gb-popular-features-section{display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 16px;}
.gb-features-block{display: flex;gap: 8px;align-items: center;flex-direction: column;width: 100%;
    flex: 0 0 70px;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;
}






/*===========FILTER BAR==========*/
.filter-bar {display: flex;gap: 12px;flex-direction: column;align-items: flex-start;}
.search-box-wrapper{position: relative;flex: 1 1 0%;width: 100%;}
.search-box{border-radius: 8px;border: 1px solid #d1d5db;background: var(--search-bar-bg) ;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-color: var(--search-bar-hover); }
.search-box:focus {border-color: var(--search-bar-focus);}
.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;width: 100%;}
.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: 100%;display: flex;align-items: center;justify-content: space-between;transition: all 0.3s ease-out;}
.filter-button:hover {border-color: var(--filter-button-hover);}
.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: 100%;
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: var(--filter-arrow);}



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

.filter-option:hover {
color: var(--filter-option-hover-color);
background: var(--filter-option-hover-bg);
transform: scale(1.01);
}

.filter-hover-line {
position: absolute;
bottom: 0;
left: 24px;
right: 24px;
height: 1px;
background: var(--filter-hover-line);
width: 0;
transition: width 0.7s ease-out;
}

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

.filter-option.active {
/* background: #dc262640; */
/* color: #DC2626; */
/* border-left: 2px solid #DC2626; */
background: var(--filter-option-active);
color: var(--filter-option);
border-left: 2px solid var(--filter-option);
}

.filter-sidebar input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}
.filter-sidebar input[type="checkbox"]:checked {
    background: #629c49;
    border-color: #629c49;
}
.filter-sidebar input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Latest News */
.latest-news-section{display: grid;grid-template-columns: repeat(1, 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: 16px;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;}
.latest-news-sublist{}
.latest-news-sublist ul li{margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #E2E5E9;
    position: relative;
}
.latest-news-sublist-thumb{float: left;width: 100px;}
.latest-news-sublist-thumb img{border-radius: 5px;
    max-width: 100%;
    height: auto;width: 100%;
    aspect-ratio: 16 / 9;
}
.latest-news-sublist-desc{margin-left: 110px;}
.latest-news-sublist {
    margin-top: 24px;
}
.latest-news-sublist-desc a{color: #1f2937;text-decoration: none;}
.latest-news-sublist-desc a p{color: #1f2937;    overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 15px;line-height: 22px;}
/* 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 140px;}
.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-all-brands-grid{display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;margin: 20px 0;}
.gb-all-brands-grid .gb-brand-block{flex: initial;width: 100%;}
.gb-all-brands-grid .gb-brand-logo{padding: 10px;}
.gb-all-brands-grid .gb-mob-name{padding: 8px 4px;}
.gb-all-brands-grid .gb-mob-name p{font-size: 12px;line-height: 16px;}
.gb-all-brands-grid .brand-logo-thumbnail{height: 30px;}
.gb-no-results{grid-column: 1 / -1;text-align: center;color: #7a7a9a;padding: 30px 0;}
.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;overflow-x: auto;scroll-snap-type: x mandatory;scrollbar-width: none;-ms-overflow-style: none;padding-bottom: 15px;}
.gb-common-slider-inner {position: relative;margin-bottom: 10px;overflow: hidden;}
/* 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-slider-dots {display: flex;justify-content: center;margin-top: 17px;gap: 8px;}

.slider-dots.active {background-color: #629c49;width: 24px;}
.slider-dots {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 Brands */
.gb-popular-brand-block {background: #fff;border: 1px solid #e5e7eb;border-radius: 12px;overflow: hidden;transition: transform .3s ease, box-shadow .3s ease;width: 100%;flex: 0 0 180px;}
.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;}


/* 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;align-items: center;overflow-x: auto;scrollbar-width: none;}
.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;white-space: nowrap;}
.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: -88px;right: 0;}


/* 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;}
.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: 24px;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;}
.landing-phone-share-icon{display: flex;align-items: center;gap: 4px;position: relative;color: #4b5563;border: none;background: none;}
.landing-phone-share-icon svg{width: 16px;height: 16px;display: block;}
.keyfeatures-text{font-size: 12px;font-weight: bold;color: rgb(17, 24, 39);margin-bottom: 12px;}
.keyfeatures-list{margin-bottom: 12px;list-style: disc !important;padding-left: 13px;margin-bottom: 0px;}
.keyfeatures-list li{color: #374151;font-size: 12px;display: list-item;align-items: flex-start;list-style: disc !important;margin-bottom: 6px;}
.keyfeatures-list li:last-child{margin-bottom: 0px;}

/* jump-menu */
.section-wrapper{position: relative;}
.jump-nav {
    background: #fff;
    border-radius: 10px;
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.jump-nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
}
.jump-container {
    display: flex;
    align-items: center;
        overflow: visible;
}
.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 {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.jump-scroll::-webkit-scrollbar {
  display: 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.active button {
    background: #eaf8ef;
    color: #2aa84a;
    font-weight: 700;
}
.separator {
    color: #d1d5db;
    margin: 0 6px;
}


.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-block{padding: 16px;border-bottom: 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: flex;
    gap: 24px;
    flex-direction: column;
}

/* 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;
    gap: 16px;
    flex-direction: column;padding: 16px;
    background: #fff;
    border-radius: 16px;}
.gb-pricevalue-row{display: flex;align-items: center;gap: 12px;justify-content: space-between;padding-bottom: 16px;border-bottom: 1px solid #d1d5db;}
.gb-pricevalue-row:last-child{border-bottom: 0px;padding-bottom: 0px;}
.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;}



/* .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;
}


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

.gb-indepth-feature-container {
    padding: 16px;
    background: #fff;
    border-radius: 16px;
}
.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;}

.update-text{color: #6b7280;font-size: 14px;line-height: 20px;margin-top: 8px;}
.section-top__header{margin-bottom: 24px;}
.latest-update-text{color: #1f2937;line-height: 1.625;font-size: 16px;margin-bottom: 8px;}
.gb-updates-container{
  background: #fff;
    padding: 16px;
    border-radius: 16px;
}
.update-date{color: #374151;font-weight: 500;font-size: 14px;line-height: 20px;text-align: right;}


/* Filter-page-style */
.gb-available-mobile-filter-container {
    margin-bottom: 24px;
}
.gb-available-mobile-filter-head {
    margin-bottom: 16px;
}
.available-phones {
    color: #111827;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
}
.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:nth-child(n+7) {
    display: block;
}
.gb-filtermobile-container {
    z-index: 10;
    position: relative;
}
.gb-filtermobile-innercontainer {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.gb-filtermobile-image-outer{
	flex-shrink: 0;
    width: 25%;}
.gb-filtermobile-image {
    
    transition-duration: .5s;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 4;
    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-lastrow {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gb-filtermobile-rating {
    background: #fffbeb;
    padding: 4px 10px;
    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;
    width: -moz-fit-content;
    width: fit-content;margin-bottom: 5px;
}
.filtermobile-star {
    color: #f59e0b;
    width: 14px;
    height: 14px;
    display: block;
}
.rating-text {
    color: #374151;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}
.gb-filtermobile-price {
    
}
.price-text {
    color: #111827;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.025em;
}
.gb-filtermobile-releasedate {
    color: #6b7280;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 4px;
}
.onwards-text {
    color: #6b7280;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    margin-top: 2px;
}
.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-bottom-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e5e7ebcc;
    padding-top: 12px;
}
.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;
    font-weight: 600;
}
.gb-filtermobile-name {
    transition-duration: .3s;
    color: #111827;
    font-weight: 700;
    line-height: 1.25;
    font-size: 16px;
    margin-bottom: 4px;
}
.gb-available-moremobiles {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
#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;
    width: 100%;
}


.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: 16px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;font-weight: 600;font-size: 14px;line-height: 20px;color: #111827;}
.faq-question:hover{background: #f9fafb;}
.faq-answer {padding: 5px 16px 16px;font-size: 14px;line-height: 1.625;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);}



.gb-filter-widget{width: 100%;}
/* Floating Sort / Filter bar — .fixed is added on scroll (mobiles-latest); stays under the popups' shadow (z-index 40) */
.gb-filter-widget.fixed{position: fixed;top: 0;left: 0;right: 0;z-index: 30;background: #fff;padding: 8px 16px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}
.gb-filter-widget.fixed .gb-filter-grid{margin-bottom: 0;}
.gb-filter-grid{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));margin-bottom: 16px;overflow: hidden;border-radius: 8px;border: 1px solid #d1d5db;background: #ffffff;}
.filter-btns{padding: 14px 16px;;gap: 8px;display: flex;justify-content: center;align-items: center;cursor: pointer;border: none;background: none;}
.sort-filter-btn {border-right: 1px solid #d1d5db;}
.filter-btns svg{width: 20px;height: 20px;color: #374151;display: block;}
.sort-filter, .filter-rt{color: #111827;font-weight: 500;font-size: 14px;line-height: 20px;}


/* popup-sory-by */
.gb-filter-shadow{transition-duration: .15s;background: #0006;z-index: 40;top: 0;right: 0;bottom: 0;left: 0;position: fixed;}
.gb-sortby-block{animation: slideUp .6s ease-out;background: #fff;border-top-left-radius: 16px;
    border-top-right-radius: 16px;overflow-y: auto;max-height: 533px;z-index: 50;right: 0;left: 0;bottom: 0;position: fixed;--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-sortby-head{padding: 16px 20px;background: #fff;border-bottom: 1px solid #e5e7eb;display: flex;justify-content: space-between;align-items: center;top: 0;position: sticky;}
.sortby-text{color: #111827;font-weight: 600;font-size: 18px;line-height: 28px;}
.sortby-btn-close{padding: 8px;border-radius: 8px;cursor: pointer;border: none;background: none;}
.sortby-btn-close svg{width: 20px;height: 20px;color: #4b5563;display: block;}
.gb-sortby-inner-container{padding: 20px;}
.gb-sortby-list{color:#111827;background: #f9fafb;margin-bottom: 8px;text-align: left;padding: 12px 16px;width: 100%;border-radius: 8px;cursor: pointer;border: none;}
.gb-sortby-list.active{background: #629c49;color: #ffffff;}
.gb-sortby-list:last-child{margin-bottom: 0px;}



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

.gb-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  padding: 4px 0;
}
.gb-fliter-side-head {
    transition-duration: .15s;
    color: #111827;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.gb-filter-item.active .slide-filtr-arrow {
    transform: rotate(90deg);
}
.slide-filtr-arrow {
    transition-duration: .2s;
        transition: transform 0.3s ease;
}
.slide-filtr-arrow svg {
    width: 16px;
    height: 16px;
    color: #6b7280;
    transition-duration: .2s;
    display: block;
}
.gb-filter-wrapper.active .price-inputs-block {
    display: block;
}
.gb-filter-content label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0px;
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    color: #374151;margin-top: 4px;
}
.gb-filter-content label:first-child{margin-top: 0px;}
.price-inputs-block {
    display: none;
}
.price-inputs {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.input-box {
    flex: 1 1 0%;
    position: relative;
}
.gb-rupee-text {
    color: #6b7280;
    font-size: 12px;
    line-height: 16px;
    top: 30%;
    left: 10px;
    position: absolute;
}
.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-range-wrapper {
    position: relative;
    padding-top: 8px;
    padding-bottom: 30px;
    box-sizing: border-box;
}
.gb-range-wrapper {
    display: none;
}
.gb-filter-wrapper.active .gb-range-wrapper {
    display: block;
}
.gb-range-wrapper::before {
    content: "";
    position: absolute;
    height: 4px;
    width: 100%;
    background: #ddd;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
    left: 0;
}
.gb-range-track {
    position: absolute;
    height: 4px;
    background: #5c8c2a;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 5px;
}
.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);
}
.gb-filter-item.active .gb-filter-content {
  display: block;margin-top: 8px;
}

.gb-filter-content {
    display: none;
    /* padding: 8px 0; */
}
.gb-filter-content label:first-child {
    margin-top: 0px;
}
.price-options label {
    display: block;
    margin-bottom: 8px;
    cursor: pointer;
}
.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-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-content {
  display: none;
  /* padding: 8px 0; */
}
.gb-filter-item.active .gb-filter-content {
    display: block;
    margin-top: 8px;
}
.filtr-show-more {
    color: #629c49;
    cursor: pointer;
    font-weight: 500;
    margin-top: 8px;
    font-size: 14px;
    line-height: 16px;
    transition-duration: .15s;
}
.gb-filtr-more-options {
    display: none;
}
.gb-max-filter-height {
    max-height: 192px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #629c49 #f1f1f1;
}
.gb-filter-filters-block {
    position: fixed;
    z-index: 50;
    background: #fff;
    overflow-y: auto;
    max-width: 384px;
    width: 85%;
    left: 0;
    top: 0;
    bottom: 0;
}
.gb-filters-head{display: flex;padding: 16px;background: #fff;border-bottom: 1px solid #e5e7eb;justify-content: space-between;align-items: center;top: 0;position: sticky;z-index: 111;}
.filters-text{color: #111827;font-weight: 600;font-size: 18px;line-height: 28px;}
.filters-resetall-btn{display: flex;align-items: center;gap: 12px;}
.resetall-btn{color: #629c49;background: none;border: none;font-size: 12px;line-height: 16px;font-weight: 500;cursor: pointer;}
.reser-text{color: #629c49;font-size: 14px;line-height: 20px;font-weight: 500;cursor: pointer;background: none;border: none;}
.reset-close-btn{padding: 8px;border-radius: 8px;background: none;border: none;cursor: pointer;}
.reset-close-btn svg{color: #374151;width: 20px;height: 20px;display: block;}
.gb-filters-container {
    padding: 16px;
}



/* Hide by default */
.gb-sort-filter-container,
.gb-filter-filters-container {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

/* Show when active */
.gb-sort-filter-container.active,
.gb-filter-filters-container.active {
  display: block;
}

/* Background shadow */
.gb-filter-shadow {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

/* Popup block animation */
.gb-sortby-block,
.gb-filter-filters-block {
  /* position: absolute;
  bottom: 0;
  left: 0; */
  /* width: 100%; */
  max-height: 100%;
  background: #fff;
  /* border-radius: 20px 20px 0 0; */
  overflow-y: auto;
  transform: translateY(100%);
  transition: 0.3s ease;
}

/* Slide up when active */
.gb-sort-filter-container.active .gb-sortby-block,
.gb-filter-filters-container.active .gb-filter-filters-block {
  transform: translateY(0);
}

.gb-apply-filters-btn{padding: 16px;background: #fff;border-top: 1px solid #e5e7eb;position: sticky;bottom: 0;margin-bottom: 20px;}
.apply-filters-btn{background: #629c49;font-size: 16px;line-height: 24px;width: 100%;border-radius: 8px;font-weight: 500;color: #fff;height: 48px;cursor: pointer;border: none;}



/* 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: -5px;
    right: -17px;background: #fff;
}
.share-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(10px);top: -5px;
}
.share-label {
    font-size: 14px;
    color: #6b7280;
    margin-right: 4px;
}
.share-icon-btn {
    padding: 5px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.icon {
    width: 15px;
    height: 15px;
    color: #4b5563;
    transition: stroke 0.3s ease;
}
.share-action.hide {
    opacity: 0;
    transform: translateX(-10px);
    pointer-events: none;
}
.share-wrapper{position: relative;}



.gb-activate-filtr-text {
    color: #374151;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 8px;
}
.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;
}

.text {
	max-height: 55px;
	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;
}

.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;
}

.arrow {
	transition: transform 0.3s ease;
	width: 16px;
	height: 16px;
}

.arrow.rotate {
	transform: rotate(180deg);
}

.text.expanded+.read-more .arrow {
	transform: rotate(180deg);
}
.ds-breadcrumb {
    font-size: 14px;
    line-height: 20px;
    color: #4B5563;
    margin: 0 16px 16px 0;display: block;
}

.ds-breadcrumb a,
.ds-breadcrumb span {
    display: inline;
    color: #4B5563;
}

.ds-breadcrumb a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0px;
    margin-left:2px;
    vertical-align: middle;
    background: url(https://images.gizbot.com/images/breadcrumb-arrow-1765189228597.svg) no-repeat right;
}

.ds-breadcrumb-label {
    color: #111827;
}

/* =====================================================================
gz-rightinclude.css
Common "right include" block. Find Mobiles / Latest Phones / UpComing
Phones. Block is 100% width so it works both as a desktop right-rail
include and as a full-width mobile section.
Latest & UpComing share the same card styles (.gz-phone-*).
===================================================================== */

.gz-common-include-wrapper{
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
}
.gz-common-include-wrapper *,
.gz-common-include-wrapper *::before,
.gz-common-include-wrapper *::after{
    box-sizing: border-box;
}

/* spacing between the three stacked sections */
.gz-common-include-wrapper > section{ display: block; }
.gz-common-include-wrapper > section:not(:last-child){ margin-bottom: 32px; }

/* ---- section title (sits ABOVE the white card, same for all three) ---- */
.gz-section-title{
    margin: 0 0 16px;
    color: #111827;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
}
.gz-include-head {margin-bottom: 24px;}
.gz-include-title {color:#111827;text-align: left;}

/* ---- shared white card shell (same for all three sections) ---- */
.gz-include-card{
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}                
/* =====================================================================
LATEST + UPCOMING shared phone-card list
===================================================================== */
.gz-common-upcoming-mobile-section{width:100%;}
.gz-phone-list{ display: block; }

.gz-phone-card{
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    text-decoration: none;
    transition: border-color .2s ease;
}
.gz-phone-card:last-child{ margin-bottom: 0; }
.gz-phone-card:hover{ border-color: #629C49; }

.gz-phone-image{
    width: 56px;
    height: 60px;
    flex-shrink: 0;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gz-phone-image img{
    max-width: 44px;
    max-height: 54px;
    object-fit: contain;
    display: block;
}

.gz-phone-content{ min-width: 0; flex: 1; }
.gz-phone-name{
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 20px;
    color: #1F2937;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}
.gz-phone-price{
    display: block;
    font-size: 14px;
    line-height: 20px;
    color: #16A34A;
    font-weight: 400;
    text-align: left;
}