/*
* Stars Trading Global - Custom Stylesheet
* High-End, Premium Responsive Design
*/
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');
:root {
--primary-color: #0b1538;
/* Deep Navy */
--secondary-color: #17224d;
/* Navy Blue for sidebar/forms */
--accent-gold: #e5a93b;
/* Gold/Orange Accent */
--accent-gold-gradient: linear-gradient(135deg, #f39c12 0%, #e5a93b 100%);
--bg-light-blue: #eaeefd;
/* Light background color */
--bg-gradient-soft: #ffffff;
--text-dark: #1e293b;
/* Charcoal text */
--text-muted: #64748b;
/* Muted gray text */
--text-white: #ffffff;
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--border-radius-sm: 4px;
--border-radius-md: 8px;
--border-radius-lg: 16px;
--shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
--shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
--shadow-gold: 0 0 15px rgba(229, 169, 59, 0.4);
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Outfit', sans-serif;
}
/* Base Reset & Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
overflow-y: scroll;
}
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--text-dark);
background-color: #ffffff;
overflow-x: clip;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
font-weight: 700;
color: var(--primary-color);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-smooth);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* Layout Container */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* Header & Navigation */
header {
background: rgba(11, 21, 56, 0.95);
backdrop-filter: blur(10px);
position: sticky;
top: 0;
z-index: 1000;
border-bottom: 2px solid rgba(229, 169, 59, 0.3);
box-shadow: var(--shadow-soft);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
}
.logo-link {
display: flex;
align-items: center;
gap: 10px;
}
.logo-img {
height: 65px;
width: auto;
}
.logo-text {
font-family: var(--font-heading);
font-weight: 800;
font-size: 20px;
color: var(--text-white);
letter-spacing: 0.5px;
white-space: nowrap;
}
.logo-text span {
font-weight: 400;
color: var(--accent-gold);
}
/* Navigation Links */
.nav-menu {
display: flex;
align-items: center;
list-style: none;
gap: 25px;
}
.nav-item {
position: relative;
}
.nav-link {
font-family: var(--font-heading);
font-weight: 600;
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
padding: 8px 0;
transition: var(--transition-smooth);
}
.nav-link:hover,
.nav-item.active .nav-link {
color: var(--accent-gold);
}
/* Active State Underline */
.nav-item.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background-color: var(--accent-gold);
box-shadow: 0 0 8px var(--accent-gold);
}
/* Dropdown Menu */
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: var(--primary-color);
box-shadow: var(--shadow-medium);
border-top: 3px solid var(--accent-gold);
list-style: none;
min-width: 200px;
padding: 10px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition-smooth);
border-radius: 0 0 6px 6px;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-item a {
display: block;
padding: 10px 20px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
font-weight: 500;
}
.dropdown-item a:hover {
background-color: rgba(255, 255, 255, 0.05);
color: var(--accent-gold);
padding-left: 25px;
}
/* Buttons */
.btn {
display: inline-block;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
padding: 10px 24px;
border-radius: var(--border-radius-sm);
text-transform: capitalize;
border: none;
cursor: pointer;
text-align: center;
transition: var(--transition-smooth);
}
.btn-gold {
background: var(--accent-gold-gradient);
color: #000000;
box-shadow: 0 4px 10px rgba(229, 169, 59, 0.3);
}
.btn-gold:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-gold), 0 6px 15px rgba(229, 169, 59, 0.5);
}
.btn-outline {
background: transparent;
color: var(--text-white);
border: 1px solid rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.05);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--text-white);
transform: translateY(-2px);
}
/* Mobile Hamburger Menu */
.hamburger {
display: none;
cursor: pointer;
background: transparent;
border: none;
}
.hamburger span {
display: block;
width: 25px;
height: 3px;
background-color: var(--text-white);
margin: 5px 0;
transition: var(--transition-smooth);
}
/* Hero Section */
.hero {
position: relative;
background: linear-gradient(rgba(11, 21, 56, 0.65), rgba(11, 21, 56, 0.85)), url('https://images.unsplash.com/photo-1494412574643-ff11b0a5c1c3?q=80&w=1920&auto=format&fit=crop') no-repeat center center/cover;
min-height: 500px;
display: flex;
align-items: center;
color: var(--text-white);
overflow: hidden;
padding: 80px 0;
}
/* Map overlay simulation */
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=1200&auto=format&fit=crop');
/* Light abstract dots/map concept */
background-size: cover;
opacity: 0.12;
pointer-events: none;
}
.hero-content {
max-width: 650px;
position: relative;
z-index: 2;
}
.hero-title {
font-size: 44px;
line-height: 1.2;
margin-bottom: 20px;
font-weight: 800;
color: var(--text-white);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.hero-title span {
color: var(--accent-gold);
display: block;
font-size: 0.9em;
}
.hero-tagline {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.hero-ctas {
display: flex;
gap: 15px;
}
/* Main Content Wrapper (Home Layout) */
.main-wrapper {
background: var(--bg-gradient-soft);
padding: 60px 0;
}
.layout-grid {
display: grid;
grid-template-columns: 8fr 4fr;
gap: 40px;
}
/* Breadcrumbs */
.breadcrumbs {
display: none !important;
}
.breadcrumbs a {
color: var(--primary-color);
font-weight: 600;
}
.breadcrumbs span {
margin: 0 5px;
}
/* Main Area Content Panels */
.welcome-section {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(5px);
border-radius: var(--border-radius-md);
padding: 30px;
box-shadow: var(--shadow-soft);
border: 1px solid rgba(255, 255, 255, 0.6);
margin-bottom: 40px;
}
.welcome-title {
font-size: 28px;
margin-bottom: 15px;
position: relative;
padding-bottom: 10px;
}
.welcome-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: var(--accent-gold);
}
.welcome-desc {
margin-bottom: 30px;
color: #334155;
font-size: 15.5px;
}
/* Value Grid */
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.value-card {
background: #ffffff;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
transition: var(--transition-smooth);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.value-img-container {
height: 140px;
overflow: hidden;
position: relative;
}
.value-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.value-card:hover .value-img {
transform: scale(1.1);
}
.value-card-title {
padding: 15px;
text-align: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--primary-color);
}
.value-card-title span {
font-size: 16px;
}
/* Featured Products grid */
.featured-section {
margin-bottom: 40px;
}
.section-header {
font-size: 24px;
margin-bottom: 25px;
position: relative;
padding-bottom: 10px;
}
.section-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--accent-gold);
}
.products-compact-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.product-compact-card {
background: #ffffff;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
transition: var(--transition-smooth);
}
.product-compact-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.prod-img-container {
height: 150px;
overflow: hidden;
position: relative;
}
.prod-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.product-compact-card:hover .prod-img {
transform: scale(1.1);
}
.prod-title {
padding: 15px;
text-align: center;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
color: var(--primary-color);
}
/* Right Sidebar Inquiry Form */
.sidebar-form-container {
background-color: var(--secondary-color);
border-radius: var(--border-radius-md);
padding: 30px 25px;
color: var(--text-white);
box-shadow: var(--shadow-medium);
border-top: 5px solid var(--accent-gold);
position: sticky;
top: 100px;
}
.sidebar-form-title {
font-size: 22px;
font-weight: 700;
color: var(--text-white);
margin-bottom: 25px;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.form-group {
margin-bottom: 15px;
}
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 12px 15px;
border-radius: var(--border-radius-sm);
border: 1px solid rgba(255, 255, 255, 0.15);
background-color: rgba(255, 255, 255, 0.95);
color: var(--text-dark);
font-family: var(--font-body);
font-size: 14px;
outline: none;
transition: var(--transition-smooth);
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: var(--accent-gold);
box-shadow: 0 0 5px rgba(229, 169, 59, 0.5);
background-color: #ffffff;
}
.form-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
}
.form-textarea {
resize: none;
height: 90px;
}
.sidebar-form-container .btn-gold {
width: 100%;
margin-top: 10px;
padding: 12px 0;
font-size: 15px;
}
/* Services Offered Grid */
.services-section {
background: #ffffff;
padding: 80px 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.service-card-half {
grid-column: span 1.5;
}
.service-card {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 16px;
padding: 30px;
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.service-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background-color: var(--primary-color);
transition: var(--transition-smooth);
}
.service-card:hover::before {
background-color: var(--accent-gold);
width: 6px;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(11, 21, 56, 0.08);
border-color: rgba(229, 169, 59, 0.5);
background-color: #ffffff;
}
.service-icon {
font-size: 36px;
color: var(--accent-gold);
margin-bottom: 20px;
transition: var(--transition-smooth);
display: inline-block;
}
.service-card:hover .service-icon {
transform: translateY(-4px) scale(1.08);
color: #e5a93b;
text-shadow: 0 4px 12px rgba(229, 169, 59, 0.35);
}
.service-title {
font-size: 18px;
margin-bottom: 12px;
color: var(--primary-color);
}
.service-desc {
color: var(--text-muted);
font-size: 14.5px;
}
.service-bullets {
margin-top: 15px;
list-style: none;
}
.service-bullets li {
font-size: 13.5px;
color: var(--text-dark);
margin-bottom: 6px;
position: relative;
padding-left: 15px;
}
.service-bullets li::before {
content: '✓';
color: var(--accent-gold);
font-weight: bold;
position: absolute;
left: 0;
}
/* By The Numbers Section */
.numbers-section {
background: linear-gradient(135deg, #0b1538 0%, #17224d 100%);
color: var(--text-white);
padding: 70px 0;
border-top: 3px solid var(--accent-gold);
border-bottom: 3px solid var(--accent-gold);
text-align: center;
}
.numbers-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
margin-top: 40px;
}
.number-card {
padding: 20px;
position: relative;
}
.number-card:not(:last-child)::after {
content: '';
position: absolute;
right: -15px;
top: 25%;
width: 1px;
height: 50%;
background-color: rgba(255, 255, 255, 0.15);
}
.number-val {
font-family: var(--font-heading);
font-size: 42px;
font-weight: 800;
color: var(--accent-gold);
margin-bottom: 10px;
line-height: 1;
}
.number-lbl {
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
/* Testimonials Section */
.testimonials-section {
background: var(--bg-gradient-soft);
padding: 80px 0;
}
.testimonials-slider {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 40px;
}
.testimonial-card {
background: #ffffff;
border-radius: var(--border-radius-md);
padding: 30px;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
position: relative;
}
.testimonial-text {
font-style: italic;
color: #475569;
margin-bottom: 20px;
font-size: 15px;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 15px;
}
.author-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--bg-light-blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: var(--primary-color);
border: 2px solid var(--accent-gold);
}
.author-info h4 {
font-size: 15px;
color: var(--primary-color);
}
.author-info p {
font-size: 13px;
color: var(--text-muted);
}
/* Floating WhatsApp Button */
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 30px;
right: 30px;
background-color: #25d366;
color: #ffffff;
border-radius: 50%;
text-align: center;
font-size: 30px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-smooth);
animation: pulse 2s infinite;
}
.whatsapp-float:hover {
transform: scale(1.1);
background-color: #20ba5a;
color: #ffffff;
}
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}
/* Footer Section */
footer {
background: linear-gradient(rgba(5, 10, 30, 0.95), rgba(5, 10, 30, 0.98)), url('https://images.unsplash.com/photo-1518241353330-0f7941c2d9b5?q=80&w=1200&auto=format&fit=crop') no-repeat center center/cover;
color: var(--text-white);
padding: 50px 0 25px;
border-top: 4.5px solid var(--accent-gold);
position: relative;
}
.footer-grid {
display: grid;
grid-template-columns: 2.2fr 2.2fr 1.6fr 1.6fr 2.4fr;
gap: 30px;
align-items: flex-start;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 30px;
margin-bottom: 20px;
}
.footer-col h3 {
color: var(--text-white);
font-size: 16px;
font-weight: 700;
margin-bottom: 18px;
font-family: var(--font-heading);
}
.footer-contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.footer-contact-item i {
color: var(--accent-gold);
font-size: 14px;
margin-top: 4px;
flex-shrink: 0;
width: 16px;
text-align: center;
}
.footer-contact-item span {
font-size: 13px;
color: rgba(255, 255, 255, 0.8);
line-height: 1.45;
}
.footer-links-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-links-list li a {
color: rgba(255, 255, 255, 0.8);
font-size: 13.5px;
transition: var(--transition-smooth);
display: inline-block;
}
.footer-links-list li a:hover {
color: var(--accent-gold);
transform: translateX(3px);
}
.footer-social-icons {
display: flex;
gap: 10px;
margin-bottom: 12px;
}
.footer-social-btn {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 16px;
transition: var(--transition-smooth);
}
.footer-social-btn:hover {
transform: translateY(-2px);
opacity: 0.9;
}
.footer-social-btn.facebook {
background-color: #3b5998;
}
.footer-social-btn.linkedin {
background-color: #0077b5;
}
.footer-social-btn.instagram {
background-color: #c13584;
}
.footer-social-btn.whatsapp {
background-color: #25d366;
}
.footer-bottom {
display: flex;
justify-content: flex-start;
align-items: center;
padding-top: 10px;
}
.footer-copyright {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
text-align: left;
}
/* Responsiveness for Footer Columns */
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
@media (max-width: 600px) {
.footer-copyright {
text-align: center;
}
.footer-bottom {
justify-content: center;
}
}
/* Page Specific styling (About Page) */
.about-section {
background: #ffffff;
padding: 60px 0;
}
.about-grid {
display: grid;
grid-template-columns: 7fr 5fr;
gap: 40px;
}
.cert-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 30px;
}
.cert-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: var(--border-radius-md);
padding: 20px;
text-align: center;
transition: var(--transition-smooth);
}
.cert-card:hover {
border-color: var(--accent-gold);
background-color: #ffffff;
box-shadow: var(--shadow-soft);
}
.cert-icon {
font-size: 28px;
color: var(--accent-gold);
margin-bottom: 10px;
}
.cert-card h4 {
font-size: 15px;
margin-bottom: 5px;
}
.cert-card p {
font-size: 12px;
color: var(--text-muted);
}
/* Page Specific styling (Products Catalog Page) */
.products-wrapper {
background: var(--bg-gradient-soft);
padding: 60px 0;
}
.products-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 40px;
justify-content: center;
}
.filter-btn {
font-family: var(--font-heading);
font-weight: 600;
font-size: 14px;
padding: 8px 20px;
border-radius: 30px;
border: 1px solid #cbd5e1;
background-color: #ffffff;
color: var(--text-dark);
cursor: pointer;
transition: var(--transition-smooth);
}
.filter-btn:hover,
.filter-btn.active {
background-color: var(--primary-color);
color: var(--text-white);
border-color: var(--primary-color);
}
.products-catalog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.product-card {
background: #ffffff;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
transition: var(--transition-smooth);
display: flex;
flex-direction: column;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.prod-badge {
position: absolute;
top: 15px;
left: 15px;
background-color: var(--primary-color);
color: var(--accent-gold);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 3px;
z-index: 2;
border-left: 2px solid var(--accent-gold);
}
.product-details-content {
padding: 25px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-card-title {
font-size: 18px;
margin-bottom: 12px;
color: var(--primary-color);
}
.product-card-desc {
color: var(--text-muted);
font-size: 14px;
margin-bottom: 20px;
flex-grow: 1;
}
.product-meta-list {
list-style: none;
border-top: 1px solid #f1f5f9;
padding-top: 15px;
margin-bottom: 20px;
}
.product-meta-list li {
font-size: 13.5px;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.product-meta-list li strong {
color: var(--primary-color);
}
.product-meta-list li span {
color: #475569;
}
.product-card .btn-gold {
width: 100%;
}
/* Page Specific styling (Product Detail Page) */
.prod-detail-wrapper {
background: var(--bg-gradient-soft);
padding: 60px 0;
}
.prod-detail-grid {
display: grid;
grid-template-columns: 6fr 6fr;
gap: 40px;
margin-bottom: 50px;
}
.gallery-main-img {
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
height: 350px;
}
.gallery-main-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-thumbs {
display: flex;
gap: 15px;
margin-top: 15px;
}
.gallery-thumb {
width: 80px;
height: 60px;
border-radius: var(--border-radius-sm);
overflow: hidden;
cursor: pointer;
opacity: 0.6;
border: 2px solid transparent;
transition: var(--transition-smooth);
}
.gallery-thumb:hover,
.gallery-thumb.active {
opacity: 1;
border-color: var(--accent-gold);
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.spec-table {
width: 100%;
border-collapse: collapse;
margin-top: 15px;
background: #ffffff;
box-shadow: var(--shadow-soft);
border-radius: var(--border-radius-md);
overflow: hidden;
border: 1px solid #e2e8f0;
}
.spec-table th,
.spec-table td {
padding: 12px 20px;
text-align: left;
}
.spec-table tr:not(:last-child) {
border-bottom: 1px solid #f1f5f9;
}
.spec-table th {
background-color: #f8fafc;
color: var(--primary-color);
font-weight: 600;
width: 40%;
}
.markets-flex {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 15px;
}
.market-badge {
background-color: #ffffff;
border: 1px solid var(--accent-gold);
color: var(--primary-color);
font-size: 13px;
font-weight: 600;
padding: 6px 16px;
border-radius: 20px;
}
/* Page Specific styling (Gallery Page with Lightbox) */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 30px;
}
.gallery-card {
background: #ffffff;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
cursor: pointer;
transition: var(--transition-smooth);
}
.gallery-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.gallery-card-img {
height: 180px;
overflow: hidden;
}
.gallery-card-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.gallery-card:hover .gallery-card-img img {
transform: scale(1.1);
}
.gallery-card-caption {
padding: 12px 15px;
font-size: 13px;
font-weight: 600;
text-align: center;
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
color: var(--primary-color);
}
/* Lightbox Style */
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 21, 56, 0.95);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
}
.lightbox-content {
max-width: 80%;
max-height: 80%;
position: relative;
}
.lightbox-img {
max-width: 100%;
max-height: 80vh;
border-radius: var(--border-radius-sm);
box-shadow: var(--shadow-medium);
border: 3px solid var(--accent-gold);
}
.lightbox-close {
position: absolute;
top: -40px;
right: 0;
color: var(--text-white);
font-size: 30px;
cursor: pointer;
background: transparent;
border: none;
outline: none;
}
.lightbox-caption {
color: var(--text-white);
text-align: center;
margin-top: 15px;
font-family: var(--font-heading);
font-weight: 600;
}
/* Dedicated Inquiry Page styling */
.inquiry-wrapper {
background: var(--bg-gradient-soft);
padding: 60px 0;
}
.inquiry-container-box {
background-color: var(--secondary-color);
border-radius: var(--border-radius-md);
padding: 40px;
color: var(--text-white);
box-shadow: var(--shadow-medium);
border-top: 6px solid var(--accent-gold);
max-width: 800px;
margin: 0 auto;
}
.inquiry-grid-fields {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.inquiry-grid-full {
grid-column: span 2;
}
.inquiry-container-box h2 {
color: var(--text-white);
margin-bottom: 25px;
text-align: center;
font-size: 28px;
}
/* General Layouts (Contact Us Page) */
.contact-grid {
display: grid;
grid-template-columns: 5fr 7fr;
gap: 40px;
}
.contact-info-cards {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-info-card {
background: #ffffff;
border-radius: var(--border-radius-md);
padding: 25px;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
display: flex;
gap: 20px;
align-items: flex-start;
}
.contact-info-icon {
font-size: 24px;
color: var(--accent-gold);
}
.contact-info-content h4 {
font-size: 15px;
margin-bottom: 5px;
color: var(--primary-color);
}
.contact-info-content p {
font-size: 14px;
color: var(--text-muted);
}
.map-container {
height: 300px;
border-radius: var(--border-radius-md);
overflow: hidden;
box-shadow: var(--shadow-soft);
border: 1px solid #e2e8f0;
margin-top: 35px;
}
.map-container iframe {
width: 100%;
height: 100%;
border: 0;
}
/* Thank you page */
.thank-you-container {
text-align: center;
max-width: 600px;
margin: 80px auto;
background: #ffffff;
padding: 50px 40px;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-soft);
border-top: 5px solid var(--accent-gold);
}
.thank-you-icon {
font-size: 60px;
color: var(--accent-gold);
margin-bottom: 20px;
}
.thank-you-title {
font-size: 32px;
margin-bottom: 15px;
}
.thank-you-text {
color: var(--text-muted);
margin-bottom: 30px;
font-size: 16px;
}
/* ========================================================
* Admin Panel Custom Styles
* ======================================================== */
.admin-login-body {
background: radial-gradient(circle at center, #1e295d 0%, #0b112c 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.admin-login-card {
background: rgba(255, 255, 255, 0.95);
border-radius: var(--border-radius-lg);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
border-top: 6px solid var(--accent-gold);
width: 100%;
max-width: 420px;
padding: 40px 30px;
}
.admin-login-title {
text-align: center;
font-size: 24px;
color: var(--primary-color);
margin-bottom: 30px;
}
.admin-login-title span {
color: var(--accent-gold);
font-weight: 400;
}
/* Admin UI Mobile Responsive Elements */
.admin-menu-toggle {
display: none;
background: #f8fafc;
border: 1px solid #cbd5e1;
border-radius: 4px;
padding: 8px 12px;
font-size: 16px;
color: var(--primary-color);
cursor: pointer;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.admin-menu-toggle:hover {
background-color: #e2e8f0;
}
.admin-sidebar-close {
display: none;
}
.admin-sidebar-overlay {
display: none;
}
.admin-layout {
display: grid;
grid-template-columns: 240px 1fr;
min-height: 100vh;
background-color: #f1f5f9;
}
.admin-sidebar {
background-color: var(--primary-color);
color: var(--text-white);
padding: 30px 20px;
display: flex;
flex-direction: column;
gap: 30px;
border-right: 2px solid rgba(229, 169, 59, 0.2);
}
.admin-logo {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-heading);
font-weight: 800;
font-size: 18px;
}
.admin-logo span {
color: var(--accent-gold);
font-weight: 400;
}
.admin-menu-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
flex-grow: 1;
}
.admin-menu-link {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 15px;
border-radius: var(--border-radius-sm);
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
font-size: 14.5px;
transition: var(--transition-smooth);
}
.admin-menu-link:hover,
.admin-menu-link.active {
background-color: rgba(255, 255, 255, 0.08);
color: var(--accent-gold);
}
.admin-main {
display: flex;
flex-direction: column;
}
.admin-header {
background-color: #ffffff;
height: 70px;
padding: 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.admin-user-info {
display: flex;
align-items: center;
gap: 10px;
font-weight: 600;
font-size: 14.5px;
}
.admin-content {
padding: 30px;
flex-grow: 1;
overflow-y: auto;
}
.admin-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.admin-stat-card {
background-color: #ffffff;
padding: 25px;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-soft);
border-left: 4px solid var(--primary-color);
display: flex;
justify-content: space-between;
align-items: center;
}
.admin-stat-card.gold-border {
border-left-color: var(--accent-gold);
}
.admin-stat-info h3 {
font-size: 14px;
color: var(--text-muted);
text-transform: uppercase;
margin-bottom: 5px;
}
.admin-stat-val {
font-size: 32px;
font-weight: 800;
color: var(--primary-color);
line-height: 1;
}
.admin-stat-icon {
font-size: 32px;
color: #cbd5e1;
}
.admin-panel-card {
background-color: #ffffff;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-soft);
padding: 25px;
margin-bottom: 30px;
}
.admin-panel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: 1px solid #e2e8f0;
padding-bottom: 15px;
}
.admin-panel-title {
font-size: 18px;
color: var(--primary-color);
}
/* Admin Data Table */
.admin-table-wrapper {
width: 100%;
overflow-x: auto;
}
.admin-table {
width: 100%;
border-collapse: collapse;
text-align: left;
font-size: 14px;
}
.admin-table th,
.admin-table td {
padding: 12px 15px;
border-bottom: 1px solid #e2e8f0;
}
.admin-table th {
background-color: #f8fafc;
color: var(--primary-color);
font-weight: 600;
}
.admin-table tr:hover {
background-color: #f8fafc;
}
.admin-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.admin-badge-gold {
background-color: rgba(229, 169, 59, 0.15);
color: #b27a15;
}
.admin-badge-blue {
background-color: rgba(11, 21, 56, 0.1);
color: var(--primary-color);
}
.admin-action-btn {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
font-weight: 600;
}
.admin-btn-view {
background-color: #f1f5f9;
color: var(--text-dark);
}
.admin-btn-view:hover {
background-color: #e2e8f0;
}
.admin-btn-edit {
background-color: rgba(229, 169, 59, 0.15);
color: #b27a15;
margin-right: 5px;
}
.admin-btn-edit:hover {
background-color: var(--accent-gold);
color: #ffffff;
}
.admin-btn-delete {
background-color: rgba(239, 68, 68, 0.1);
color: #ef4444;
}
.admin-btn-delete:hover {
background-color: #ef4444;
color: #ffffff;
}
/* Modal details */
.admin-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(11, 21, 56, 0.5);
backdrop-filter: blur(4px);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
}
.admin-modal-content {
background-color: #ffffff;
border-radius: var(--border-radius-md);
box-shadow: var(--shadow-medium);
width: 100%;
max-width: 600px;
padding: 30px;
position: relative;
border-top: 5px solid var(--accent-gold);
animation: modalSlide 0.3s ease-out;
}
@keyframes modalSlide {
from {
transform: translateY(-30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.admin-modal-close {
position: absolute;
top: 15px;
right: 20px;
font-size: 24px;
cursor: pointer;
background: none;
border: none;
}
.admin-form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 15px;
}
/* ========================================================
* Responsive Breakpoints
* ======================================================== */
@media (max-width: 1024px) {
.layout-grid {
grid-template-columns: 1fr;
}
.sidebar-form-container {
position: static;
margin-top: 40px;
}
.products-catalog-grid {
grid-template-columns: repeat(2, 1fr);
}
.prod-detail-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
.admin-layout {
grid-template-columns: 1fr;
}
.admin-sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 250px;
z-index: 1050;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.25);
display: flex !important;
/* Make sure it overrides display: none */
}
.admin-sidebar.mobile-open {
transform: translateX(0);
}
.admin-sidebar-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(11, 21, 56, 0.5);
backdrop-filter: blur(2px);
z-index: 1040;
}
.admin-sidebar-overlay.active {
display: block;
}
.admin-menu-toggle {
display: inline-flex !important;
}
.admin-sidebar-close {
display: block !important;
position: absolute;
top: 15px;
right: 15px;
font-size: 24px;
color: #fff;
cursor: pointer;
opacity: 0.8;
transition: opacity 0.2s;
}
.admin-sidebar-close:hover {
opacity: 1;
}
}
@media (max-width: 768px) {
.admin-form-row {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
.admin-modal-content {
width: 90% !important;
margin: 20px auto !important;
padding: 20px 15px !important;
}
.admin-table-hide-mobile {
display: none !important;
}
/* Navbar CTA visibility & mobile scaling adjustments */
.nav-cta {
display: block;
margin-left: auto;
margin-right: 15px;
}
.nav-cta .btn {
font-size: 9.5px;
padding: 5px 9px;
border-radius: 4px;
}
.logo-text {
font-size: 15px;
line-height: 1.15;
}
.logo-text span {
display: block;
}
.logo-link svg {
width: 26px;
height: 26px;
}
.nav-menu {
position: fixed;
left: -100%;
top: 75px;
flex-direction: column;
background-color: var(--primary-color);
width: 100%;
text-align: center;
transition: 0.3s;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
padding: 30px 0;
gap: 20px;
z-index: 999;
}
.nav-menu.active {
left: 0;
}
.hamburger {
display: block;
}
.hamburger.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.hero-title {
font-size: 32px;
}
.value-grid {
grid-template-columns: 1fr;
}
.products-compact-grid {
grid-template-columns: 1fr;
}
.services-grid {
grid-template-columns: 1fr;
}
.service-card-half {
grid-column: span 1 !important;
}
.numbers-grid {
grid-template-columns: repeat(2, 1fr);
}
.number-card::after {
display: none;
}
.testimonials-slider {
grid-template-columns: 1fr;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 20px;
}
.footer-grid .footer-col:nth-child(1),
.footer-grid .footer-col:nth-child(2),
.footer-grid .footer-col:nth-child(5) {
grid-column: span 2;
text-align: center;
}
.footer-grid .footer-col:nth-child(3) {
grid-column: span 1;
text-align: left;
padding-left: 20px;
}
.footer-grid .footer-col:nth-child(3) h3 {
text-align: left;
}
.footer-grid .footer-col:nth-child(4) {
grid-column: span 1;
text-align: left;
padding-left: 15px;
}
.footer-grid .footer-col:nth-child(4) h3 {
text-align: left;
}
.footer-info h3::before {
left: 50%;
transform: translateX(-50%);
top: auto;
bottom: -5px;
width: 30px;
height: 3px;
}
.footer-info p {
justify-content: center;
}
.footer-social-right {
align-items: center;
}
.about-grid {
grid-template-columns: 1fr;
}
.cert-grid {
grid-template-columns: 1fr;
}
.products-catalog-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr !important;
}
.inquiry-grid-fields {
grid-template-columns: 1fr;
}
.inquiry-grid-full {
grid-column: span 1;
}
.contact-grid {
grid-template-columns: 1fr;
}
.admin-stats-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.numbers-grid {
grid-template-columns: 1fr;
}
.gallery-grid {
grid-template-columns: 1fr;
}
.admin-form-row {
grid-template-columns: 1fr;
}
}
/* ========================================================
* Stars Trading Global - New Custom UI Styles
* ======================================================== */
/* Top bar styles */
.top-bar {
background-color: #080f28;
color: rgba(255, 255, 255, 0.85);
font-size: 13px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.top-bar-container {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.top-bar-item {
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.top-bar-item a:hover {
color: var(--accent-gold);
}
.top-bar-item i {
color: var(--accent-gold);
}
/* Products Megamenu styles */
.dropdown-megamenu {
position: absolute;
top: 100%;
left: -70px;
background: #0b1538;
box-shadow: var(--shadow-medium);
border-top: 3px solid var(--accent-gold);
border-radius: 0 0 8px 8px;
width: 290px;
padding: 18px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: var(--transition-smooth);
list-style: none;
z-index: 1010;
text-align: left;
}
.dropdown:hover .dropdown-megamenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.megamenu-title {
font-size: 13px;
font-weight: 700;
color: var(--text-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 8px;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.megamenu-group {
margin-bottom: 12px;
}
.megamenu-group-title {
font-size: 13px;
font-weight: 700;
color: var(--accent-gold);
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.megamenu-item {
list-style: none;
padding-left: 20px;
margin-bottom: 2px;
}
.megamenu-item a {
display: block;
font-size: 12.5px;
color: rgba(255, 255, 255, 0.8);
transition: var(--transition-smooth);
}
.megamenu-item a:hover {
color: var(--accent-gold);
transform: translateX(4px);
}
.megamenu-btn {
display: block;
text-align: center;
background: var(--accent-gold-gradient);
color: #000000;
font-family: var(--font-heading);
font-weight: 700;
font-size: 12.5px;
padding: 8px 0;
border-radius: var(--border-radius-sm);
margin-top: 15px;
box-shadow: 0 4px 8px rgba(229, 169, 59, 0.2);
}
.megamenu-btn:hover {
box-shadow: var(--shadow-gold), 0 4px 12px rgba(229, 169, 59, 0.4);
transform: translateY(-1px);
}
/* Custom Hero Layout (Sunset with container ship + map overlay) */
.hero-sunset-ship {
position: relative;
background: linear-gradient(90deg, rgba(8, 15, 40, 0.95) 0%, rgba(8, 15, 40, 0.7) 40%, rgba(8, 15, 40, 0.1) 85%),
url('boat.jpeg') no-repeat center 20%/cover;
min-height: 580px;
display: flex;
align-items: center;
color: var(--text-white);
overflow: hidden;
padding: 80px 0;
border-bottom: 3px solid var(--accent-gold);
}
.hero-sunset-ship .hero-title {
font-size: 46px;
font-weight: 800;
line-height: 1.25;
}
.hero-sunset-ship .hero-title span {
display: block;
font-size: 46px;
font-weight: 800;
}
.hero-sunset-ship .hero-title span.hero-title-accent {
color: var(--accent-gold);
}
.hero-sunset-ship .hero-title span.hero-title-main {
color: var(--text-white);
}
.hero-sunset-ship .hero-tagline {
font-size: 18px;
font-weight: 500;
color: var(--text-white);
margin-top: 15px;
margin-bottom: 30px;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
.inner-page .hero-sunset-ship .hero-title {
font-size: 36px;
}
/* World map overlay - Hidden to prevent visual splotchiness/noise on dark background */
.hero-map-overlay {
display: none;
}
.hero-sunset-ship .container {
position: relative;
z-index: 2;
}
/* Home Page Product styling update to match Pic 1 */
.product-compact-card {
border-radius: 4px;
border: 1px solid #dcdff1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
background-color: #ffffff;
overflow: hidden;
}
.product-compact-card .prod-img-container {
height: 190px;
}
.product-compact-card .prod-title {
background-color: #e6ebfc;
color: #0b1538;
font-family: var(--font-heading);
font-weight: 700;
font-size: 15px;
padding: 12px;
border-top: 1px solid #dcdff1;
text-transform: capitalize;
}
/* Custom Quote Form Styling (Pic 4 & 5) */
.custom-quote-container {
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 40px;
max-width: 680px;
margin: 30px auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
.custom-quote-title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: #000000;
text-align: left;
margin-bottom: 5px;
}
.custom-quote-subtitle {
font-family: var(--font-body);
font-size: 14.5px;
color: #475569;
text-align: left;
margin-bottom: 30px;
font-weight: 500;
}
.custom-quote-section-label {
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 700;
color: #000000;
margin-bottom: 10px;
display: block;
}
.radio-group-container,
.checkbox-group-container {
margin-bottom: 25px;
}
.radio-option,
.checkbox-option {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
cursor: pointer;
font-family: var(--font-body);
font-size: 15px;
color: #000000;
font-weight: 600;
}
.radio-option input[type="radio"],
.checkbox-option input[type="checkbox"] {
width: 20px;
height: 20px;
accent-color: #000000;
cursor: pointer;
}
.custom-quote-text-field {
width: 100%;
padding: 12px 16px;
font-family: var(--font-body);
font-size: 14px;
border: 1px solid #cbd5e1;
border-radius: 4px;
background-color: #ffffff;
color: #000000;
outline: none;
transition: var(--transition-smooth);
}
.custom-quote-text-field:focus {
border-color: #000000;
}
.custom-quote-select {
width: 100%;
padding: 12px 16px;
font-family: var(--font-body);
font-size: 14px;
border: 1px solid #cbd5e1;
border-radius: 4px;
background-color: #ffffff;
color: #000000;
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.custom-quote-select:focus {
border-color: #000000;
}
.custom-quote-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.custom-quote-grid-item {
margin-bottom: 10px;
}
.custom-quote-grid-item label {
font-size: 13.5px;
font-weight: 600;
color: #000000;
display: block;
margin-bottom: 6px;
}
.custom-quote-textarea {
width: 100%;
height: 100px;
padding: 12px 16px;
font-family: var(--font-body);
font-size: 14px;
border: 1px solid #cbd5e1;
border-radius: 4px;
resize: none;
outline: none;
color: #000000;
margin-bottom: 25px;
}
.custom-quote-textarea:focus {
border-color: #000000;
}
.custom-quote-textarea::placeholder {
color: #94a3b8;
}
.custom-quote-phone-group {
display: flex;
gap: 10px;
}
.custom-quote-phone-prefix {
width: 90px;
}
.custom-quote-phone-number {
flex-grow: 1;
}
.custom-quote-btn-black {
width: 100%;
padding: 15px 0;
background-color: #000000;
color: #ffffff;
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
border: none;
border-radius: 4px;
cursor: pointer;
text-align: center;
transition: var(--transition-smooth);
}
.custom-quote-btn-black:hover {
background-color: #1e293b;
transform: translateY(-1px);
}
.custom-quote-sublabel {
font-size: 12.5px;
color: #64748b;
margin-top: -10px;
margin-bottom: 15px;
font-style: italic;
display: block;
}
/* Adjustments for Sidebar Inquiry Form cards */
.sidebar-form-container {
border-top: 5px solid var(--accent-gold);
}
/* Footer Stars Trading Global and Star Universal side by side logo */
.footer-logo-row {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
margin-top: 35px;
}
.footer-logo-item {
display: flex;
flex-direction: column;
gap: 5px;
}
.footer-thailand-logo {
display: flex;
align-items: center;
gap: 10px;
color: #ffffff;
}
.footer-thailand-logo img {
height: 40px;
width: auto;
}
/* Trust Bar / Slider Ticker Section */
.trust-bar-section {
background: linear-gradient(180deg, #0b1538 0%, #080f2b 100%);
border-top: 3.5px solid #14b8a6;
/* Premium teal/green top border matching the mockup */
border-bottom: 2.5px solid var(--accent-gold);
padding: 16px 0;
overflow: hidden;
position: relative;
z-index: 10;
width: 100%;
}
.trust-bar-container {
width: 100%;
overflow: hidden;
display: flex;
position: relative;
}
/* Track holding the scrolling items */
.trust-bar-track {
display: flex;
align-items: center;
width: max-content;
animation: marquee-scroll 30s linear infinite;
}
/* Pause scroll on hover for ease of reading */
.trust-bar-track:hover {
animation-play-state: paused;
}
/* Individual badge elements */
.trust-badge-item {
display: flex;
align-items: center;
gap: 15px;
color: #ffffff;
padding: 0 35px;
border-right: 1px solid rgba(255, 255, 255, 0.15);
/* White vertical line separator */
white-space: nowrap;
flex-shrink: 0;
}
/* Customize FontAwesome and inline SVGs inside badge */
.trust-badge-icon {
font-size: 26px;
color: var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
}
.trust-badge-icon i {
color: #e5a93b;
/* Gold icon */
text-shadow: 0 0 10px rgba(229, 169, 59, 0.25);
}
.trust-badge-text {
font-family: var(--font-body);
font-size: 13.5px;
font-weight: 700;
letter-spacing: 0.3px;
color: #ffffff;
line-height: 1.3;
}
/* Keyframes for seamless left-scroll */
@keyframes marquee-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Responsive adjustment */
@media (max-width: 768px) {
.trust-bar-section {
padding: 12px 0;
}
.trust-badge-item {
padding: 0 25px;
gap: 10px;
}
.trust-badge-text {
font-size: 12.5px;
}
.trust-badge-icon {
font-size: 22px;
}
}
/* Why Choose Stars Trading Global? section */
.why-choose-section {
margin-top: 35px;
padding-top: 10px;
}
.why-choose-title {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
color: var(--primary-color);
text-align: center;
margin-bottom: 30px;
position: relative;
padding-bottom: 12px;
}
.why-choose-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background-color: var(--accent-gold);
border-radius: 2px;
}
.why-choose-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.why-choose-card {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 20px 24px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
transition: var(--transition-smooth);
}
.why-choose-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(11, 21, 56, 0.08);
border-color: rgba(229, 169, 59, 0.5);
background-color: #fafbfe;
}
.why-choose-icon-container {
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #eaeefd;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition-smooth);
}
.why-choose-card:hover .why-choose-icon-container {
background-color: var(--accent-gold);
}
.why-choose-icon-container i {
font-size: 22px;
color: var(--primary-color);
transition: var(--transition-smooth);
}
.why-choose-card:hover .why-choose-icon-container i {
color: #ffffff;
}
.why-choose-text {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--primary-color);
line-height: 1.35;
}
/* CEO Message Card & About Story Card Styles */
.ceo-message-card,
.about-story-card {
background: #ffffff;
padding: 35px;
border-radius: 16px;
border: 1px solid #cbd5e1;
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
}
.ceo-message-card {
margin-top: 30px;
margin-bottom: 30px;
}
.about-story-card {
margin-bottom: 0;
}
.ceo-message-card:hover,
.about-story-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(11, 21, 56, 0.08);
border-color: var(--accent-gold);
}
.ceo-message-grid {
display: grid;
grid-template-columns: 280px 1fr;
gap: 35px;
align-items: start;
}
.ceo-photo-container {
width: 100%;
}
.ceo-photo {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.06);
border: 1px solid #cbd5e1;
display: block;
}
.ceo-text-container {
display: flex;
flex-direction: column;
}
.ceo-section-title {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 20px;
position: relative;
padding-bottom: 8px;
text-transform: uppercase;
}
.ceo-section-title span {
color: var(--accent-gold);
}
.ceo-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background-color: var(--accent-gold);
border-radius: 2px;
}
.ceo-para {
font-family: var(--font-body);
font-size: 14.5px;
color: var(--text-dark);
line-height: 1.6;
margin-bottom: 15px;
}
.ceo-signature-area {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #e2e8f0;
}
.ceo-sincerely {
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 500;
color: var(--text-muted);
margin-bottom: 8px;
}
.ceo-signature-name {
font-family: 'Great Vibes', cursive;
font-size: 34px;
color: var(--primary-color);
margin-bottom: 4px;
line-height: 1.2;
}
.ceo-title-sub {
font-family: var(--font-heading);
font-size: 13.5px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 2px;
}
.ceo-company-sub {
font-family: var(--font-body);
font-size: 12.5px;
font-weight: 500;
color: var(--text-muted);
margin-bottom: 15px;
}
.ceo-whatsapp {
margin-top: 10px;
}
.whatsapp-btn-ceo {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #25d366;
color: #ffffff;
padding: 8px 16px;
border-radius: 50px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: var(--transition-smooth);
box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}
.whatsapp-btn-ceo:hover {
background-color: #128c7e;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(37, 211, 102, 0.3);
color: #ffffff;
}
/* Responsive CEO Message Card */
@media (max-width: 768px) {
.ceo-message-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.ceo-photo-container {
max-width: 320px;
margin: 0 auto;
}
}
/* Premium Gallery Card Layout (Mockup Style) */
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-top: 20px;
}
.gallery-card {
position: relative;
background: #ffffff;
border-radius: 12px;
border: 1px solid #cbd5e1;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
cursor: pointer;
transition: var(--transition-smooth);
display: flex;
flex-direction: column;
}
.gallery-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(11, 21, 56, 0.08);
border-color: var(--accent-gold);
}
.gallery-card-img-wrap {
position: relative;
height: 180px;
width: 100%;
overflow: hidden;
}
.gallery-card-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
display: block;
}
.gallery-card:hover .gallery-card-img-wrap img {
transform: scale(1.06);
}
/* Badge overlay inside card image */
.gallery-card-badge {
position: absolute;
top: 159px;
left: 20px;
width: 42px;
height: 42px;
background-color: #0b1538;
border: 3px solid #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.gallery-card-badge i {
color: var(--accent-gold);
font-size: 16px;
}
.gallery-card-body {
padding: 28px 20px 22px 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: left;
}
.gallery-card-title {
font-family: var(--font-heading);
font-size: 17px;
font-weight: 700;
color: #0b1538;
margin-bottom: 8px;
line-height: 1.3;
}
.gallery-card-desc {
font-family: var(--font-body);
font-size: 13.5px;
color: #475569;
line-height: 1.5;
margin: 0;
}
/* Gallery Card Image Slider */
.gallery-slider {
position: relative;
}
.gallery-slider img.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.8s ease-in-out;
z-index: 1;
}
.gallery-slider img.slide.active {
opacity: 1;
z-index: 2;
}
/* ========================================================
* Global Markets Page Custom Styles
* ======================================================== */
/* Hero Section */
.hero-global-markets {
position: relative;
background: linear-gradient(90deg, rgba(8, 15, 40, 0.95) 0%, rgba(8, 15, 40, 0.8) 35%, rgba(8, 15, 40, 0.4) 65%, rgba(8, 15, 40, 0.1) 100%),
url('image/global.jpeg') no-repeat center center/cover;
min-height: 650px;
display: flex;
align-items: center;
color: var(--text-white);
overflow: hidden;
padding: 80px 0;
border-bottom: 3px solid var(--accent-gold);
}
.hero-global-markets .hero-content {
max-width: 650px;
position: relative;
z-index: 2;
}
.hero-global-markets .hero-title {
display: flex;
flex-direction: column;
font-family: var(--font-heading);
font-weight: 800;
line-height: 1.15;
margin-bottom: 25px;
}
.hero-global-markets .hero-title-white-sub {
color: #ffffff;
font-size: 44px;
font-weight: 800;
display: block;
}
.hero-global-markets .hero-title-accent {
color: var(--accent-gold);
font-size: 44px;
font-weight: 800;
display: block;
}
.hero-global-markets .hero-tagline {
font-size: 15.5px;
font-weight: 400;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
max-width: 550px;
line-height: 1.6;
}
/* Hero features list overlay */
.hero-features-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 35px;
}
.hero-feature-item {
display: flex;
align-items: center;
gap: 15px;
}
.hero-feature-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--primary-color);
border: 2px solid rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.hero-feature-icon i {
color: var(--accent-gold);
font-size: 18px;
}
.hero-feature-text h3 {
font-family: var(--font-heading);
color: #ffffff;
font-size: 15.5px;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.hero-feature-text p {
font-family: var(--font-body);
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
margin: 2px 0 0 0;
line-height: 1.2;
}
/* Trusted Buyers Card */
.trusted-buyers-card {
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 16px;
padding: 25px 35px;
box-shadow: var(--shadow-soft);
margin-top: -90px;
margin-bottom: 40px;
position: relative;
z-index: 10;
}
.trusted-title-container {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-bottom: 25px;
}
.trusted-line {
flex-grow: 1;
height: 1px;
background-color: #cbd5e1;
}
.trusted-title-text {
font-family: var(--font-heading);
font-size: 11px;
font-weight: 700;
color: var(--accent-gold);
letter-spacing: 1.5px;
text-transform: uppercase;
white-space: nowrap;
}
.trusted-badges-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
text-align: center;
}
.trusted-badge-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.trusted-badge-icon {
font-size: 32px;
color: var(--accent-gold);
transition: var(--transition-smooth);
}
.trusted-badge-item:hover .trusted-badge-icon {
transform: translateY(-3px) scale(1.08);
}
.trusted-badge-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.trusted-badge-text span {
font-family: var(--font-heading);
font-size: 13.5px;
font-weight: 700;
color: var(--primary-color);
line-height: 1.3;
}
/* Export Footprint Section */
.export-footprint-section {
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
}
.footprint-header {
margin-bottom: 40px;
}
.footprint-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--accent-gold);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.footprint-subtitle .sub-line {
width: 20px;
height: 1px;
background-color: var(--accent-gold);
}
.footprint-title {
font-family: var(--font-heading);
font-size: 30px;
font-weight: 800;
color: var(--primary-color);
margin: 10px 0 12px 0;
}
.footprint-tagline {
font-family: var(--font-body);
font-size: 14.5px;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
.footprint-divider {
width: 40px;
height: 2px;
background-color: var(--accent-gold);
margin: 20px auto 0 auto;
}
.footprint-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
}
.footprint-card {
position: relative;
background-color: var(--primary-color);
border-radius: 16px;
padding: 35px 20px;
color: #ffffff;
box-shadow: var(--shadow-medium);
border: 1px solid transparent;
overflow: hidden;
transition: var(--transition-smooth);
display: flex;
flex-direction: column;
align-items: center;
z-index: 1;
}
.footprint-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=600&auto=format&fit=crop');
background-size: cover;
opacity: 0.05;
pointer-events: none;
z-index: -1;
}
.footprint-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(11, 21, 56, 0.2);
border-color: rgba(229, 169, 59, 0.3);
}
.footprint-icon-wrap {
width: 56px;
height: 56px;
border-radius: 50%;
border: 2.2px solid var(--accent-gold);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: var(--transition-smooth);
}
.footprint-card:hover .footprint-icon-wrap {
background-color: var(--accent-gold);
}
.footprint-card:hover .footprint-icon-wrap i {
color: #ffffff;
}
.footprint-icon-wrap i {
color: var(--accent-gold);
font-size: 20px;
transition: var(--transition-smooth);
}
.footprint-stat {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 800;
color: var(--accent-gold);
line-height: 1.1;
margin-bottom: 8px;
}
.footprint-label {
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.footprint-card-divider {
width: 20px;
height: 1px;
background-color: var(--accent-gold);
margin-bottom: 12px;
}
.footprint-desc {
font-family: var(--font-body);
font-size: 13px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.45;
margin: 0;
}
@media (max-width: 768px) {
.why-choose-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.why-choose-card {
padding: 18px 20px;
gap: 15px;
}
.why-choose-icon-container {
width: 46px;
height: 46px;
}
.why-choose-icon-container i {
font-size: 18px;
}
.why-choose-text {
font-size: 14px;
}
}
/* Adjust inner page and home page hero banner layout, text alignment, and background on mobile */
@media (max-width: 768px) {
.hero-sunset-ship {
min-height: 380px !important;
padding: 45px 0 !important;
background: linear-gradient(90deg, rgba(8, 15, 40, 0.95) 0%, rgba(8, 15, 40, 0.65) 55%, rgba(8, 15, 40, 0.2) 100%),
url('boat.jpeg') no-repeat center center/cover !important;
display: flex !important;
align-items: center !important;
}
.hero-sunset-ship .hero-content {
margin: 0 !important;
text-align: left !important;
max-width: 250px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.hero-sunset-ship .hero-title {
font-size: 22px !important;
text-align: left !important;
line-height: 1.25 !important;
}
.hero-sunset-ship .hero-title span {
font-size: 22px !important;
line-height: 1.35 !important;
text-align: left !important;
display: block !important;
}
.hero-sunset-ship .hero-tagline {
font-size: 13px !important;
margin-top: 8px !important;
margin-bottom: 32px !important; /* pushed buttons down */
text-align: left !important;
line-height: 1.4 !important;
}
.hero-sunset-ship .hero-ctas {
justify-content: flex-start !important;
gap: 12px !important;
}
.hero-sunset-ship .hero-ctas .btn {
font-size: 12px !important;
padding: 9px 16px !important;
white-space: nowrap !important; /* keeps button text in one line */
flex-shrink: 0 !important;
}
.inner-page .hero-sunset-ship {
min-height: 250px !important;
padding: 30px 0 !important;
align-items: center !important;
padding-top: 40px !important;
}
/* Hero global markets mobile styles */
.hero-global-markets {
min-height: 520px !important;
padding: 45px 0 !important;
background: linear-gradient(90deg, rgba(8, 15, 40, 0.95) 0%, rgba(8, 15, 40, 0.55) 45%, rgba(8, 15, 40, 0) 75%),
url('image/global.jpeg') no-repeat right center/cover !important;
display: flex !important;
align-items: center !important;
}
.hero-global-markets .hero-content {
margin: 0 !important;
text-align: left !important;
max-width: 250px !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.hero-global-markets .hero-title {
margin-bottom: 15px !important;
}
.hero-global-markets .hero-title-white-sub,
.hero-global-markets .hero-title-accent {
font-size: 22px !important;
line-height: 1.35 !important;
text-align: left !important;
display: block !important;
}
.hero-global-markets .hero-tagline {
font-size: 13px !important;
margin-top: 8px !important;
margin-bottom: 20px !important;
text-align: left !important;
line-height: 1.4 !important;
}
.hero-global-markets .hero-features-list {
gap: 12px !important;
margin-bottom: 20px !important;
}
.hero-global-markets .hero-feature-item {
gap: 10px !important;
}
.hero-global-markets .hero-feature-icon {
width: 36px !important;
height: 36px !important;
}
.hero-global-markets .hero-feature-icon i {
font-size: 13px !important;
}
.hero-global-markets .hero-feature-text h3 {
font-size: 13px !important;
}
.hero-global-markets .hero-feature-text p {
font-size: 11px !important;
}
.hero-global-markets .hero-tagline {
margin-bottom: 32px !important;
}
.hero-global-markets .hero-ctas {
justify-content: flex-start !important;
gap: 12px !important;
}
.hero-global-markets .hero-ctas .btn {
font-size: 12px !important;
padding: 9px 16px !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
/* Trusted buyers mobile responsive */
.trusted-buyers-card {
margin-top: -45px !important;
margin-bottom: 25px !important;
padding: 12px 10px !important;
}
.trusted-title-container {
margin-bottom: 12px !important;
}
.trusted-title-text {
font-size: 9px !important;
letter-spacing: 0.8px !important;
}
.trusted-badges-grid {
grid-template-columns: repeat(4, 1fr) !important;
gap: 5px !important;
}
.trusted-badge-item {
gap: 6px !important;
}
.trusted-badge-icon {
font-size: 20px !important;
}
.trusted-badge-text span {
font-size: 10px !important;
letter-spacing: -0.2px;
}
/* Export Footprint mobile responsive styles */
.footprint-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.footprint-card {
padding: 25px 15px !important;
border-radius: 12px !important;
}
.footprint-icon-wrap {
width: 46px !important;
height: 46px !important;
margin-bottom: 15px !important;
}
.footprint-icon-wrap i {
font-size: 17px !important;
}
.footprint-stat {
font-size: 24px !important;
}
.footprint-label {
font-size: 10.5px !important;
margin-bottom: 10px !important;
}
.footprint-card-divider {
margin-bottom: 10px !important;
}
.footprint-desc {
font-size: 11.5px !important;
}
.footprint-title {
font-size: 22px !important;
}
.footprint-tagline {
font-size: 13px !important;
}
}
/* ==========================================
Global Markets Region & Country Styles
========================================== */
.market-regions-wrapper {
margin-top: 50px;
display: flex;
flex-direction: column;
gap: 60px;
}
.market-region-section {
display: flex;
flex-direction: column;
gap: 30px;
}
.market-region-header {
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.region-subtitle-badge {
color: var(--accent-gold);
font-family: var(--font-heading);
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
display: block;
margin-bottom: 8px;
}
.region-title {
font-family: var(--font-heading);
font-size: 36px;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 12px;
letter-spacing: -0.5px;
}
.region-desc {
font-family: var(--font-body);
font-size: 15.5px;
color: var(--text-muted);
line-height: 1.6;
}
.region-header-line {
width: 50px;
height: 3px;
background-color: var(--accent-gold);
margin: 15px auto 0 auto;
}
.market-countries-list {
display: flex;
flex-direction: column;
gap: 30px;
}
.market-country-card {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-soft);
display: flex;
overflow: hidden;
transition: var(--transition-smooth);
}
.market-country-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(11, 21, 56, 0.08);
border-color: rgba(229, 169, 59, 0.3);
}
.market-country-left {
width: 38%;
background-size: cover;
background-position: center;
position: relative;
flex-shrink: 0;
}
.landmark-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, rgba(11, 21, 56, 0.1), rgba(11, 21, 56, 0.3));
}
.market-country-right {
flex-grow: 1;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 25px;
}
.market-country-header {
display: flex;
align-items: center;
gap: 15px;
}
.market-country-flag {
width: 44px;
height: auto;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #cbd5e1;
}
.market-country-info {
display: flex;
flex-direction: column;
}
.market-country-name {
font-family: var(--font-heading);
font-size: 24px;
font-weight: 800;
color: var(--primary-color);
letter-spacing: 0.5px;
line-height: 1.2;
}
.market-country-location {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--text-muted);
margin-top: 4px;
}
.market-country-location i {
color: var(--accent-gold);
margin-right: 4px;
}
.market-products-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.market-products-heading {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.market-products-badges {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: center;
}
.market-product-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 75px;
text-align: center;
transition: var(--transition-smooth);
}
.market-product-badge:hover {
transform: translateY(-3px);
}
.market-product-circle {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #ffffff;
border: 1px solid #cbd5e1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: var(--transition-smooth);
}
.market-product-badge:hover .market-product-circle {
border-color: var(--accent-gold);
box-shadow: 0 4px 12px rgba(229, 169, 59, 0.25);
}
.market-product-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.market-product-name {
font-family: var(--font-body);
font-size: 11px;
font-weight: 600;
color: var(--primary-color);
line-height: 1.25;
word-break: break-word;
}
.market-no-products {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--text-muted);
font-style: italic;
}
.market-country-footer {
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #cbd5e1;
padding-top: 20px;
margin-top: 5px;
}
.market-port-info {
font-family: var(--font-body);
font-size: 14px;
color: var(--primary-color);
}
.market-port-info i {
color: var(--primary-color);
margin-right: 5px;
}
.btn-market-view {
background-color: var(--primary-color);
color: #ffffff;
font-size: 13px;
padding: 8px 18px;
border-radius: var(--border-radius-sm);
display: flex;
align-items: center;
gap: 8px;
border: 1px solid transparent;
}
.btn-market-view:hover {
background-color: #ffffff;
color: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-2px);
}
/* Banners Section CSS */
.market-region-bottom-banner {
display: flex;
flex-direction: column;
gap: 30px;
margin-top: 20px;
margin-bottom: 20px;
}
/* Southeast Asia Banner */
.sea-features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
background-color: var(--primary-color);
padding: 25px 20px;
border-radius: var(--border-radius-md);
color: #ffffff;
}
.sea-feature-card {
display: flex;
align-items: flex-start;
gap: 12px;
}
.sea-feature-icon {
font-size: 24px;
color: var(--accent-gold);
line-height: 1;
}
.sea-feature-text h5 {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
}
.sea-feature-text p {
font-family: var(--font-body);
font-size: 11.5px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.35;
}
.sea-cta-card {
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-soft);
display: flex;
justify-content: space-between;
overflow: hidden;
min-height: 200px;
}
.cta-card-content {
width: 60%;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.cta-card-content h4 {
font-family: var(--font-heading);
font-size: 22px;
font-weight: 800;
color: var(--primary-color);
}
.cta-card-content p {
font-family: var(--font-body);
font-size: 14px;
color: var(--text-muted);
}
.cta-card-buttons {
display: flex;
gap: 15px;
margin-top: 8px;
}
.btn-whatsapp {
background-color: #25d366;
color: #ffffff;
border: 1px solid transparent;
}
.btn-whatsapp:hover {
background-color: #ffffff;
color: #25d366;
border-color: #25d366;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
}
.cta-card-image {
width: 40%;
background-size: cover;
background-position: center;
position: relative;
}
.cta-card-image::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 25%);
}
/* Middle East Bottom Banner */
.me-trust-banner {
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: var(--border-radius-md);
padding: 20px 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
.me-trust-content {
display: flex;
align-items: center;
gap: 18px;
}
.me-trust-icon {
font-size: 32px;
color: var(--primary-color);
}
.me-trust-text h5 {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 2px;
}
.me-trust-text p {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--text-muted);
}
.me-trust-arrow {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--primary-color);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
transition: var(--transition-smooth);
}
.me-trust-arrow:hover {
transform: translateX(3px) scale(1.05);
background-color: var(--accent-gold);
}
.me-cta-banner {
background-color: var(--primary-color);
border-radius: var(--border-radius-md);
padding: 30px;
display: flex;
align-items: center;
justify-content: space-between;
color: #ffffff;
}
.me-cta-text {
display: flex;
align-items: center;
gap: 20px;
}
.me-cta-icon {
font-size: 36px;
color: var(--accent-gold);
}
.me-cta-info h4 {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 700;
color: #ffffff;
margin-bottom: 4px;
}
.me-cta-info p {
font-family: var(--font-body);
font-size: 13.5px;
color: rgba(255, 255, 255, 0.7);
}
/* Europe Bottom Banner */
.eu-trust-section {
background-color: var(--primary-color);
border-radius: var(--border-radius-md);
padding: 30px;
color: #ffffff;
text-align: center;
}
.eu-trust-title {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 800;
letter-spacing: 1.5px;
color: var(--accent-gold);
margin-bottom: 25px;
position: relative;
display: inline-block;
padding-bottom: 8px;
}
.eu-trust-title::after {
content: '';
position: absolute;
bottom: 0;
left: 25%;
width: 50%;
height: 1px;
background-color: var(--accent-gold);
}
.eu-features-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
}
.eu-feature-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
}
.eu-feature-icon {
font-size: 26px;
color: var(--accent-gold);
margin-bottom: 4px;
}
.eu-feature-card h5 {
font-family: var(--font-heading);
font-size: 12.5px;
font-weight: 700;
color: #ffffff;
}
.eu-feature-card p {
font-family: var(--font-body);
font-size: 11px;
color: rgba(255, 255, 255, 0.65);
line-height: 1.3;
}
/* Mobile Responsive Adjustments for Markets */
@media (max-width: 768px) {
.market-regions-wrapper {
margin-top: 30px;
gap: 40px;
}
.region-title {
font-size: 26px !important;
}
.region-desc {
font-size: 13.5px !important;
}
.market-countries-list {
gap: 20px;
}
.market-country-card {
flex-direction: column !important;
border-radius: var(--border-radius-md) !important;
}
.market-country-left {
width: 100% !important;
height: 180px !important;
}
.cta-card-image {
display: none !important;
}
.cta-card-content {
width: 100% !important;
padding: 20px !important;
}
.cta-card-content h4 {
font-size: 18px !important;
}
.cta-card-content p {
font-size: 13px !important;
}
.cta-card-buttons {
flex-direction: column !important;
gap: 10px !important;
}
.cta-card-buttons .btn {
width: 100% !important;
font-size: 13px !important;
}
.market-country-right {
padding: 20px !important;
gap: 20px !important;
}
.market-country-name {
font-size: 20px !important;
}
.market-products-badges {
gap: 12px !important;
}
.market-product-badge {
width: 60px !important;
}
.market-product-circle {
width: 52px !important;
height: 52px !important;
}
.market-product-name {
font-size: 10px !important;
}
.market-country-footer {
flex-direction: column !important;
align-items: flex-start !important;
gap: 15px !important;
padding-top: 15px !important;
}
.market-port-info {
font-size: 12.5px !important;
}
.btn-market-view {
width: 100% !important;
justify-content: center !important;
}
.sea-features-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
padding: 20px 15px !important;
}
.sea-feature-card {
align-items: center !important;
}
.sea-feature-text {
text-align: left !important;
}
.me-trust-banner {
flex-direction: column !important;
align-items: flex-start !important;
gap: 15px !important;
padding: 15px 20px !important;
}
.me-trust-arrow {
align-self: flex-end !important;
}
.me-cta-banner {
flex-direction: column !important;
align-items: flex-start !important;
gap: 20px !important;
padding: 20px !important;
}
.me-cta-text {
gap: 15px !important;
}
.me-cta-banner .btn {
width: 100% !important;
}
.eu-features-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.eu-feature-card {
flex-direction: row !important;
align-items: center !important;
text-align: left !important;
gap: 15px !important;
}
.eu-feature-icon {
font-size: 22px !important;
margin-bottom: 0 !important;
}
.eu-feature-card h5 {
font-size: 13px !important;
margin-bottom: 2px !important;
}
/* Premium Products Mobile Styles */
.products-header-flex {
flex-direction: column !important;
text-align: center !important;
gap: 25px !important;
padding: 10px 0 !important;
}
.products-header-content {
max-width: 100% !important;
}
.products-header-title {
font-size: 26px !important;
}
.products-header-desc {
font-size: 13.5px !important;
margin-bottom: 20px !important;
}
.products-header-graphic {
width: 100% !important;
max-width: 220px !important;
margin: 0 auto !important;
}
.products-catalog-grid-premium {
grid-template-columns: 1fr !important;
gap: 25px !important;
max-width: 450px !important;
margin: 25px auto 0 auto !important;
}
.product-catalog-card-premium {
border-radius: 12px !important;
}
.product-card-img-container-inner {
height: 180px !important;
}
.product-card-body-premium {
padding: 25px 15px 20px 15px !important;
}
}
/* ========================================================
* Premium Product Cards Global Styles
* ======================================================== */
.products-catalog-grid-premium {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin-top: 40px;
}
.product-catalog-card-premium {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
overflow: visible; /* To allow category badge icon overflow */
transition: var(--transition-smooth);
position: relative;
}
.product-catalog-card-premium:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: rgba(229, 169, 59, 0.4);
}
.product-card-link-premium {
display: flex;
flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.product-card-img-wrap-premium {
position: relative;
width: 100%;
background-color: #f1f5f9;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.product-card-img-container-inner {
height: 200px;
overflow: hidden;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
width: 100%;
}
.product-card-img-container-inner img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-smooth);
}
.product-catalog-card-premium:hover .product-card-img-container-inner img {
transform: scale(1.06);
}
.product-card-icon-badge-premium {
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--primary-color);
border: 3px solid #ffffff;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
transition: var(--transition-smooth);
}
.product-catalog-card-premium:hover .product-card-icon-badge-premium {
background-color: var(--accent-gold);
transform: translateX(-50%) translateY(-2px);
}
.product-card-icon-badge-premium i {
color: var(--accent-gold);
font-size: 18px;
transition: var(--transition-smooth);
display: flex !important;
align-items: center;
justify-content: center;
line-height: 1 !important;
}
.product-catalog-card-premium:hover .product-card-icon-badge-premium i {
color: #ffffff;
}
.product-card-body-premium {
padding: 35px 25px 25px 25px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
gap: 12px;
}
.product-card-title-premium {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 2px;
letter-spacing: 0.5px;
line-height: 1.2;
}
.product-card-subtitle-premium {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: var(--accent-gold);
display: block;
margin-bottom: 4px;
}
.product-card-desc-premium {
font-family: var(--font-body);
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 8px;
flex-grow: 1;
}
.product-card-btn-wrap-premium {
display: flex;
justify-content: center;
margin-top: 5px;
}
.btn-product-view-premium {
background-color: var(--primary-color);
color: #ffffff;
font-size: 13px;
padding: 8px 24px;
border-radius: 30px;
font-family: var(--font-heading);
font-weight: 700;
border: 1px solid transparent;
transition: var(--transition-smooth);
}
.product-catalog-card-premium:hover .btn-product-view-premium {
background-color: var(--accent-gold);
color: #000000;
}
/* ========================================================
* Premium Services Page Styles
* ======================================================== */
.services-header-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 45px;
padding: 0 10px;
}
.services-main-title {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 800;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 1.5px;
margin: 0;
text-align: center;
}
.services-title-line {
height: 2px;
background-color: var(--primary-color);
width: 120px;
position: relative;
flex-shrink: 0;
}
.services-title-line::after {
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background-color: var(--primary-color);
border-radius: 50%;
}
.services-header-container .services-title-line:first-child::after {
right: 0;
}
.services-header-container .services-title-line:last-child::after {
left: 0;
}
.services-grid-premium {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 20px;
margin-bottom: 40px;
}
.service-card-premium {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
overflow: visible; /* to allow circle badge overflow */
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
border-color 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
border-radius 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
height: 100%;
}
/* Rounded corners animation on hover */
.service-card-premium:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-medium), 0 12px 30px rgba(11, 21, 56, 0.1);
border-color: rgba(229, 169, 59, 0.5);
border-radius: 24px; /* animates corners rounding more */
}
.service-card-img-wrap {
position: relative;
width: 100%;
background-color: #f1f5f9;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
transition: border-radius 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.service-card-premium:hover .service-card-img-wrap {
border-radius: 23px 23px 0 0;
}
.service-card-img-container-inner {
height: 170px;
overflow: hidden;
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
width: 100%;
transition: border-radius 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.service-card-premium:hover .service-card-img-container-inner {
border-radius: 23px 23px 0 0;
}
.service-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.08); /* zooms past built-in white borders */
transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.service-card-premium:hover .service-card-img {
transform: scale(1.15); /* smooth zoom on hover */
}
.service-card-badge {
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background-color: var(--primary-color);
border: 3px solid #ffffff;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
transition: background-color 0.3s ease, transform 0.3s ease;
}
.service-card-premium:hover .service-card-badge {
background-color: var(--accent-gold);
transform: translateX(-50%) translateY(-2px);
}
.service-card-badge i {
color: var(--accent-gold);
font-size: 18px;
transition: color 0.3s ease;
display: flex !important;
align-items: center;
justify-content: center;
line-height: 1 !important;
}
.service-card-premium:hover .service-card-badge i {
color: #ffffff;
}
.service-card-body {
padding: 35px 20px 25px 20px;
text-align: center;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-start;
}
.service-card-title {
font-family: var(--font-heading);
font-size: 15px;
font-weight: 800;
color: var(--primary-color);
margin-bottom: 10px;
letter-spacing: 0.5px;
line-height: 1.3;
}
.service-card-desc {
font-family: var(--font-body);
font-size: 13px;
color: var(--text-muted);
line-height: 1.45;
margin-bottom: 15px;
min-height: 55px;
}
.service-card-bullets {
list-style: none;
padding: 0;
margin: 5px auto 0 auto;
display: inline-block;
text-align: left;
}
.service-card-bullets li {
font-family: var(--font-body);
font-size: 12.5px;
color: var(--text-dark);
margin-bottom: 6px;
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.35;
}
.bullet-check {
color: var(--accent-gold);
font-weight: 900;
flex-shrink: 0;
}
/* ========================================================
* Premium Services Responsive Breakpoints
* ======================================================== */
@media (max-width: 1024px) {
.services-grid-premium {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 600px) {
.services-grid-premium {
grid-template-columns: 1fr !important;
gap: 25px !important;
max-width: 400px !important;
margin: 20px auto 0 auto !important;
}
.services-main-title {
font-size: 20px !important;
}
.services-title-line {
width: 50px !important;
}
}
/* ========================================================
* About Us Page Certifications & Registrations
* ======================================================== */
.about-certs-title-main {
font-family: var(--font-heading);
font-size: 28px;
font-weight: 700;
color: var(--primary-color);
text-align: center;
margin-bottom: 25px;
}
.about-certs-container {
margin-top: 10px;
margin-bottom: 60px;
}
.about-certs-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
margin-top: 25px;
}
.about-cert-card {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-soft);
padding: 30px 20px;
text-align: center;
transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
box-shadow 0.3s cubic-bezier(0.165, 0.84, 0.44, 1),
border-color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.about-cert-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
border-color: var(--accent-gold);
}
.about-cert-icon {
font-size: 36px;
color: var(--accent-gold); /* Gold/orange icon */
transition: color 0.3s ease;
}
.about-cert-card:hover .about-cert-icon {
color: var(--primary-color); /* Navy blue highlight on hover */
}
.about-cert-title {
font-family: var(--font-heading);
font-size: 14px;
font-weight: 800;
color: var(--primary-color);
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.about-cert-desc {
font-family: var(--font-body);
font-size: 12.5px;
color: var(--text-muted);
line-height: 1.45;
margin: 0;
}
/* Responsive styles for about certs */
@media (max-width: 1024px) {
.about-certs-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 600px) {
.about-certs-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
max-width: 380px !important;
margin: 20px auto 0 auto !important;
}
}
/* ==========================================================================
Global Trade Network Map Section Styles
========================================================================== */
.global-trade-network-section {
padding: 60px 0;
background: #f8fafc;
overflow-x: hidden;
}
.trade-network-header {
text-align: center;
margin-bottom: 50px;
}
.trade-network-subtitle {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
letter-spacing: 2px;
color: var(--accent-gold);
text-transform: uppercase;
}
.trade-network-subtitle .sub-line {
display: inline-block;
width: 30px;
height: 1px;
background-color: var(--accent-gold);
}
.trade-network-title {
font-size: 32px;
font-weight: 800;
color: var(--primary-color);
margin: 12px 0 8px 0;
line-height: 1.25;
}
.trade-network-tagline {
font-size: 16px;
color: var(--text-muted);
font-weight: 500;
}
.trade-network-divider {
width: 60px;
height: 3px;
background-color: var(--accent-gold);
margin: 20px auto 0 auto;
}
/* Main Container (Full Width Map Layout) */
.trade-network-container {
display: block;
max-width: 1200px;
margin: 0 auto 40px auto;
}
/* Center Map Panel styling */
.map-center-panel {
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-soft);
display: flex;
flex-direction: column;
width: 100%;
}
.map-viewport {
position: relative;
width: 100%;
aspect-ratio: 2 / 1;
overflow: hidden;
background: #eaeefd;
}
.map-inner-container {
position: relative;
width: 100%;
height: 100%;
}
.map-background-img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.95;
}
/* SVG Overlay for Trade routes */
.map-svg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}
.trade-route {
fill: none;
stroke-linecap: round;
stroke-width: 2;
opacity: 0.65;
stroke-dasharray: 8 4;
transition: opacity 0.4s ease, stroke-width 0.4s ease, stroke-dashoffset 0.4s ease;
}
.route-pakistan {
stroke: url(#grad-pk);
}
.route-thailand {
stroke: url(#grad-th);
}
/* Highlight styles for paths */
.trade-route.active {
opacity: 1;
stroke-width: 3.5;
stroke-dasharray: 8 4;
animation: flow-route 12s linear infinite;
}
.route-pakistan.active {
filter: drop-shadow(0 0 3px rgba(16, 185, 129, 0.8));
}
.route-thailand.active {
filter: drop-shadow(0 0 3px rgba(249, 115, 22, 0.8));
}
@keyframes flow-route {
to {
stroke-dashoffset: -200;
}
}
/* HTML Markers Overlays */
.map-marker {
position: absolute;
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 3;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.map-marker:hover,
.map-marker.active {
transform: translate(-50%, -50%) scale(1.15);
z-index: 5;
}
/* Hub Markers (Pakistan & Thailand) */
.hub-marker {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.marker-dot {
width: 24px;
height: 24px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
z-index: 2;
border: 2px solid;
font-size: 11px;
}
.border-green { border-color: #10b981; }
.border-orange { border-color: #f97316; }
.marker-pulse {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
width: 24px;
height: 24px;
border-radius: 50%;
z-index: 1;
pointer-events: none;
animation: pulse-glow 2s infinite;
}
.bg-green { background-color: rgba(16, 185, 129, 0.4); }
.bg-orange { background-color: rgba(249, 115, 22, 0.4); }
@keyframes pulse-glow {
0% {
transform: translate(-50%, 0) scale(0.9);
opacity: 0.8;
}
100% {
transform: translate(-50%, 0) scale(2.4);
opacity: 0;
}
}
.marker-label {
font-family: var(--font-heading);
font-size: 9.5px;
font-weight: 800;
color: #ffffff;
padding: 3px 8px;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
letter-spacing: 0.5px;
white-space: nowrap;
}
.label-green { background: #065f46; border: 1px solid #10b981; }
.label-orange { background: #9a3412; border: 1px solid #f97316; }
/* Interactive Overlay Cards for destinations */
.map-overlay-card {
position: absolute;
display: flex;
align-items: center;
gap: 8px;
background: #ffffff;
border: 1.5px solid #cbd5e1;
border-radius: var(--border-radius-md);
padding: 6px 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
z-index: 4;
transition: var(--transition-smooth);
transform: translateY(-50%);
min-width: 120px;
cursor: pointer;
}
.map-overlay-card img {
width: 22px;
height: 14px;
object-fit: cover;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.map-overlay-card span {
font-family: var(--font-heading);
font-size: 11.5px;
font-weight: 700;
color: var(--text-dark);
}
.map-overlay-card:hover,
.map-overlay-card.active {
transform: translateY(-50%) scale(1.08);
box-shadow: var(--shadow-medium);
z-index: 5;
}
.map-overlay-card.left-card:hover,
.map-overlay-card.left-card.active {
border-color: #10b981;
}
.map-overlay-card.right-card:hover,
.map-overlay-card.right-card.active {
border-color: #f97316;
}
.map-overlay-card.bottom-card:hover,
.map-overlay-card.bottom-card.active {
border-color: #10b981;
}
/* Dim states during hub highlight filter */
.map-inner-container.dim-inactive .trade-route:not(.active) {
opacity: 0.03;
}
.map-inner-container.dim-inactive .map-overlay-card:not(.active) {
opacity: 0.3;
}
.map-inner-container.dim-inactive .hub-marker:not(.active) {
opacity: 0.45;
}
/* Map Interactive Tooltip styling */
.map-tooltip {
position: absolute;
display: none;
background: rgba(11, 21, 56, 0.98);
border: 1.5px solid var(--accent-gold);
color: #ffffff;
border-radius: 8px;
padding: 10px 12px;
width: 230px;
box-shadow: var(--shadow-medium);
pointer-events: none;
z-index: 10;
transition: opacity 0.2s ease;
}
.tooltip-header {
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding-bottom: 5px;
margin-bottom: 6px;
}
.tooltip-flag {
width: 20px;
height: 13px;
object-fit: cover;
border-radius: 2px;
}
.tooltip-title {
font-family: var(--font-heading);
font-weight: 700;
font-size: 13px;
color: var(--accent-gold);
letter-spacing: 0.5px;
}
.tooltip-body {
font-family: var(--font-body);
font-size: 11.5px;
line-height: 1.4;
}
.tooltip-body p {
margin-bottom: 4px;
}
.tooltip-body ul {
list-style: none;
padding-left: 0;
margin-top: 2px;
}
.tooltip-body li {
position: relative;
padding-left: 12px;
margin-bottom: 2px;
color: rgba(255,255,255,0.9);
}
.tooltip-body li::before {
content: '•';
color: var(--accent-gold);
position: absolute;
left: 0;
font-weight: bold;
}
@media (max-width: 768px) {
.map-tooltip {
width: 180px;
padding: 6px 8px;
border-radius: 6px;
}
.tooltip-header {
gap: 6px;
padding-bottom: 4px;
margin-bottom: 4px;
}
.tooltip-flag {
width: 16px;
height: 10px;
}
.tooltip-title {
font-size: 11.5px;
}
.tooltip-body {
font-size: 10.5px;
line-height: 1.3;
}
}
/* Premium Logistics Benefits Ribbon */
.map-services-ribbon {
background: var(--secondary-color);
border-radius: var(--border-radius-lg);
padding: 22px 30px;
border-top: 3px solid var(--accent-gold);
box-shadow: var(--shadow-medium);
margin-top: 30px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ribbon-title {
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
padding-bottom: 10px;
}
.ribbon-title h4 {
font-family: var(--font-heading);
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,0.7);
letter-spacing: 2px;
margin: 0;
}
.ribbon-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
}
.ribbon-item {
display: flex;
align-items: center;
gap: 12px;
}
.ribbon-icon {
font-size: 20px;
color: var(--accent-gold);
background: rgba(255, 255, 255, 0.05);
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(229, 169, 59, 0.15);
}
.ribbon-text {
display: flex;
flex-direction: column;
}
.ribbon-text strong {
font-size: 12.5px;
color: #ffffff;
font-weight: 600;
}
.ribbon-text span {
font-size: 11px;
color: var(--text-muted);
}
/* ==========================================================================
Responsive Map Media Queries
========================================================================== */
@media (max-width: 1200px) {
.ribbon-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
@media (max-width: 991px) {
.map-overlay-card {
padding: 4px 8px;
min-width: 100px;
gap: 6px;
}
.map-overlay-card span {
font-size: 10px;
}
}
@media (max-width: 768px) {
.trade-network-title {
font-size: 26px;
}
.map-viewport {
overflow: hidden; /* Scale instead of scroll */
aspect-ratio: auto;
}
.map-inner-container {
position: absolute;
top: 0;
left: 0;
}
.ribbon-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.trade-network-title {
font-size: 22px;
}
.ribbon-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.ribbon-item {
padding: 6px 12px;
background: rgba(255,255,255,0.02);
border-radius: 8px;
}
}
/* ==========================================================================
Product Detail Gallery Styling
========================================================================== */
.gallery-thumbs {
display: flex;
gap: 12px;
margin-top: 15px;
justify-content: flex-start;
flex-wrap: wrap;
}
.gallery-thumb {
width: 80px;
height: 60px;
border-radius: 4px;
overflow: hidden;
border: 2px solid #cbd5e1;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0.7;
background-color: #f8fafc;
}
.gallery-thumb:hover {
opacity: 1;
border-color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.gallery-thumb.active {
opacity: 1;
border-color: var(--accent-gold);
box-shadow: 0 0 0 2px rgba(229, 169, 59, 0.2);
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.gallery-thumb:hover img {
transform: scale(1.05);
}
.gallery-main-img {
width: 100%;
height: 380px;
border-radius: var(--border-radius-md);
overflow: hidden;
background-color: #f8fafc;
border: 1px solid #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-main-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}