html, body { font-family: 'Poppins', sans-serif; overflow-x: hidden; }
.product-card { transition: all .25s ease; position: relative; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.12); }
.badge { background-color:#001830; color:#fff; padding:.25rem .6rem; border-radius:9999px; font-size:.7rem; font-weight:600; position: absolute; top: 0.5rem; right: 0.5rem; z-index: 10; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1rem; border-radius:.75rem; font-weight:600; }
.btn-primary { background:#da6f0d; color:#fff; }
.btn-primary:hover { filter:brightness(.93); }
.btn-dark { background:#001830; color:#fff; }
.btn-dark:hover { filter:brightness(1.15); }
.btn-ghost { background:#fff; border:1px solid #e5e7eb; color:#111827 }
.btn-ghost:hover { background:#f9fafb }
.btn-added { background-color: #001830; color: white; }
.popup-overlay { background: rgba(0,0,0,.85); }
.thumbnail.active { outline:2px solid #da6f0d; cursor: pointer; }
.zoom-overlay { background: rgba(0,0,0,.95); }
.spinner { width:3rem; height:3rem; border:5px solid rgba(218,111,13,.2); border-top:5px solid #da6f0d; border-radius:9999px; animation:spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.image-placeholder { background:#e9ecef; display:flex; align-items:center; justify-content:center; color:#6b7280; font-size:.9rem }
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
#popup .popup-content {
max-height: 90vh;
overflow-y: auto;
}
#popup #main-media, #popup #main-video {
width: 100%;
object-fit: contain;
}
#popup .thumbnail {
width: 14vw;
height: 14vw;
min-width: 50px;
min-height: 50px;
}
#zoom-overlay #zoom-image {
max-width: 95vw;
max-height: 95vh;
}
@media (max-width: 640px) {
#popup #popup-title {
font-size: 1.5rem;
}
#popup .popup-content {
padding: 1rem;
}
}
#newsletterPopup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 60;
justify-content: center;
align-items: center;
}
#newsletterPopup.show {
display: flex;
}
#newsletterPopup .popup-container {
background-color: white;
border-radius: 0.5rem;
width: 90%;
max-width: 500px;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
padding: 2rem;
}
#newsletterPopup .close-btn {
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 1.5rem;
cursor: pointer;
color: #9ca3af;
background: none;
border: none;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
#newsletterPopup .close-btn:hover {
background-color: #f3f4f6;
color: #ef4444;
}
#newsletterPopup .popup-header {
text-align: center;
margin-bottom: 1rem;
}
#newsletterPopup .popup-header h2 {
font-size: 1.5rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
#newsletterPopup .popup-header p {
font-size: 0.9rem;
color: #6b7280;
}
#newsletterPopup .popup-image-container {
width: 100%;
height: 150px;
margin-bottom: 1.5rem;
overflow: hidden;
border-radius: 0.5rem;
background-color: #f9fafb;
display: flex;
align-items: center;
justify-content: center;
}
#newsletterPopup .popup-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
#newsletterPopup .popup-form {
width: 100%;
}
#newsletterPopup .popup-form input[type="email"] {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 1rem;
margin-bottom: 0.75rem;
}
#newsletterPopup .popup-form button {
width: 100%;
padding: 0.75rem;
background-color: #da6f0d;
color: white;
border: none;
border-radius: 0.375rem;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
#newsletterPopup .popup-form button:hover {
background-color: #b85d0a;
}
#newsletterPopup .form-message {
margin-top: 0.75rem;
font-size: 0.875rem;
text-align: center;
}
#newsletterPopup .form-message.success {
color: #10b981;
}
#newsletterPopup .form-message.error {
color: #ef4444;
}
#hero {
position: relative;
overflow: hidden;
width: 100%;
background-color: #f1ece6;
padding-top: 56.25%;
}
@media (min-width: 641px) {
#hero {
padding-top: 0;
height: 40vh;
max-height: 500px;
}
}
#hero .hero-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 1rem;
z-index: 10;
}
#hero .hero-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1.5rem;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
z-index: 20;
}
#hero .hero-carousel-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#hero .hero-carousel {
width: 100%;
height: 100%;
position: relative;
}
#hero .carousel-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
#hero .carousel-image.active {
opacity: 1;
}
#hero .carousel-indicators {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 30;
}
#hero .carousel-indicators span {
width: 0.75rem;
height: 0.75rem;
border-radius: 50%;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.5);
}
#hero .carousel-indicators span.active {
background-color: white;
}
#banner-4-1 {
width: 100%;
height: auto;
max-width: 1584px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#banner-4-1 .banner-container {
width: 100%;
padding-top: 25%;
position: relative;
}
#banner-4-1 .banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
#catalogue {
position: relative;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
#about .py-14 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
#contact .py-10 {
padding-top: 2rem;
padding-bottom: 2rem;
}
#userModal .relative.z-10 {
width: 95vw;
margin-left: auto;
margin-right: auto;
}
@media (min-width: 640px) {
#userModal .relative.z-10 {
width: auto;
max-width: 28rem;
}
}
#popup .popup-content {
width: 95vw;
max-width: 95vw;
margin: 1rem auto;
}
@media (min-width: 1024px) {
#popup .popup-content {
width: 100%;
max-width: 64rem;
margin: 2rem auto;
}
}
#popup .btn {
padding: 0.6rem 0.8rem;
font-size: 0.875rem;
}
@media (min-width: 640px) {
#popup .btn {
padding: 0.7rem 1rem;
font-size: 1rem;
}
}
#contact .grid.md\:grid-cols-3 {
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1.5rem;
}
@media (min-width: 768px) {
#contact .grid.md\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.price-container {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.original-price {
text-decoration: line-through;
color: #718096;
font-size: 0.875rem;
margin-bottom: 0.25rem;
}
.promo-price {
color: #e53e3e;
font-weight: bold;
font-size: 1.25rem;
}
.product-card .promo-price {
font-size: 1.125rem;
margin-top: 0.25rem;
}
.advanced-filters-container {
display: none;
width: 100%;
margin-top: 1rem;
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
background-color: #f9fafb;
}
.advanced-filters-container.show {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.filter-group {
flex: 1 1 150px;
}
.filter-group.wide {
flex: 1 1 100%;
}
.filter-group.half {
flex: 1 1 calc(50% - 0.5rem);
}
@media (min-width: 768px) {
.filter-group.half {
flex: 1 1 calc(25% - 0.5rem);
}
}
.product-card .badge {
display: none;
}
.product-card.promo .badge {
display: block;
}
#medalButton.active {
color: #da6f0d;
}
#openMenu.active {
color: #da6f0d;
}
.product-image {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 0.5rem;
}
#loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loading-screen.hidden {
opacity: 0;
visibility: hidden;
}
.loading-logo {
width: 100px;
height: 100px;
background-image: url('https://i.postimg.cc/vBjDkrGd/logo-wafricastore.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.mobile-menu {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
z-index: 49;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 4rem;
opacity: 0;
visibility: hidden;
transform: translateX(-100%);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
.mobile-menu.active {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.mobile-menu ul {
list-style-type: none;
padding: 0;
width: 100%;
max-width: 400px;
}
.mobile-menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile-menu a {
display: block;
color: white;
text-decoration: none;
font-size: 1.5rem;
font-weight: 500;
padding: 1.2rem 2rem;
text-align: center;
transition: background-color 0.2s ease;
}
.mobile-menu a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.header-message-icon {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
color: #001830;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s ease;
position: relative;
}
.header-message-icon:hover {
color: #da6f0d;
}
.header-message-icon i {
font-size: 1.5rem;
}
.header-message-icon.pulse i {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(218, 111, 13, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(218, 111, 13, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(218, 111, 13, 0);
}
}
.notification-badge {
position: absolute;
top: 0.25rem;
right: 0.25rem;
background-color: #ef4444;
color: white;
border-radius: 50%;
width: 0.8rem;
height: 0.8rem;
font-size: 0.6rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.hidden {
display: none;
}
.hamburger-btn {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #001830;
padding: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.hamburger-btn:hover {
color: #da6f0d;
}
#backToTop {
position: fixed;
bottom: 2rem;
right: 2rem;
background-color: #da6f0d;
color: white;
border: none;
border-radius: 50%;
width: 4rem;
height: 4rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
z-index: 1000;
}
#backToTop:hover {
background-color: #b85d0a;
transform: translateY(-2px);
}
#backToTop.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.presentation-section {
padding: 1rem 1rem;
background-color: #f9fafb;
border-top: 1px solid #e5e7eb;
}
.presentation-section p {
margin-bottom: 0.5rem;
font-size: 0.8rem;
color: #4b5563;
line-height: 1.4;
}
.presentation-section p:last-child {
margin-bottom: 0;
}
.presentation-section p.title {
font-size: 0.9rem;
font-weight: 500;
color: #1f2937;
text-align: center;
margin-bottom: 0.75rem;
}
footer {
background-color: #001830;
color: #9ca3af;
padding-top: 1rem;
padding-bottom: 1rem;
}
footer p {
font-size: 0.875rem;
margin: 0;
}
footer .footer-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.presentation-container {
max-width: 72rem;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
}
@media (min-width: 640px) {
.presentation-container {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (min-width: 1024px) {
.presentation-container {
padding-left: 2rem;
padding-right: 2rem;
}
}
footer {
z-index: 1;
}
.presentation-section {
z-index: 1;
}
.suggestion-senegal-card,
.suggestion-mali-card,
.service-senegal-card,
.service-mali-card,
.trending-senegal-card,
.trending-mali-card,
.trending-services-senegal-card,
.trending-services-mali-card,
.promo-products-senegal-card,
.promo-products-mali-card,
.promo-services-senegal-card,
.promo-services-mali-card {
display: inline-block;
width: 180px;
height: 280px;
background-color: white;
border: 2px solid #e5e7eb;
border-radius: 0.75rem;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
margin-right: 0.75rem;
vertical-align: top;
flex-shrink: 0;
}
.suggestion-senegal-card:last-child,
.suggestion-mali-card:last-child,
.service-senegal-card:last-child,
.service-mali-card:last-child,
.trending-senegal-card:last-child,
.trending-mali-card:last-child,
.trending-services-senegal-card:last-child,
.trending-services-mali-card:last-child,
.promo-products-senegal-card:last-child,
.promo-products-mali-card:last-child,
.promo-services-senegal-card:last-child,
.promo-services-mali-card:last-child {
margin-right: 0;
}
.suggestion-senegal-card:hover,
.suggestion-mali-card:hover,
.service-senegal-card:hover,
.service-mali-card:hover,
.trending-senegal-card:hover,
.trending-mali-card:hover,
.trending-services-senegal-card:hover,
.trending-services-mali-card:hover,
.promo-products-senegal-card:hover,
.promo-products-mali-card:hover,
.promo-services-senegal-card:hover,
.promo-services-mali-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,.1);
border-color: #d1d5db;
}
.suggestion-senegal-card .relative,
.suggestion-mali-card .relative,
.service-senegal-card .relative,
.service-mali-card .relative,
.trending-senegal-card .relative,
.trending-mali-card .relative,
.trending-services-senegal-card .relative,
.trending-services-mali-card .relative,
.promo-products-senegal-card .relative,
.promo-products-mali-card .relative,
.promo-services-senegal-card .relative,
.promo-services-mali-card .relative {
flex-shrink: 0;
}
.suggestion-senegal-card .bg-gray-100,
.suggestion-mali-card .bg-gray-100,
.service-senegal-card .bg-gray-100,
.service-mali-card .bg-gray-100,
.trending-senegal-card .bg-gray-100,
.trending-mali-card .bg-gray-100,
.trending-services-senegal-card .bg-gray-100,
.trending-services-mali-card .bg-gray-100,
.promo-products-senegal-card .bg-gray-100,
.promo-products-mali-card .bg-gray-100,
.promo-services-senegal-card .bg-gray-100,
.promo-services-mali-card .bg-gray-100 {
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.suggestion-senegal-card img,
.suggestion-mali-card img,
.service-senegal-card img,
.service-mali-card img,
.trending-senegal-card img,
.trending-mali-card img,
.trending-services-senegal-card img,
.trending-services-mali-card img,
.promo-products-senegal-card img,
.promo-products-mali-card img,
.promo-services-senegal-card img,
.promo-services-mali-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.suggestion-senegal-card .p-3,
.suggestion-mali-card .p-3,
.service-senegal-card .p-3,
.service-mali-card .p-3,
.trending-senegal-card .p-3,
.trending-mali-card .p-3,
.trending-services-senegal-card .p-3,
.trending-services-mali-card .p-3,
.promo-products-senegal-card .p-3,
.promo-products-mali-card .p-3,
.promo-services-senegal-card .p-3,
.promo-services-mali-card .p-3 {
padding: 0.75rem;
display: flex;
flex-direction: column;
flex-grow: 1;
height: calc(100% - 150px);
}
.suggestion-senegal-card .text-sm,
.suggestion-mali-card .text-sm,
.service-senegal-card .text-sm,
.service-mali-card .text-sm,
.trending-senegal-card .text-sm,
.trending-mali-card .text-sm,
.trending-services-senegal-card .text-sm,
.trending-services-mali-card .text-sm,
.promo-products-senegal-card .text-sm,
.promo-products-mali-card .text-sm,
.promo-services-senegal-card .text-sm,
.promo-services-mali-card .text-sm {
font-size: 0.875rem;
}
.suggestion-senegal-card .line-clamp-1,
.suggestion-mali-card .line-clamp-1,
.service-senegal-card .line-clamp-1,
.service-mali-card .line-clamp-1,
.trending-senegal-card .line-clamp-1,
.trending-mali-card .line-clamp-1,
.trending-services-senegal-card .line-clamp-1,
.trending-services-mali-card .line-clamp-1,
.promo-products-senegal-card .line-clamp-1,
.promo-products-mali-card .line-clamp-1,
.promo-services-senegal-card .line-clamp-1,
.promo-services-mali-card .line-clamp-1 {
-webkit-line-clamp: 1;
line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0.25rem;
width: 100%;
}
.suggestion-senegal-card .text-primary,
.suggestion-mali-card .text-primary,
.service-senegal-card .text-primary,
.service-mali-card .text-primary,
.trending-senegal-card .text-primary,
.trending-mali-card .text-primary,
.trending-services-senegal-card .text-primary,
.trending-services-mali-card .text-primary,
.promo-products-senegal-card .text-primary,
.promo-products-mali-card .text-primary,
.promo-services-senegal-card .text-primary,
.promo-services-mali-card .text-primary {
color: #da6f0d;
}
.suggestion-senegal-card .font-bold,
.suggestion-mali-card .font-bold,
.service-senegal-card .font-bold,
.service-mali-card .font-bold,
.trending-senegal-card .font-bold,
.trending-mali-card .font-bold,
.trending-services-senegal-card .font-bold,
.trending-services-mali-card .font-bold,
.promo-products-senegal-card .font-bold,
.promo-products-mali-card .font-bold,
.promo-services-senegal-card .font-bold,
.promo-services-mali-card .font-bold {
font-weight: 600;
}
.suggestion-senegal-card .text-gray-600,
.suggestion-mali-card .text-gray-600,
.service-senegal-card .text-gray-600,
.service-mali-card .text-gray-600,
.trending-senegal-card .text-gray-600,
.trending-mali-card .text-gray-600,
.trending-services-senegal-card .text-gray-600,
.trending-services-mali-card .text-gray-600,
.promo-products-senegal-card .text-gray-600,
.promo-products-mali-card .text-gray-600,
.promo-services-senegal-card .text-gray-600,
.promo-services-mali-card .text-gray-600 {
color: #4b5563;
}
.suggestion-senegal-card .text-xs,
.suggestion-mali-card .text-xs,
.service-senegal-card .text-xs,
.service-mali-card .text-xs,
.trending-senegal-card .text-xs,
.trending-mali-card .text-xs,
.trending-services-senegal-card .text-xs,
.trending-services-mali-card .text-xs,
.promo-products-senegal-card .text-xs,
.promo-products-mali-card .text-xs,
.promo-services-senegal-card .text-xs,
.promo-services-mali-card .text-xs {
font-size: 0.75rem;
}
.suggestion-senegal-card .flex-grow,
.suggestion-mali-card .flex-grow,
.service-senegal-card .flex-grow,
.service-mali-card .flex-grow,
.trending-senegal-card .flex-grow,
.trending-mali-card .flex-grow,
.trending-services-senegal-card .flex-grow,
.trending-services-mali-card .flex-grow,
.promo-products-senegal-card .flex-grow,
.promo-products-mali-card .flex-grow,
.promo-services-senegal-card .flex-grow,
.promo-services-mali-card .flex-grow {
flex-grow: 1;
}
.suggestion-senegal-card .btn-container,
.suggestion-mali-card .btn-container,
.service-senegal-card .btn-container,
.service-mali-card .btn-container,
.trending-senegal-card .btn-container,
.trending-mali-card .btn-container,
.trending-services-senegal-card .btn-container,
.trending-services-mali-card .btn-container,
.promo-products-senegal-card .btn-container,
.promo-products-mali-card .btn-container,
.promo-services-senegal-card .btn-container,
.promo-services-mali-card .btn-container {
display: none;
}
.carousel-container {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
width: max-content;
}
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease;
}
.carousel-nav:hover {
background-color: rgba(255, 255, 255, 1);
}
.carousel-nav i {
color: #001830;
font-size: 1rem;
}
.carousel-nav.prev {
left: 10px;
}
.carousel-nav.next {
right: 10px;
}
.carousel-nav.disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: rgba(200, 200, 200, 0.5);
}
.carousel-nav.disabled:hover {
background-color: rgba(200, 200, 200, 0.5);
}
.loading-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.service-senegal-card .badge,
.service-mali-card .badge,
.suggestion-senegal-card .badge,
.suggestion-mali-card .badge,
.trending-senegal-card .badge,
.trending-mali-card .badge,
.trending-services-senegal-card .badge,
.trending-services-mali-card .badge,
.promo-products-senegal-card .badge,
.promo-products-mali-card .badge,
.promo-services-senegal-card .badge,
.promo-services-mali-card .badge {
background-color: #dc2626;
color: white;
padding: 0.25rem 0.6rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
position: absolute;
top: 0.5rem;
right: 0.5rem;
z-index: 10;
}
.location-info {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: #4b5563;
margin-top: 0.25rem;
}
.location-info i {
color: #da6f0d;
font-size: 0.7rem;
}
.quote-price {
color: #da6f0d;
font-weight: bold;
font-size: 0.875rem;
text-align: left;
}
.title-with-button {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.title-with-button h2 {
margin: 0;
flex-grow: 1;
}
.title-with-button .btn-title {
background-color: #da6f0d;
color: white;
border: 1px solid white;
border-radius: 0.5rem;
padding: 0.25rem 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
font-size: 0.875rem;
font-weight: 500;
}
.title-with-button .btn-title:hover {
background-color: #c2630c;
transform: scale(1.05);
}
.title-with-button .btn-title i {
margin: 0;
font-size: 0.875rem;
}