/* --- Global & Body --- */
body {
font-family: 'Jost', sans-serif;
padding-top: 120px; /* Prevents content from being hidden by the new floating navbar */
}
/* --- SECTION-SPECIFIC PADDING FIXES --- */
/* This rule is for pawns.html and similar review pages */
#content4-1n, #content4-12, #content4-1e, #content4-15, .content4.cid-uYQvDFOZiK, #content4-featurepoints {
padding-top: 3rem !important;
}
/* contact.html */
#contacts1-j { padding-top: 3rem; }
/* about.html -- ADDED */
#about-us-content { padding-top: 3rem; }
/* guides.html (old) */
#tabs1-t { padding-top: 3rem; }
/* surveys.html */
#features11-1j { padding-top: 3rem !important; }
/* article pages */
.article-container { padding-top: 3rem; }
/* new landing pages */
.page-container { padding-top: 3rem; }
/* FIX: Explicitly set the Parallax Background Image for the "Join Our Community" section */
.cid-uYYl9ZrkJ8 {
background-image: url("../images/mbr-1920x1280.webp");
background-position: center center; /* Ensure the image is centered */
background-size: cover; /* Ensure it covers the whole area */
}
/* --- MODERN FLOATING NAVBAR (COMMON) --- */
.modern-navbar {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 95%;
max-width: 1140px;
z-index: 1030;
border-radius: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
padding: 0.5rem 1rem;
transition: top 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.modern-navbar .navbar-brand {
display: flex;
align-items: center;
text-decoration: none;
}
.modern-navbar .navbar-brand .logo-img {
height: 3rem;
width: auto;
margin-right: 0.75rem;
}
.modern-navbar .navbar-brand .navbar-caption {
color: #000;
font-weight: 500;
}
.modern-navbar .nav-link {
color: #333 !important;
font-weight: 500;
position: relative;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin: 0 0.5rem;
transition: color 0.3s ease;
}
.modern-navbar .nav-link:hover {
color: #0ebdf3 !important;
}
.modern-navbar .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
height: 2px;
background-color: #0ebdf3;
transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.modern-navbar .nav-link:hover::after, .modern-navbar .nav-item.show .nav-link::after {
width: 80%;
}
.modern-navbar .btn-primary {
background-color: #0ebdf3 !important;
border-color: #0ebdf3 !important;
border-radius: 50px;
transition: all 0.3s ease;
}
.modern-navbar .btn-primary:hover {
background-color: #000 !important;
border-color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(14, 189, 243, 0.4);
}
.navbar-toggler {
border: none;
display: flex;
align-items: center;
}
.navbar-toggler:focus {
box-shadow: none;
}
/* --- ADDED: STYLES TO DRAW THE HAMBURGER ICON --- */
.hamburger {
width: 30px; /* Set a width for the icon */
height: 24px; /* Set a height for the icon */
position: relative; /* Needed for positioning the spans */
display: inline-block;
}
.hamburger span {
display: block;
position: absolute;
height: 4px; /* Height of each line */
width: 100%;
background: #0ebdf3; /* CHANGED: Was #333 */
border-radius: 4px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out;
}
/* Position each line */
.hamburger span:nth-child(1) {
top: 0px;
}
.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
top: 10px; /* Middle line */
}
.hamburger span:nth-child(4) {
top: 20px; /* Bottom line */
}
/* Animation for when it's OPEN (the 'X') */
.navbar-toggler:not(.collapsed) .hamburger span:nth-child(1) {
top: 10px;
transform: rotate(135deg);
}
.navbar-toggler:not(.collapsed) .hamburger span:nth-child(2),
.navbar-toggler:not(.collapsed) .hamburger span:nth-child(3) {
opacity: 0; /* Hide middle line */
left: -30px;
}
.navbar-toggler:not(.collapsed) .hamburger span:nth-child(4) {
top: 10px;
transform: rotate(-135deg);
}
/* --- END OF HAMBURGER STYLES --- */
/* ADDED: This will hide the arrow on all pages */
.mobile-arrow {
display: none !important;
}
/* --- NAVBAR DROPDOWN STYLES --- */
.modern-navbar .dropdown-menu {
border-radius: 15px;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 0.5rem 0;
margin-top: 10px;
}
.modern-navbar .dropdown-item {
font-weight: 500;
padding: 0.75rem 1.5rem;
color: #333 !important;
transition: all 0.2s ease-in-out;
}
.modern-navbar .dropdown-item:hover {
background-color: #0ebdf3;
color: #fff !important;
padding-left: 2rem;
}
.modern-navbar .nav-item.dropdown .nav-link::after,
.modern-navbar .nav-item.dropdown:hover .nav-link::after,
.modern-navbar .nav-item.dropdown.show .nav-link::after {
width: 0% !important;
content: "" !important;
background-color: transparent !important;
}
.modern-navbar .dropdown-toggle::after {
display: none !important;
}
.modern-navbar .nav-item.dropdown.show .nav-link {
color: #333 !important;
}
@media (max-width: 991.98px) {
.modern-navbar {
border-radius: 20px;
padding: 0.5rem;
cursor: pointer;
}
.modern-navbar .navbar-collapse {
background-color: rgba(255, 255, 255, 0.95);
border-radius: 15px;
margin-top: 10px;
padding: 10px;
}
/* ADDED: This makes the toggler button's minimum height
equal to the logo's height (3rem).
Since the toggler already has 'align-items: center',
this will vertically center the hamburger icon inside it.
*/
.navbar-toggler {
min-height: 4rem; /* YOUR FIX: Changed from 3rem to 4rem */
}
/* ADDED: This will hide the arrow on all pages */
.mobile-arrow {
display: none !important;
}
.modern-navbar .dropdown-menu {
background-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
margin-top: 0;
padding-left: 1rem;
}
.modern-navbar .dropdown-item:hover {
padding-left: 1.5rem;
}
}
/* --- ARTICLE & REVIEW PAGE STYLES --- */
.article-header {
text-align: center;
margin-bottom: 2rem;
}
.article-title {
font-size: 2.8rem;
/* font-weight: 700; */ /* REMOVED to match fix for other bold titles */
margin-bottom: 1rem;
}
.article-meta {
font-size: 1rem;
color: #6c757d;
margin-bottom: 2rem;
}
.article-body h2, .article-body h3 {
font-weight: 600;
margin-top: 3rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid #0ebdf3;
padding-bottom: 0.5rem;
}
.article-body h2 {
font-size: 2rem;
}
.article-body h3 {
font-size: 1.7rem;
}
.article-body p, .article-body li {
font-size: 1.2rem;
line-height: 1.8;
color: #343a40;
}
.key-details-box {
background-color: #f8f9fa;
border: 1px solid #dee2e6;
border-left: 5px solid #0ebdf3;
border-radius: 8px;
padding: 2rem;
margin-bottom: 3rem;
}
.key-details-box h3 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
border-bottom: none;
}
.detail-item {
display: flex;
align-items: center;
margin-bottom: 1rem;
font-size: 1.2rem;
}
.detail-item strong {
width: 140px; /* Fixed width for alignment */
flex-shrink: 0;
}
.stars-large {
font-size: 1.5rem;
color: #ffc107;
}
.custom-blockquote {
border-left: 4px solid #0ebdf3;
padding-left: 1.5rem;
margin: 2rem 0;
font-size: 1.4rem;
font-style: italic;
color: #495057;
}
.pro-tip-box, .pro-tip {
background-color: #e7fcfd;
border: 1px solid #a6f2fa;
border-left: 5px solid #0ebdf3;
border-radius: 8px;
padding: 2rem;
margin: 2rem 0;
}
.pro-tip-box h4 {
font-weight: 600;
color: #0b93a0;
}
.final-cta {
background-color: #f8f9fa;
border-radius: 8px;
padding: 2rem;
text-align: center;
margin-top: 3rem;
}
.article-image-feature {
margin-bottom: 2rem;
text-align: center;
}
.article-image-feature img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.article-body-image {
margin: 2rem 0;
text-align: center;
}
.article-body-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* --- MODERN FOOTER STYLES (COMMON) --- */
.modern-footer {
background: linear-gradient(to top, #000000, #111111);
color: #f8f9fa;
padding: 4rem 0 2rem 0;
}
.footer-brand .logo-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: 600;
color: #ffffff;
text-decoration: none;
margin-bottom: 1rem;
}
.footer-brand img {
height: 40px;
width: auto;
}
.footer-brand p {
color: #adb5bd;
font-size: 1rem;
line-height: 1.6;
}
.footer-links h5 {
font-size: 1.0rem; /* REDUCED from 1.1rem */
font-weight: 600;
margin-bottom: 1rem;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
font-size: 1.0rem; /* ADDED to reduce link size */
color: #adb5bd;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #0ebdf3;
}
.footer-social-icons {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.footer-social-icons a {
font-size: 1.5rem;
}
.footer-copyright {
border-top: 1px solid #343a40;
padding-top: 2rem;
margin-top: 2rem;
text-align: center;
color: #6c757d;
font-size: 0.9rem;
}
/* --- ADDED FOR MOBILE CENTERING --- */
@media (max-width: 767.98px) {
.modern-footer .footer-brand {
text-align: center;
}
.modern-footer .footer-brand .logo-title {
justify-content: center; /* Center the logo/title flex container */
}
.modern-footer .footer-links {
text-align: center;
/* RE-ACTIVATED: Force 50% width for all link columns to create 2x2 grid */
flex: 0 0 auto !important;
width: 50% !important;
}
.modern-footer .footer-links ul {
padding-left: 0; /* Remove default list padding */
}
.modern-footer .footer-social-icons {
justify-content: center; /* Center the social icons flex container */
}
}
/* --- BUTTON STYLES (COMMON) --- */
.btn-white {
color: #000;
background-color: #fff;
border-color: #fff;
}
.btn-primary {
color: #fff;
background-color: #1a75ff;
border-color: #1a75ff;
}
.btn-primary:hover, .btn-white:hover {
background-color: #000 !important;
border-color: #000 !important;
color: #fff !important;
}
.btn-outline-secondary:hover {
background-color: #000000;
color: #ffffff;
border-color: #000000;
}
.page-footer-cta .btn-primary {
background-color: #0ebdf3 !important;
border-color: #0ebdf3 !important;
color: #ffffff !important;
transition: all 0.3s ease;
}
.page-footer-cta .btn-primary:hover {
background-color: #000000 !important;
border-color: #ffffff !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
}
/* --- NEW EMOTIONS SLIDER CSS (INDEX.HTML) --- */
/* Base structure */
.emotions-slider-section {
font-family: 'Inter', sans-serif !important;
/* ADDED: This is the dark gray background from insights-header-card */
background-color: #1b1b1b;
/* ADDED: Add padding to match the original section */
padding-top: 3rem;
padding-bottom: 5rem;
}
/* Force Inter font on all children */
.emotions-slider-section * {
font-family: 'Inter', sans-serif !important;
}
.emotions-slider-section .base-template__title {
/* Gradient Title */
background: linear-gradient(100deg, #fff, #999);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
font-size: 3rem;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 1rem;
}
.emotions-slider-section .base-template__text {
text-align: center;
font-size: 1.25rem;
color: #f0f0f0; /* Light gray text */
margin-bottom: 4rem; /* 60px -> 4rem */
letter-spacing: 0.5px;
}
/* --- NEW: Override for Offers Page Background --- */
/* This new rule targets *only* the section on offers.html */
/* You can change this color without affecting the homepage */
.emotions-slider-section.offers-page-section {
background-color: #fff; /* <-- NEW COLOR FOR OFFERS PAGE */
}
/* --- NEW: Style for the "Rated Providers" / "Other" titles --- */
/* CHANGED: color from #f5f5f5 (white) to #000000 (black) to be visible on white BG */
.emotions-slider-section.offers-page-section .display-5 {
color: #000000 !important;
font-weight: 600 !important;
}
/* Poppins font for author name */
:root {
--font-poppins: "Poppins", sans-serif;
}
.emotions-slider {
--color-gray: #818181;
--color-gray-dark: #1e1e1e;
padding-inline: 98px;
position: relative;
pointer-events: none; /* Add this to prevent accidental interaction with the whole carousel div */
}
.emotions-slider * {
pointer-events: auto; /* Re-enable pointer events for elements inside */
}
.emotions-slider__slide {
display: flex;
align-items: center;
min-height: 550px;
}
@media screen and (max-width: 767.9px) {
.emotions-slider {
padding: 0;
margin-inline: -20px;
}
}
/* Slider Navigation */
.slider-nav {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
position: absolute;
top: 50%;
left: 0;
translate: 0 -50%;
z-index: 1;
}
.slider-nav__item {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1;
width: 48px;
cursor: pointer;
transition: all 0.3s ease-out;
color: #ffffff; /* FORCE WHITE ARROWS */
}
.slider-nav__item.disabled {
cursor: default;
opacity: 0.5;
}
.slider-nav__item path {
stroke: currentColor;
}
@media (hover: hover) and (pointer: fine) {
.slider-nav__item:not(.disabled):hover {
color: var(--color-blue);
}
}
@media (hover: none) {
.slider-nav__item:not(.disabled):active {
color: var(--color-blue);
}
}
@media screen and (max-width: 767.9px) {
.slider-nav {
display: none;
}
}
/* Slider Pagination */
.slider-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 8px;
padding-top: 40px;
}
.swiper-pagination-lock {
display: none !important;
}
.slider-pagination__item {
width: 8px;
height: 8px;
border-radius: 99px;
background: #fff;
transition: all 0.3s ease-out;
opacity: 0.2;
}
.slider-pagination__item.active {
width: 30px;
opacity: 1;
}
/* Slider Item */
.swiper-slide {
width: auto;
height: auto;
}
@keyframes btn-arrow-move {
0% {
translate: 0;
}
100% {
translate: 100% -100%;
}
}
.emotions-slider-item {
--border-radius: 10px;
width: calc(100dvw - 60px);
max-width: 400px;
background: var(--color-gray-dark);
border-radius: var(--border-radius);
position: relative;
overflow: hidden;
/* --- THIS IS THE FIX --- */
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.emotions-slider-item__image {
aspect-ratio: 400 / 270;
overflow: hidden;
}
.emotions-slider-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.emotions-slider-item__content {
display: flex;
flex-direction: column;
gap: 30px;
padding: 30px 20px;
}
.emotions-slider-item__header,
.emotions-slider-item__footer {
max-height: 50px;
overflow: hidden;
transition: max-height 0.6s ease-in;
}
.emotions-slider-item__header-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.emotions-slider-item__price {
font-weight: 600;
font-size: 18px; /* 22px */
line-height: calc(24 / 22);
color: #e0e0e0; /* LIGHT GRAY RATING TEXT */
}
/* BLUE STARS */
.emotions-slider-item__price .stars {
color: #0ebdf3; /* Bright blue for stars */
font-size: 1.2rem;
vertical-align: middle;
}
.emotions-slider-item__price .star-empty {
color: #555; /* Darker gray for empty stars */
}
.emotions-slider-item__author {
display: flex;
align-items: center;
gap: 4px;
}
.emotions-slider-item__author-image {
flex-shrink: 0;
aspect-ratio: 1;
width: 20px;
border-radius: 100%;
overflow: hidden;
}
.emotions-slider-item__author-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.emotions-slider-item__author-name {
font-family: var(--font-poppins);
font-size: 14px;
line-height: calc(20 / 14);
color: var(--color-gray);
}
.emotions-slider-item__title {
font-weight: 600;
font-size: 24px; /* 20px */
line-height: 1.2;
margin-bottom: 8px;
color: #f5f5f5; /* VERY LIGHT GRAY TITLE */
}
.emotions-slider-item__text {
font-weight: 300;
font-size: 16px;
line-height: 1.5;
opacity: 0.7;
color: #e0e0e0; /* LIGHT GRAY DESCRIPTION */
}
.emotions-slider-item__btn {
display: flex;
align-items: center;
gap: 4px;
font-weight: 500;
font-size: 18px;
color: #fff;
text-decoration: none;
}
.emotions-slider-item__btn-icon {
flex-shrink: 0;
display: block;
aspect-ratio: 1;
width: 24px;
position: relative;
overflow: hidden;
}
.emotions-slider-item__btn-icon::before,
.emotions-slider-item__btn-icon::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: url("https://bato-web-agency.github.io/bato-shared/img/slider-1/icon-btn-arrow.svg")
center center no-repeat;
background-size: 100%;
}
.emotions-slider-item__btn-icon::after {
position: absolute;
top: 100%;
right: 100%;
}
.emotions-slider__slide:not(.swiper-slide-active) .emotions-slider-item__header,
.emotions-slider__slide:not(.swiper-slide-active)
.emotions-slider-item__footer {
max-height: 0;
}
@media (hover: hover) and (pointer: fine) {
.emotions-slider-item__btn:hover .emotions-slider-item__btn-icon::before,
.emotions-slider-item__btn:hover .emotions-slider-item__btn-icon::after {
animation: btn-arrow-move 0.4s ease forwards;
}
}
@media (hover: none) {
.emotions-slider-item__btn:active .emotions-slider-item__btn-icon::before,
.emotions-slider-item__btn:active .emotions-slider-item__btn-icon::after {
animation: btn-arrow-move 0.4s ease forwards;
}
}
/* SUPER BUTTON (INDEX.HTML) */
.super-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 14px 28px;
background: linear-gradient(145deg, #0f0f0f, #1c1c1c);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 100px;
color: #fff;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
overflow: hidden;
transition: all 0.4s ease-in-out;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
backdrop-filter: blur(8px);
z-index: 1;
text-decoration: none; /* Add this */
}
.super-button:hover {
color: #fff; /* Add this */
text-decoration: none; /* Add this */
}
.super-button::before {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, #00ffff, #ff00ff, #00ffff);
animation: rotate 4s linear infinite;
z-index: -2;
}
.super-button::after {
content: "";
position: absolute;
inset: 2px;
background: #0a0a0a;
border-radius: inherit;
z-index: -1;
}
.super-button:hover {
transform: scale(1.05);
box-shadow: 0 0 40px rgba(0, 255, 255, 0.2);
}
.super-button:hover .arrow {
transform: translateX(6px);
}
.arrow {
width: 22px;
height: 22px;
transition: transform 0.3s ease-in-out;
color: #00ffff;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* --- "JOIN COMMUNITY" PARALLAX STYLES (INDEX.HTML) --- */
#info1-1l .mbr-section-title {
/* Add text shadow for readability */
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
#info1-1l .btn-info {
/* White button, black text, light gray border */
background-color: #ffffff;
color: #000000;
border: 2px solid #E0E0E0; /* Light gray border */
transition: all 0.3s ease;
font-weight: 600;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
#info1-1l .btn-info:hover {
/* Black button, white text, black border */
background-color: #000000;
color: #ffffff;
border-color: #000000;
box-shadow: 0 6px 20px rgba(0,0,0,0.2);
transform: translateY(-2px);
}
/* --- NEW "SITE HUB" SECTION (INDEX.HTML) --- */
.site-hub-section {
padding: 5rem 0;
background-color: #ffffff; /* White section */
}
.site-hub-card {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
}
.site-hub-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.site-hub-icon {
font-size: 3.5rem;
color: #0ebdf3;
background-color: #f0f9ff;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.site-hub-card h3 {
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 1rem;
}
.site-hub-card p {
font-size: 1.1rem;
color: #555;
flex-grow: 1; /* Makes cards equal height */
margin-bottom: 1.5rem;
}
.site-hub-card .btn {
margin-top: auto; /* Pushes button to bottom */
}
/* --- GUIDES & NEW LANDING PAGES STYLES --- */
.page-container {
padding-bottom: 4rem;
}
.page-footer-cta {
background-color: #f8f9fa;
padding: 4rem 0;
border-top: 1px solid #e9ecef;
}
.page-footer-cta .mbr-section-title {
/* REMOVED font-weight: 700; to fix bold titles */
}
.page-footer-cta .mbr-section-subtitle {
font-size: 1.4rem;
color: #6c757d;
}
.page-container .mbr-section-head .mbr-section-title {
/* REMOVED font-weight: 700; to fix bold titles */
}
.page-container .mbr-section-head .mbr-section-subtitle {
font-size: 1.4rem;
color: #6c757d;
}
.article-card {
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
margin-bottom: 1.5rem;
background-color: #fff;
transition: box-shadow 0.3s ease, transform 0.3s ease;
display: flex;
flex-direction: column;
height: auto;
}
.article-card:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.article-image {
overflow: hidden;
}
@media (min-width: 768px) {
.article-card {
flex-direction: row;
min-height: 250px;
}
.article-image {
flex-basis: 35%;
flex-shrink: 0;
border-radius: 12px 0 0 12px;
}
.article-image a, .article-image img {
height: 100%;
width: 100%;
}
.article-image img {
height: 100%;
width: 100%;
object-fit: cover;
transition: transform 0.4s ease;
border: 8px solid white !important;
border-radius: 12px 0 0 12px !important;
}
.article-card:hover .article-image img {
transform: scale(1.05);
}
}
@media (max-width: 767px) {
.article-image {
height: 200px;
width: 100%;
border-radius: 12px 12px 0 0;
}
.article-image img {
height: 100%;
width: 100%;
object-fit: cover;
border: 8px solid white !important;
border-radius: 12px 12px 0 0 !important;
}
}
.article-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
align-items: flex-start;
}
.article-content .article-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
text-align: left !important;
}
.article-title a {
color: #000;
transition: color 0.3s ease;
}
.article-title a:hover {
color: #0ebdf3 !important;
text-decoration: none;
}
.article-meta {
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 1rem;
}
.article-excerpt {
font-size: 1.1rem;
color: #333;
margin-bottom: 1rem;
flex-grow: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.article-button-wrapper {
text-align: left !important;
margin-top: 1rem;
display: block !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.review-card {
display: flex;
align-items: center;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
background-color: #fff;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.review-card:hover {
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.review-logo {
flex-shrink: 0;
margin-right: 1.5rem;
}
.review-logo img {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 8px;
border: 1px solid #eee;
}
.review-content {
flex-grow: 1;
}
.review-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
text-align: left !important;
}
.review-stars {
font-size: 1.2rem;
margin-bottom: 0.75rem;
}
.review-stars .stars-filled {
color: #ffc107;
}
.review-stars .stars-empty {
color: #e0e0e0;
}
.review-summary {
font-size: 1.2rem;
color: #333;
margin-bottom: 1rem;
}
.article-card .btn-outline-primary,
.review-card .btn-outline-primary {
border-color: #eeeeee;
color: #000000;
background-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.article-card .btn-outline-primary:hover,
.review-card .btn-outline-primary:hover {
background-color: #000000;
color: #ffffff;
border-color: #000000;
}
.review-content .btn-outline-primary {
margin-left: 0;
}
.gs-timeline {
position: relative;
padding-left: 50px;
}
.gs-timeline::before {
content: '';
position: absolute;
left: 14px;
top: 15px;
bottom: 15px;
width: 2px;
background-color: #e9ecef;
}
.gs-step {
position: relative;
margin-bottom: 4rem;
}
.gs-step:last-child {
margin-bottom: 0;
}
.gs-icon {
position: absolute;
left: -50px;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #0ebdf3;
color: white;
}
.gs-icon svg {
width: 16px;
height: 16px;
}
.gs-content h4 {
font-weight: 600;
font-size: 1.4rem;
text-align: left !important;
}
.gs-content p {
font-size: 1.2rem;
color: #343a40;
}
.gs-image-wrapper {
padding: 1rem;
background-color: #f8f9fa;
border-radius: 8px;
}
.tips-accordion .accordion-item {
border: 1px solid #dee2e6;
border-radius: 8px !important;
margin-bottom: 1rem;
overflow: hidden;
}
.tips-accordion .accordion-header {
margin-bottom: 0;
}
.tips-accordion .accordion-button {
font-size: 1.3rem;
font-weight: 600;
color: #212529;
background-color: #f8f9fa;
border-radius: 0;
box-shadow: none;
}
.tips-accordion .accordion-button:not(.collapsed) {
background-color: #0ebdf3;
color: white;
}
.tips-accordion .accordion-button::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.tips-accordion .accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708 .708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: rotate(-180deg);
}
/* --- SURVEYS.HTML PLATFORM CARD STYLES --- */
.platform-card {
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
background-color: #fff;
transition: box-shadow 0.3s ease, transform 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
}
.platform-card:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.platform-header {
padding: 1.5rem 1.5rem 1rem;
text-align: center;
border-bottom: 1px solid #eee;
}
.platform-logo {
width: 80px;
height: 80px;
object-fit: contain;
border-radius: 12px;
margin-bottom: 1rem;
background-color: #fff;
padding: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.platform-title {
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.platform-rating {
font-size: 1.2rem;
color: #ffc107;
margin-bottom: 0;
}
.platform-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.platform-description {
font-size: 1.1rem;
color: #333;
flex-grow: 1;
margin-bottom: 1.5rem;
}
.platform-buttons {
margin-top: auto;
}
.platform-buttons .btn-register {
background-color: #0ebdf3 !important;
border-color: #0ebdf3 !important;
}
.platform-buttons .btn-register:hover {
background-color: #000 !important;
border-color: #000 !important;
}
.platform-card.c-red .platform-header { background-color: #fff5f5; }
.platform-card.c-purple .platform-header { background-color: #faf5ff; }
.platform-card.c-green .platform-header { background-color: #f0fff4; }
.platform-card.c-blue .platform-header { background-color: #f0f9ff; }
.platform-card.c-gray .platform-header { background-color: #f8f9fa; }
.platform-card.c-turqiouse .platform-header { background-color: #f5FFFE; }
/* --- FINAL TYPOGRAPHY/ALIGNMENT FIXES FOR BROKEN PAGES --- */
.mbr-text.mbr-fonts-style.display-7 ul,
.mbr-text.mbr-fonts-style.display-7 ol {
margin-left: 1.5em;
padding-left: 0;
}
.mbr-text.mbr-fonts-style.display-7 li {
text-align: left !important;
margin-bottom: 0.5rem;
}
.page-container .article-header .article-meta {
text-align: center !important; /* YOUR FIX: Changed from left to center */
}
body.theme-body-typo {
font-family: 'Jost', sans-serif !important;
font-size: 1.125rem !important;
line-height: 1.7 !important;
}
/* --- HELP CENTER STYLES --- */
.help-center-header {
border-top: 1px solid #dee2e6; /* Added this top border */
}
.help-center-search .form-control {
padding-left: 4rem;
}
.help-center-search .search-icon {.
left: 1.5rem;
}
/* --- LEGAL PAGE STYLES (TOS, PRIVACY) --- */
.legal-content-container {
padding-top: 4rem;
padding-bottom: 4rem;
}
.legal-content h1 {
font-size: 2.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.legal-content .last-updated {
font-size: 1rem;
color: #6c757d;
margin-bottom: 2rem;
display: block;
}
.legal-content h2 {
font-size: 2rem;
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid #0ebdf3;
padding-bottom: 0.5rem;
}
.legal-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
}
.legal-content p, .legal-content li {
font-size: 1.1rem;
line-height: 1.8;
color: #343a40;
margin-bottom: 1rem;
}
.legal-content ul {
padding-left: 2rem;
}
/* --- ULTIMATE FIX FOR ABOUT.HTML HEADER IMAGE RESPONSIVENESS AND SIZING --- */
/* --- NEW: LATEST INSIGHTS (HOMEPAGE ARTICLES) SECTION --- */
.home-article-card {
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
background-color: #fff;
transition: box-shadow 0.3s ease, transform 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.home-article-card:hover {
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
transform: translateY(-5px);
}
.home-article-image {
height: 200px;
width: 100%;
overflow: hidden;
}
.home-article-image img {
height: 100%;
width: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.home-article-card:hover .home-article-image img {
transform: scale(1.05);
}
.home-article-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.home-article-content .article-category {
font-size: 0.75rem;
font-weight: 700;
color: #0ebdf3;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.home-article-content .article-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.home-article-content .article-title a {
color: #000;
text-decoration: none;
transition: color 0.3s ease;
}
.home-article-content .article-title a:hover {
color: #0ebdf3;
}
.home-article-content .article-excerpt {
font-size: 1rem;
color: #555;
margin-bottom: 1.5rem;
flex-grow: 1;
line-height: 1.6;
}
.home-article-content .btn-outline-primary {
border-color: #eeeeee;
color: #000000;
background-color: transparent;
transition: all 0.3s ease;
margin-top: auto; /* Pushes button to bottom */
}
.home-article-content .btn-outline-primary:hover {
background-color: #000000;
color: #ffffff;
border-color: #000000;
}
/* --- NEW: TOP-FADE GRADIENT BACKGROUND --- */
/* 1. Set the section's solid background color */
.latest-articles-section {
position: relative;
overflow: hidden; /* Good to keep */
background-color: #1b1b1b; /* Your preferred dark gray */
}
/* 2. Add the black-to-transparent gradient overlay */
.latest-articles-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px; /* Controls the height of the fade */
background: linear-gradient(to bottom, #000000 0%, transparent 100%);
z-index: 1; /* Sits on top of the bg, but behind the content */
}
/* 3. Make the content (title, cards) sit on top */
.latest-articles-section .container {
position: relative;
z-index: 2; /* Sits on top of the ::before overlay */
}
/* 4. Fix text colors for the dark background */
.latest-articles-section .mbr-section-title {
color: #0ebdf3 !important; /* Your brand blue */
}
.latest-articles-section .mbr-section-subtitle {
color: #f0f0f0 !important; /* Light gray */
}
/* --- NEW: PREMIUM HEADER CARD FOR INSIGHTS --- */
.insights-header-card {
background-color: #1b1b1b;
padding: 2.5rem;
border-radius: 12px;
border-top: 4px solid #0ebdf3; /* Site blue accent */
border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* White accent */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
z-index: 3; /* Ensure it's on top of the gradient */
position: relative; /* Needed for z-index to work */
}
/* --- NEW: SEPARATE HEADER CARD FOR OFFERS.HTML --- */
/* This is where you edit the "Recommended Offers" header */
.offers-page-header {
background-color: #1d2d3d; /* <-- EDIT THIS BACKGROUND COLOR */
padding: 2.5rem;
border-radius: 12px;
border-top: 4px solid #0ebdf3; /* Site blue accent */
border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* White accent */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
z-index: 3;
position: relative;
}
/* This controls the title text "Recommended Offers" */
.offers-page-header .mbr-section-title {
color: #0ebdf3; /* <-- EDIT THIS TITLE COLOR */
font-size: 2.2rem;
font-weight: 600;
letter-spacing: -1px;
}
/* This controls the description text */
.offers-page-header .mbr-section-subtitle {
color: #f0f0f0; /* <-- EDIT THIS DESCRIPTION COLOR */
margin-top: 1rem;
font-size: 1rem;
}
/* --- HOMEPAGE SECTION SEPARATORS --- */
/* 1. Shadow for section directly under the navbar */
.section-under-nav-shadow {
position: relative;
z-index: 5; /* Ensures it's "on top" of the section below */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 2. Featured (Black) -> Latest Insights (Dark Gray) */
#emotions-slider-section {
position: relative;
/* YOUR FIX: Removed border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}
/* 3. Latest Insights (Dark Gray) -> Parallax */
#latest-insights {
position: relative;
/* Another thin, light border to separate from the parallax */
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* 4. Parallax -> Site Hub (Light Gray) */
#info1-1l {
position: relative;
z-index: 4; /* Sits on top of the section below */
/* This creates a soft shadow ONTO the light gray section below */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* 5. Site Hub (Light Gray) -> Footer (Black) */
.site-hub-section-home {
position: relative;
z-index: 4; /* YOUR FIX: Added z-index */
/* YOUR FIX: Replaced border-bottom with the correct shadow */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.about-philosophy {
background-image: url('assets/images/aboutusphilosophy.png');
/* Optional: Add other background properties for better control */
background-repeat: no-repeat; /* Prevents image repetition */
background-size: cover; /* Scales image to cover the element */
background-position: center; /* Centers the image */
}
/* --- ABOUT.HTML PAGE STYLES --- */
.hub-card {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 2.5rem 2rem;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
transition: all 0.3s ease;
background-color: #fff;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.hub-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.hub-icon {
font-size: 3.5rem;
color: #0ebdf3;
background-color: #f0f9ff;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.hub-card h3 {
font-size: 1.75rem;
font-weight: 600;
margin-bottom: 1rem;
}
.hub-card p {
font-size: 1.1rem;
color: #555;
flex-grow: 1; /* Makes cards equal height */
margin-bottom: 1.5rem;
line-height: 1.7;
}
/* Style for the placeholder images in CTA */
.cta-placeholder-img {
width: 100%;
height: 200px; /* Reverted to 200px */
object-fit: cover;
border-radius: 8px;
margin-bottom: 1.5rem;
}
/* --- CONTACT.HTML PAGE STYLES --- */
:root {
--brand-blue: #0ebdf3; /* Your site's primary blue color */
--brand-blue-dark: #0a8fb5;
--text-dark: #212529;
--text-light: #6c757d;
--bg-light-gray: #f8f9fa;
--border-color: #dee2e6;
}
/* Fix for navbar padding */
#contact-modern {
padding-top: 3rem;
}
.contact-section-modern {
background-color: var(--bg-light-gray);
padding: 4rem 0;
}
.contact-form-wrapper {
background: #ffffff;
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid var(--border-color);
border-top: 5px solid var(--brand-blue); /* <-- YOUR REQUESTED BORDER */
}
/* Modern Form Styles */
.form-floating label {
color: var(--text-light);
}
.form-control:focus, .form-select:focus {
border-color: var(--brand-blue);
box-shadow: 0 0 0 0.25rem rgba(14, 189, 243, 0.25);
}
.form-control, .form-select {
min-height: 3.6rem; /* Taller inputs */
padding-top: 1.5rem;
}
.form-floating > .form-select {
padding-top: 1.5rem; /* Fix for select padding */
}
.form-floating > textarea.form-control {
min-height: 150px !important;
}
.btn-contact-submit {
background-color: var(--brand-blue) !important;
border-color: var(--brand-blue) !important;
color: #ffffff !important;
font-weight: 600;
padding: 0.8rem 1.5rem;
font-size: 1.1rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.btn-contact-submit:hover {
background-color: var(--brand-blue-dark) !important;
border-color: var(--brand-blue-dark) !important;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(14, 189, 243, 0.4);
}
/* NEW: Stacked info boxes for other contact methods */
.info-box-stacked {
background: #ffffff;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid var(--border-color);
text-align: center;
height: 100%; /* For equal height columns */
}
.info-box-stacked .contact-icon {
font-size: 2rem; /* Bigger icon */
color: var(--brand-blue);
margin-bottom: 1rem;
}
.info-box-stacked h5 {
font-weight: 600;
font-size: 1.25rem;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.info-box-stacked p {
font-size: 1rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.info-box-stacked a {
font-weight: 600;
}
/* --- HELP-CENTER.HTML PAGE STYLES --- */
.help-center-header {
/* This is the gray section you wanted the border on */
}
.help-center-search {
position: relative;
}
.help-center-search .search-icon {
position: absolute;
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
color: #aaa;
}
.help-center-search .form-control {
padding: 1rem 1.5rem 1rem 4rem; /* Increased padding-left for icon */
font-size: 1.2rem;
border-radius: 50px;
border: 1px solid #dee2e6;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.help-resource-card {
display: flex;
flex-direction: column;
height: 100%;
background-color: #fff;
border-radius: 12px;
border: 1px solid #e0e0e0;
transition: all 0.3s ease;
overflow: hidden;
text-decoration: none;
color: #333;
}
.help-resource-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
color: #333;
}
.help-resource-card-icon {
font-size: 3rem;
color: #0ebdf3;
background-color: #f0f9ff;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.help-resource-card .card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.help-resource-card .card-title {
font-weight: 600;
font-size: 1.5rem;
}
.help-resource-card .card-text {
color: #555;
font-size: 1.1rem;
flex-grow: 1;
}
.help-resource-card .card-link {
font-weight: 600;
color: #0ebdf3;
text-decoration: none;
margin-top: 1rem;
}
.help-resource-card .card-link::after {
content: ' →';
transition: transform 0.2s ease;
display: inline-block;
}
.help-resource-card:hover .card-link::after {
transform: translateX(4px);
}
.faq-item {
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
margin-bottom: 1rem;
overflow: hidden;
}
.faq-question {
font-size: 1.2rem;
font-weight: 600;
padding: 1.25rem 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
position: relative; /* For mobile centering */
}
.faq-question::after {
content: '+';
font-size: 1.8rem;
color: #0ebdf3;
transition: transform 0.2s ease;
flex-shrink: 0; /* Prevent plus from shrinking */
margin-left: 1rem; /* Add space */
}
.faq-answer {
padding: 0 1.5rem;
font-size: 1.1rem;
color: #333;
max-height: 0;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.faq-item.active .faq-answer {
max-height: 500px; /* arbitrary high value */
padding-bottom: 1.5rem;
}
.faq-item.active .faq-question::after {
transform: rotate(45deg);
}
/* Hide item when filtered */
.filterable-item.d-none {
display: none !important;
}
/* --- MOBILE FAQ CENTERING FIX --- */
@media (max-width: 767.98px) {
.faq-question {
/* Center the text horizontally */
justify-content: center;
text-align: center;
/* Force wrap by adding padding on the right, before the + sign */
padding-right: 40px;
}
.faq-question::after {
/* Pin the plus sign to the right side, centered vertically */
position: absolute;
right: 1.5rem; /* 1.5rem is the container's padding */
top: 50%;
transform: translateY(-50%);
margin-left: 0; /* No longer needed */
}
.faq-item.active .faq-question::after {
/* Rotate it in its new position */
transform: translateY(-50%) rotate(45deg);
}
}
/* --- LEGAL-PAGES.HTML STYLES --- */
.legal-content-container {
padding-top: 3rem; /* Changed from 4rem to 3rem */
padding-bottom: 4rem;
}
.legal-content h2 {
font-size: 2rem;
font-weight: 600;
margin-top: 2.5rem;
margin-bottom: 1.5rem;
border-bottom: 2px solid #0ebdf3;
padding-bottom: 0.5rem;
}
.legal-content h3 {
font-size: 1.5rem;
font-weight: 600;
margin-top: 2rem;
margin-bottom: 1rem;
}
.legal-content p, .legal-content li {
font-size: 1.1rem;
line-height: 1.8;
color: #343a40;
margin-bottom: 1rem;
}
.legal-content ul {
padding-left: 2rem;
}
/* Added article-meta style to match other pages */
.legal-content .article-meta {
font-size: 1rem;
color: #6c757d;
margin-bottom: 2rem;
}
/* ---
--- HEADER 14 (Index Page) FIXES ---
---
*/
/* FIX 1: PADDING
This overrides the theme's 8rem padding
and replaces it with 1.5rem. The body padding of 120px
already accounts for the navbar.
*/
#header14-1j.cid-sFzz5E692j {
padding-top: 1.5rem !important;
padding-bottom: 3rem !important;
}
/* FIX 2: COLUMN ALIGNMENT (THE FINAL FIX)
This tells the flex container (.row) to vertically
center all of its direct children (the columns).
This rule is highly specific to win any CSS conflicts.
*/
section#header14-1j .row {
align-items: center !important;
}
/* 3. Style the image inside its wrapper (responsive) */
#header14-1j .image-wrapper img {
/* Mobile Fix: Ensure image scales down */
width: 100% !important;
max-width: 100% !important;
height: auto !important;
/* Aesthetic styles (from your inline HTML) */
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* 4. Enforce correct desktop image size */
@media (min-width: 768px) {
#header14-1j .image-wrapper img {
/* Desktop Fix: Enforce the required max width */
max-width: 620px !important;
/* Ensure it is centered within its column */
margin-left: auto !important;
margin-right: auto !important;
}
/* --- Cookie Consent Banner (FINAL-CLEAN-INSTALL) --- */
#cookie-consent-banner {
display: none; /* Hidden by default */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #ffffff;
padding: 1.5rem 2rem;
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
z-index: 1040;
/* Flex properties (desktop default) */
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
/* --- Mobirise Cookie Banner Style Overrides --- */
/* 1. Set the background to light gray and add a top border */
#cookiesdirective {
background-color: #f8f9fa !important; /* Light gray */
border-top: 1px solid #dee2e6 !important;
/* Force text to be black */
color: #000000 !important;
}
/* 2. Force the text paragraph to be black */
#cookiesdirective .alert-message {
color: #000000 !important;
}
/* 3. Force the link to be your site blue */
#cookiesdirective .alert-message a {
color: #0ebdf3 !important;
}
/* 4. Add a transition to the button */
#cookiesdirective .btn-primary {
transition: all 0.3s ease !important;
}
/* 5. Add the navbar-style hover effect (like the "Surveys" button) */
#cookiesdirective .btn-primary:hover {
background-color: #000000 !important;
border-color: #000000 !important;
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(14, 189, 243, 0.4);
}
}
/* ==========================================================================
NEW STYLES FOR OFFERS.HTML CARDS (to match homepage)
==========================================================================
*/
.new-offer-cards .platform-card {
background: #1e1e1e; /* Dark background from emotions-slider-item */
border: 1px solid #E5E5E5; /* Faint border for definition */
border-top: 3px solid #e5e5e5;
border-radius: 10px; /* Rounded corners from emotions-slider-item */
height: 100%; /* Ensure all cards are same height in a row */
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
overflow: hidden; /* Ensure rounded corners are respected */
}
.new-offer-cards .platform-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(14, 189, 243, 0.1); /* Blue glow */
border-color: #0ebdf3; /* Blue border on hover */
}
/* Override the ugly light-colored headers */
.new-offer-cards .platform-header {
/* REMOVED background-color: #F7F7F7;
The brand-specific colors below will now apply.
*/
/* This is the separator line. */
border-bottom: 1px solid #E5E5E5;
padding: 1.5rem;
text-align: center;
text-decoration-color: aqua;
}
/* --- ADDED: Brand-specific header colors --- */
.new-offer-cards .platform-card.c-red .platform-header { background-color: #fff5f5; }
.new-offer-cards .platform-card.c-purple .platform-header { background-color: #faf5ff; }
.new-offer-cards .platform-card.c-green .platform-header { background-color: #f0fff4; }
.new-offer-cards .platform-card.c-blue .platform-header { background-color: #f0f9ff; }
.new-offer-cards .platform-card.c-gray .platform-header { background-color: #f8f9fa; }
.new-offer-cards .platform-card.c-turqiouse .platform-header { background-color: #f5FFFE; }
.new-offer-cards .platform-logo {
width: 70px;
height: 70px;
border: 1px solid #E5E5E5;
border-radius: 10px; /* Match card */
background-color: #fff; /* Keep logo bg white for visibility */
box-shadow: none;
padding: 4px;
margin-bottom: 0.75rem;
object-fit: contain;
/* --- FIX: Add these 3 lines to center the image --- */
display: block;
margin-left: auto;
margin-right: auto;
}
.new-offer-cards .platform-title {
color: #000; /* Light gray title */
font-size: 1.5rem; /* Match emotions-slider-item__title */
font-weight: 600;
margin-top: 0.75rem;
margin-bottom: 0.25rem;
}
.new-offer-cards .platform-rating {
color: #0ebdf3; /* Site blue for stars */
font-size: 1.1rem;
font-weight: 600;
}
/* Handle the "UNRATED" text */
.new-offer-cards .platform-rating[style*="color: #6c757d;"] {
color: #818181 !important; /* Match emotion-slider gray */
font-weight: 600;
}
.new-offer-cards .platform-body {
background-color: #fff; /* <-- Change this for BODY background */
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1; /* This is key for equal height cards */
}
.new-offer-cards .platform-description {
color: #000; /* Light gray description */
font-size: 1rem; /* Match emotions-slider-item__text */
line-height: 1.6;
font-weight: 300;
flex-grow: 1; /* Pushes buttons to the bottom */
margin-bottom: 1.5rem;
}
.new-offer-cards .platform-buttons {
margin-top: auto; /* Ensures buttons align at the bottom */
}
/* Main "Register Now" button */
.new-offer-cards .platform-buttons .btn-register {
background-color: #F7F7F7 !important;
border-color: #ECECEC !important;
color: #000 !important;
font-weight: 500;
transition: all 0.3s ease;
}
.new-offer-cards .platform-buttons .btn-register:hover {
background-color: #ffffff !important;
border-color: #0ebdf3 !important;
color: #000000 !important;
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}
/* Secondary "Read Full Review" button */
.new-offer-cards .platform-buttons .btn-outline-secondary {
background-color: transparent;
border-color: #ECECEC; /* Darker border */
color: #000; /* Light text */
font-weight: 500;
transition: all 0.3s ease;
}
.new-offer-cards .platform-buttons .btn-outline-secondary:hover {
background-color: #2e2e2e;
border-color: #555;
color: #ffffff;
}
/* --- FIX: Remove unwanted padding from 'What Drives Us' title on about.html --- */
/* This h2 was given the .emotions-slider-section class for its font,
but that class adds padding and a background color we don't want here. */
.insights-header-card h2.emotions-slider-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
background-color: transparent !important;
}
/* --- ADDED: NEW: OFFERS.HTML HEADER CARD (EDITABLE) --- */
.offers-page-header {
background-color: #fff; /* <-- EDIT THIS BACKGROUND COLOR */
padding: 2.5rem;
border-radius: 12px;
border-top: 4px solid #0ebdf3; /* Site blue accent */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 3; /* Ensure it's on top of the gradient */
position: relative; /* Needed for z-index to work */
}
/* Text colors for the new offers header */
.offers-page-header .mbr-section-title {
color: #333 !important; /* <-- SOFTER BLACK */
font-size: 2rem;
font-weight: 600;
letter-spacing: -1px;
}
.offers-page-header .mbr-section-subtitle {
color: #000 !important; /* <-- EDIT THIS DESCRIPTION TEXT COLOR */
margin-top: 1rem;
font-size: 0.2rem;
}
/* --- ADDED BACK: Brand Color Headers for New Cards --- */
.new-offer-cards .platform-card.c-red .platform-header { background-color: #fff5f5; }
.new-offer-cards .platform-card.c-purple .platform-header { background-color: #faf5ff; }
.new-offer-cards .platform-card.c-green .platform-header { background-color: #f0fff4; }
.new-offer-cards .platform-card.c-blue .platform-header { background-color: #f0f9ff; }
.new-offer-cards .platform-card.c-gray .platform-header { background-color: #f8f9fa; }
.new-offer-cards .platform-card.c-turqiouse .platform-header { background-color: #f5FFFE; }
}
/* ================================== */
/* === Custom Pagination Styles === */
/* ================================== */
/* --- 1. The Default Page Buttons --- */
/* This styles all the clickable tags */
.page-link {
color: #000; /* Changes the text color to your brand's blue */
background-color: #ffffff; /* Ensures background is white */
border: 1px solid #dee2e6; /* A standard light-gray border */
/* (Optional) Adds a little space between each button */
margin: 0 3px;
/* (Optional) Makes the buttons pill-shaped. Delete if you like squares. */
border-radius: 50rem;
/* (Optional) A smooth transition for the hover effect */
transition: all 0.2s ease;
}
/* --- 2. The Hover Effect --- */
/* This styles what happens when you mouse over a NON-ACTIVE button */
.page-item:not(.active) .page-link:hover {
color: #0a8fb5; /* A slightly darker blue for the text */
background-color: #f0f9ff; /* A very light blue background */
}
/* --- 3. The ACTIVE Page Button (The most important one!) --- */
/* This styles the button for the page you are currently on */
.page-item.active .page-link {
z-index: 3;
color: #ffffff; /* White text */
background-color: #0ebdf3; /* YOUR BRAND'S BLUE! */
border-color: #0ebdf3; /* Matching border color */
}
/* --- 4. The DISABLED Button --- */
/* This styles the "Previous" on page 1 and "Next" on page 2 */
.page-item.disabled .page-link {
color: #6c757d; /* Muted gray text */
background-color: #f8f9fa; /* Light gray background */
border-color: #dee2e6;
}
/* --- 5. The Focus Outline (for accessibility) --- */
/* This changes the blue glow when you click/tab to a link */
.page-link:focus {
box-shadow: 0 0 0 0.25rem rgba(14, 189, 243, 0.25); /* A glow matching your brand blue */
}
/* --- Keyframe Animations --- */
@keyframes rotate-border {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes shine-effect {
0% { transform: translateX(-150px) skewX(-25deg); }
100% { transform: translateX(550px) skewX(-25deg); }
}
/* --- Section Backgrounds --- */
.section-dark-gradient {
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
padding: 3rem 0 0rem 0;
color: #e0e0e0;
}
.section-dark-solid {
background: #0a0a0a;
padding: 5rem 0 5rem 0;
color: #e0e0e0;
}
/* --- Section Headers (Dark BG) --- */
.section-dark-gradient .mbr-section-title,
.section-dark-solid .mbr-section-title {
color: #ffffff;
}
.section-dark-gradient .mbr-section-subtitle,
.section-dark-solid .mbr-section-subtitle {
color: #adb5bd;
}
/* --- Style 1: Featured Guide Card (Side Hustles) ---
*/
.featured-guide-card {
display: flex;
flex-direction: column;
background: #000;
border: 1px solid #333;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
margin-bottom: 2rem;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.featured-guide-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 20px rgba(14, 189, 243, 0.2);
border-color: #0ebdf3;
}
.featured-image-holder {
flex-basis: 40%;
overflow: hidden;
height: 350px;
}
.featured-image-holder img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.featured-guide-card:hover .featured-image-holder img {
transform: scale(1.05);
}
.featured-content-holder {
flex-basis: 60%;
padding: 2.5rem;
color: #fff;
display: flex;
flex-direction: column;
}
.featured-content-holder .category {
font-size: 0.8rem;
font-weight: 700;
color: #0ebdf3;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.featured-content-holder .title {
font-size: 2.2rem;
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
color: #fff;
}
.featured-content-holder .excerpt {
font-size: 1.1rem;
color: #adb5bd;
margin-bottom: 1.5rem;
flex-grow: 1;
}
/* --- "Shine" Button Animation --- */
.btn-shine {
position: relative;
overflow: hidden;
background: #0ebdf3;
border-color: #0ebdf3;
color: #000;
font-weight: 600;
transition: all 0.3s ease;
width: fit-content;
}
.btn-shine:hover {
background: #fff;
border-color: #fff;
color: #000;
}
.btn-shine::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transform: translateX(-150px) skewX(-25deg);
animation: shine-effect 5s infinite linear;
}
/* --- Secondary Guide Cards --- */
.secondary-guide-card {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 12px;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.secondary-guide-card:hover {
transform: translateY(-5px);
border-color: #0ebdf3;
}
.secondary-guide-card .card-img-top {
height: 200px;
width: 100%;
object-fit: cover;
border-bottom: 1px solid #333;
}
.secondary-guide-card .card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.secondary-guide-card .category {
font-size: 0.75rem;
font-weight: 700;
color: #0ebdf3;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.secondary-guide-card .title {
font-size: 1.3rem;
font-weight: 600;
color: #fff;
margin-bottom: 0.5rem;
}
.secondary-guide-card .excerpt {
color: #999;
font-size: 1rem;
flex-grow: 1;
margin-bottom: 1.5rem;
}
.secondary-guide-card .btn-outline-primary.disabled {
border-color: #ffffff;
color: #ffffff;
opacity: 0.6;
}
/* --- Style 2: Animated Glow Border Card (Financial Habits) ---
*/
.financial-card {
padding: 1px;
background: linear-gradient(135deg, #222, #111);
border-radius: 12px;
position: relative;
overflow: hidden;
height: 100%;
transition: all 0.3s ease;
}
.financial-card::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: conic-gradient(from 180deg at 50% 50%, #0ebdf3, #9400D3, #0ebdf3);
transform-origin: center;
transform: translate(-50%, -50%);
animation: rotate-border 4s linear infinite;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.financial-card:hover::before {
opacity: 1;
}
.financial-card:hover {
transform: translateY(-5px);
}
.financial-card-inner {
background: #1a1a1a;
border-radius: 11px;
padding: 1.5rem;
position: relative;
z-index: 2;
height: 100%;
display: flex;
flex-direction: column;
}
.financial-card-image img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1.5rem;
}
.financial-card-inner .category {
font-size: 0.75rem;
font-weight: 700;
color: #0ebdf3;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
.financial-card-inner .title {
font-size: 1.3rem;
font-weight: 600;
color: #fff;
margin-bottom: 1rem;
}
.financial-card-inner .excerpt {
color: #999;
font-size: 1rem;
flex-grow: 1;
margin-bottom: 2rem;
}
.financial-card-inner .btn-outline-primary {
border-color: #444;
color: #e0e0e0;
}
.financial-card-inner .btn-outline-primary:hover {
border-color: #0ebdf3;
background: #0ebdf3;
color: #000;
}
/* --- "Social Playbook" Buffer Section --- */
.social-hub-section {
background-color: #f8f9fa;
padding: 3rem 0;
border-top: 1px solid #e9ecef;
}
.social-hub-card {
display: block;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 12px;
padding: 2.5rem 2rem;
text-align: center;
text-decoration: none;
height: 100%;
transition: all 0.3s ease;
}
.social-hub-card:hover {
transform: translateY(-8px);
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-color: #0ebdf3;
}
.social-hub-icon span {
font-size: 3.5rem;
line-height: 1;
color: #0ebdf3;
transition: color 0.3s ease;
}
.social-hub-card:hover .social-hub-icon span {
color: #0a8fb5;
}
.social-hub-title {
font-size: 1.75rem;
font-weight: 600;
color: #212529;
margin-top: 1rem;
margin-bottom: 0.5rem;
transition: color 0.3s ease;
}
.social-hub-card:hover .social-hub-title {
color: #0ebdf3;
}
.social-hub-desc {
font-size: 1rem;
color: #6c757d;
}
/* --- End of New CSS --- */
@media (min-width: 992px) {
.featured-guide-card {
flex-direction: row;
}
.featured-image-holder {
height: auto;
}
}
.btn-glass-full {
display: block; /* Makes it full-width */
width: 100%;
border: 2px solid #0ebdf3;
color: #0ebdf3;
background-color: #000;
border-radius: 50px; /* Matches site's button style */
padding: 0.8rem 1.5rem;
font-weight: 600;
text-align: center;
text-decoration: none; /* remove underline from */
transition: all 0.3s ease-in-out;
margin-top: 1rem; /* Added margin to separate from text */
}
.btn-glass-full:hover {
background-color: #fff;
border: 2px solid #fff;
color: #111; /* Dark text on hover for contrast */
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); /* Glow effect */
transform: translateY(-2px); /* Slight lift */
}