:root{
/*====================AD=================*/
--ad-primary-bg-color: #17202e;
--fb-border: #4b5563;
/*=========================BRAND COLOR=======================*/
--brand-color: #e84d67;

/*=========================BACKGROUND COLOR=======================*/
--primary-bg: #111827;
--sec-bg: #17202e;
--card-bg: #17202e;

/*=========================TEXT COLOR=======================*/

--text-heading: #FFFFFF;
--primary-text-color: #9CA3AF;
--sec-text-color: #d1d5db;
--white-color: #FFFFFF;


/*=========================MOVIE CARD RATING BOX=======================*/
--movie-card-rating-box-bg: #161920;
--movie-card-rating-box-border: #383c43;
--movie-card-rating-box-color: #FFFFFF;

/*=========================ACTIVE AND INACTIVE=======================*/
--active-bg: #e84d67;
--active-border: #e84d67;
--active-color: #FFFFFF;

--inactive-bg: #17202e;
--inactive-border: #4b5563;
--inactive-color: #9ca3af;

/*=========================SLIDER NAV BG=======================*/
--slider-nav-bg: #111827;
--slider-nav-border: #4b5563;
--slider-nav-color: #9ca3af;
}

body {font-family: -apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Inter,system-ui,sans-serif}

/*
 * Celebs Styles
 */
*, ::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: ;
}
.breadcrumbs {margin-bottom: 0;}

.celebs-published-datetime {--tw-text-opacity: 1;color: #9ca3af;font-size: .875rem;line-height: 1.25rem;margin-bottom: 12px;}

/*===========INTRO SECTION===========*/

.celebs-intro-section{margin-bottom: 32px;padding-bottom: 32px;position: relative;}
.celebs-intro-section:after {content: '';position: absolute;left: 0;right: 0;bottom: 0;margin: auto;background-image: linear-gradient(to right,transparent, #4b5563, transparent);height: 1px;}
.celebs-heading{font-size: 30px;  font-weight: 700; color: var(--text-heading);  margin-bottom: 8px; }
.celebs-container {font-size: 16px; line-height: 26px; color: #9CA3AF;margin-bottom: 16px;}
.read-more-btn{color: #60A5FA;font-size: 16px;font-weight: 500;background: none;border: none;cursor: pointer;transition: color 0.2s ease;}
.read-more-btn:hover {color: #93C5FD;}

.celebs-shareblock-wrapper {display: flex;align-items: center;margin-top: 1rem;margin-top: 1rem;}
.celebs-share-text {color: #9ca3af;font-weight: 500;font-size: 14px;line-height: 1.25rem;position: relative;top: -4px;}
.celebs-shareblock-wrapper a {color: #9ca3af;padding: .5rem;border-radius: .5rem;margin-left: 15px;}
.celebs-shareblock-wrapper a svg {display: block;}
.celebs-shareblock-wrapper a:hover {background-color: #17202e;}
.celebs-shareblock-wrapper a:hover .twitter {color: #60a5fa;}
.celebs-shareblock-wrapper a:hover .facebook {color: #2563eb;}
.celebs-shareblock-wrapper a:hover .instagram {color: #ec4899;}
.celebs-shareblock-wrapper a:hover .youtube {color: #ef4444;}
.celebs-shareblock-wrapper a:hover .sharei {color: #22c55e;}

.duration-300 {
  transition-duration: .3s;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

.celebs-main-wrapper {}
.celebs-nav-wrapper-outer {padding-top: 1.5rem;padding-bottom: 1.5rem;}
.celebs-nav-wrapper {display: flex;align-items: center;justify-content: space-between;gap: 1.5rem;margin-bottom: 1.5rem;}
.celebs-nav {display: flex;}
.celebs-nav button {padding-left: 1.5rem;padding-right: 1.5rem;padding-top: .75rem;padding-bottom: .75rem;font-weight: 500;color: #9ca3af;background-color: #17202e;border: 1px solid #374151;border-radius: .5rem;margin-right: 15px;cursor: pointer;font-size: 14px;}
.celebs-nav button.active, .celebs-nav button:hover.active {background-color: #e84d67;color: #fff;}
.celebs-nav button:hover {color: #fff;background-color: #1f2937;}
.celebs-search-wrap {position: relative;max-width: 28rem;flex: 1 1 0%;}
.celebs-search-textbox {padding-left: 2.5rem!important;padding-top: .75rem!important; padding-bottom: .75rem!important;padding-right: 1rem!important;color: #fff!important;background-color: #17202e!important;border: 1px solid #374151!important;border-radius: .5rem!important;width: calc(100% - 60px)!important;}
.celebs-search-wrap svg {color: #9ca3af;top: 13px;left: .75rem;position: absolute;}

.celebs-grid-listing-wrapper {}
.celebs-grid-listing {gap: 1.5rem;grid-template-columns: repeat(2,minmax(0,1fr));display: grid;}



.celebs-grid-content {transition-duration: .3s;transition-property: all;transition-timing-function: cubic-bezier(.4,0,.2,1);transition-duration: .15s;border: 1px solid #374151;border-radius: .5rem;overflow: hidden;cursor: pointer;height: 9rem;position: relative;}
.celebs-grid-content:hover {border: 1px solid #e84d67;background-color: #1f2937;opacity: 1;}
.celebs-grid-content-overlay {opacity: 0;border-radius: .5rem;border-width: 2px;--tw-border-opacity: 1;border-color: #e84d67;position: absolute;left: 0;right: 0;bottom: 0;right: 0;}


.celebs-grid-content-flex {display: flex;}

.celebs-grid-content-thumb {flex-shrink: 0;overflow: hidden;width: 7rem;position: relative;height: 9.2rem;}
.celebs-grid-content-thumb img {display: block;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;transition-duration: .3s;transition-property: all;transition-timing-function: cubic-bezier(.4,0,.2,1);transition-duration: .15s;}
.celebs-grid-content:hover .celebs-grid-content-thumb img {--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))}


.celebs-grid-content-details {padding: 1rem;display: flex;flex: 1 1 0%;flex-direction: column;justify-content: space-between;}

.celebs-grid-title {font-size: 16px;font-weight: 600;line-height: 1.25;color: #fff;margin-bottom: .5rem;}
.celebs-grid-title a {color: #fff;}

.celebs-grid-content:hover .celebs-grid-title a{color: #e84d67;}
.celebs-grid-ocp {font-size: 14px;color: #9ca3af;margin-bottom: 1rem;line-height: 1.25rem;}

.celebs-grid-morelinks {display: flex;justify-content: space-between;gap: 10px;}
.celebs-grid-morelinks a {color: #d1d5db;font-weight: 500;font-size: 14px;line-height: 1rem;padding-top: .5rem;padding-bottom: .5rem;padding-left: .75rem;padding-right: .75rem;border-radius: .375rem;border: 1px solid #4b5563;flex: 1 1 0%;text-align: center;}
.celebs-grid-morelinks a:hover {background-color: #e84d67;color: #fff;border: 1px solid #e84d67;}



.celebs-more-btnwrap {text-align: center;margin-top: 2rem;}
.celebs-loadmore {color: #fff;padding: 12px 24px;border-radius: 8px;font-size: 16px;font-weight: 500;border: 1px solid #e84d67;background: #e84d67;color: #FFFFFF;box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);transition: background-color 0.2s ease;text-align: center;cursor: pointer;}

.celebs-loadmore:hover {background: #e84d67e6;}
