/* Luxury Partner Section Styles */
.luxury-partner-section {
background: transparent;
}
.luxury-partner-card {
background: rgba(6, 16, 31, 0.85);
border: 2px solid var(--gold);
border-radius: 18px;
box-shadow: 0 8px 32px rgba(0,0,0,0.45);
padding: 2.5rem 1.5rem 2.2rem 1.5rem;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.luxury-partner-title {
font-family: 'Times New Roman', Times, serif;
font-size: 2.3rem;
font-weight: 700;
background: linear-gradient(90deg, #c5a473 0%, #fffbe6 50%, #9a7e53 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 2px;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.luxury-partner-title-underline {
width: 80px;
height: 4px;
background: linear-gradient(90deg, #c5a473 0%, #fffbe6 50%, #9a7e53 100%);
border-radius: 2px;
margin-bottom: 1.5rem;
}
.luxury-partner-card .partner-logo-slider-wrapper {
background: rgba(6, 16, 31, 0.85);
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
padding: 1.2rem 0.5rem 1.2rem 0.5rem;
}
.luxury-partner-card .partner-logo-slider {
gap: 56px;
}
.luxury-partner-card .partner-logo-item {
background: transparent;
border-radius: 10px;
min-width: 140px;
height: 80px;
padding: 0 10px;
box-shadow: none;
border: none;
filter: grayscale(0.15) brightness(1.05);
transition: filter 0.2s, box-shadow 0.2s;
}
.luxury-partner-card .partner-logo-item img {
max-height: 70px;
max-width: 120px;
filter: drop-shadow(0 2px 8px rgba(197,164,115,0.08));
}
.luxury-partner-card .partner-logo-item:hover {
filter: grayscale(0) brightness(1.15) drop-shadow(0 2px 12px #c5a47388);
}
@media (max-width: 768px) {
.luxury-partner-card {
padding: 1.2rem 0.2rem 1.2rem 0.2rem;
}
.luxury-partner-title {
font-size: 1.3rem;
}
.luxury-partner-title-underline {
width: 40px;
height: 3px;
}
.luxury-partner-card .partner-logo-slider {
gap: 18px;
}
.luxury-partner-card .partner-logo-item {
min-width: 70px;
height: 40px;
padding: 0 4px;
}
.luxury-partner-card .partner-logo-item img {
max-height: 30px;
max-width: 50px;
}
}
/* Partner Logo Scroller Styles */
.partner-logo-section {
background: transparent;
padding: 40px 0 30px 0;
}
.partner-logo-slider-wrapper {
overflow: hidden;
width: 100%;
position: relative;
margin: 0 auto;
max-width: 100vw;
}
.partner-logo-slider {
display: flex;
align-items: center;
gap: 48px;
animation: partner-scroll 20s linear infinite;
will-change: transform;
}
.partner-logo-item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
height: 90px;
min-width: 160px;
padding: 0 16px;
filter: grayscale(0.2) brightness(0.95);
transition: filter 0.2s;
}
.partner-logo-item img {
max-height: 80px;
max-width: 140px;
width: auto;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
}
.partner-logo-item:hover {
filter: grayscale(0) brightness(1.1);
}
@keyframes partner-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.partner-logo-slider {
gap: 24px;
}
.partner-logo-item {
min-width: 100px;
height: 60px;
}
.partner-logo-item img {
max-height: 50px;
max-width: 80px;
}
}
/*
========================================
Home Page Styles - Gunawangsa Tidar
========================================
*/
/* --- Import Elegant Fonts (Recommended) --- */
/* For the best result, add this to your main in layouts/app.blade.php */
/*
*/
:root {
--gold: #c5a473;
--gold-dark: #9a7e53;
--black: #121212;
--card-bg: rgba(6, 16, 31, 0.85);
--light-gray: #e0e0e0;
--dark-gray: #cccccc;
--border-color: #333333;
}
/* --- General Page Styling --- */
/* Add this class to your main container in home.blade.php for better scoping */
/* e.g., */
.home-page-content {
padding-top: 3rem;
padding-bottom: 4rem;
}
/* --- Header Section --- */
.home-header {
margin-bottom: 4rem;
}
.home-header h1 {
font-family: 'Times New Roman', Times, serif;
color: var(--gold);
font-size: 3.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 1rem;
}
.home-header .lead {
font-family: 'Montserrat', sans-serif;
color: var(--dark-gray);
font-size: 1.25rem;
letter-spacing: 1px;
}
/* --- Intro Text & Primary Button --- */
.intro-text p {
font-size: 1.1rem;
line-height: 1.8;
color: var(--light-gray);
text-align: justify;
margin-bottom: 1.5rem;
}
/* Custom Gold Button (replaces .btn-orange) */
.btn-gold {
background-color: var(--gold);
color: var(--black);
border: 1px solid var(--gold);
padding: 0.75rem 2rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
border-radius: 4px;
}
.btn-gold:hover, .btn-gold:focus {
background-color: var(--gold-dark);
color: white;
border-color: var(--gold-dark);
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
/* --- Contact Info Box --- */
.contact-info-box {
background-color: rgba(6, 16, 31, 0.85);
border: 1px solid var(--border-color);
border-top: 3px solid var(--gold);
border-radius: 8px;
padding: 2.5rem !important; /* Use !important to override Bootstrap's p-4 */
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
/* Don't force full height or sticky here; sticky is applied via .sticky-contact with a top offset */
}
.contact-info-box h3 {
font-family: 'Times New Roman', Times, serif;
color: var(--gold);
font-size: 1.8rem;
letter-spacing: 1px;
}
/* Styling for each info item (icon + text) */
.contact-item {
align-items: flex-start !important; /* Override Bootstrap alignment for better multi-line text */
justify-content: flex-start !important;
text-align: left !important;
}
.contact-item i.fas {
color: var(--gold-dark);
font-size: 1.2rem;
margin-top: 5px !important;
width: 25px; /* Ensures consistent alignment */
}
.contact-item strong {
color: var(--light-gray);
}
.contact-item p {
color: var(--dark-gray);
line-height: 1.6;
}
.contact-item a {
color: var(--light-gray) !important;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-item a:hover {
color: var(--gold) !important;
text-decoration: underline;
}
/* Sticky Marketing Office box (desktop/tablet) */
@media (min-width: 768px) {
.sticky-contact {
position: sticky;
top: 70px; /* match navbar height */
z-index: 5;
}
}
/* Custom Outline Button */
.btn-outline-gold {
color: var(--gold);
border-color: var(--gold);
padding: 0.6rem 1.5rem;
transition: all 0.3s ease;
}
.btn-outline-gold:hover, .btn-outline-gold:focus {
background-color: var(--gold);
color: var(--black);
border-color: var(--gold);
}
/* --- Feature Cards Section --- */
.feature-cards-section {
margin-top: 5rem;
}
.feature-card {
background-color: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
height: 100%;
transition: all 0.3s ease;
padding: 1rem;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(0,0,0,0.4);
border-color: var(--gold-dark);
}
.feature-card .card-body {
padding: 2rem;
}
.feature-card h3 {
font-family: 'Times New Roman', Times, serif;
color: var(--gold);
font-size: 1.6rem;
margin-bottom: 1rem;
}
.feature-card p {
color: var(--dark-gray);
line-height: 1.7;
}
/* --- Responsive Adjustments --- */
@media (max-width: 767.98px) {
.home-header {
margin-bottom: 3rem;
}
.home-header h1 {
font-size: 2.5rem;
}
.intro-text {
margin-bottom: 2.5rem;
}
.intro-text, .contact-info-box {
text-align: center;
}
.contact-item {
justify-content: center;
text-align: left;
}
}
@media (min-width: 1200px) {
.sticky-contact {
position: sticky;
top: 70px; /* match navbar height */
z-index: 5;
}
/* Add more space between main content rows */
.home-page-content .row:first-of-type {
margin-bottom: 8rem; /* Large spacing after intro/contact row */
}
/* Custom layout: left 60%, right 40% */
.home-page-content .row:first-of-type {
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
}
.home-page-content .col-md-6.intro-text {
flex: 0 0 60%;
max-width: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-right: 2rem;
}
.home-page-content .col-md-6:not(.intro-text) {
flex: 0 0 40%;
max-width: 40%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
margin-bottom: 130px;
}
.intro-text {
text-align: left;
width: 100%;
}
.intro-text p {
text-align: justify;
max-width: 100%;
}
}
@media (min-width: 1500px) {
.home-page-content .col-md-6.intro-text {
flex: 0 0 65%;
max-width: 65%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-right: 2rem;
}
.home-page-content .col-md-6:not(.intro-text) {
flex: 0 0 35%;
max-width: 35%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-start;
margin-bottom: 130px;
}
}