/* ---------- Global Styles ---------- */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* ---------- Layout ---------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
}

/* ---------- Component Styles ---------- */
.slider-container {
    position: relative;
    overflow: hidden;
}


body {
    font-family: Arial, sans-serif;
    background-color: milky white; /* Milky WhileBackground color #FFD700 = golden colour */
    color: #333;
    scroll-behavior: smooth; /* Smooth scrolling */
}

/* Top Header Section */
.top-header {
    background-color: #000;
    color: #FFD700; /* Golden color */
    padding: 10px 0;
}

.site-title {
    font-family: 'Arial', serif;
    font-size: 15px;
}

.contact-info a {
    color: #FFD700;
    text-decoration: none;
}

.contact-info a:hover {
    text-decoration: underline;
}

/* Navigation Section */
.navbar-light .navbar-nav .nav-link {
    color: #000;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #FFD700;
}

/* Main Header Section */
.main-header {
    padding: 50px 0;
    background-color: #000; 
    color: #000;
}

.main-header h1 {
    font-family: 'Georgia', serif;
    font-size: 36px;
	color: #FFD700; /* Golden color */
}


.slogan {
    font-size: 24px;
    font-style: italic;
	color: #FFD700; /* Golden color */
}

/* Slider Section */
.carousel-caption {
    background-color: rgba(0, 0, 0, 0.5); /* Transparent background */
}

.carousel-caption-custom {
    position: absolute;
    bottom: 5in; /* 6 inches from the bottom */
    width: 100%;
    text-align: center;
    color: #fff;
}

.carousel-caption-custom .background {
    background: rgba(0, 0, 0, 0.5); /* Light dark transparent background */
    padding: 20px;
    border-radius: 20px;
    display: inline-block;
}


/* About Us Section */
.about-section {
    padding: 50px 0;
}

.about-text {
    animation: wave 2s infinite;
}

@keyframes wave {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Products, Hot Sellers, and New Arrivals Sections */
.products-section,
.hot-sellers-section,
.new-arrivals-section
.product-section {
    padding: 50px 0;
}

.products-section .img-fluid,
.hot-sellers-section .img-fluid,
.new-arrivals-section .img-fluid,
.product-section .img-fluid:hover {
    border: 2px solid #FFD700; /* Golden border */
    cursor: pointer;
    transition: transform 0.3s;
}

.products-section .img-fluid:hover,
.hot-sellers-section .img-fluid:hover,
.new-arrivals-section .img-fluid:hover, 
.product-section .img-fluid:hover {
    transform: scale(1.05);
}

/* Testimonials Section */
.testimonials-section {
    padding: 50px 0;
    background-color: #000;
    color: #FFD700; /* Golden color */
}

.testimonial {
    text-align: center;
    font-size: 20px;
}

/* Team Section */
.team-section {
    padding: 50px 0;
}

.team-member {
    text-align: center;
    margin-bottom: 30px;
}

.team-member img {
    border-radius: 50%;
    border: 2px solid #FFD700; /* Golden border */
    transition: transform 0.3s;
}

.team-member img:hover {
    transform: scale(1.05);
}

/* Contact Us Section */
.contact-section {
    padding: 50px 0;
}

.contact-box {
    border: 1px solid #FFD700; /* Golden border */
    padding: 20px;
    margin-bottom: 20px;
}

.contact-box h5 {
    color: #000;
}

.contact-box a {
    color: #FFD700;
}

.social-links a:hover {
    text-decoration: underline;
}

/* Footer Section */
.footer-section {
    padding: 20px 0;
    background-color: #000;
    color: #FFD700; /* Golden color */
}


/* ---------- Media Queries (Responsive Styles) ---------- */

/* Global image styles - Applies to all screens */
img {
    max-width: 100%; /* Ensures images do not exceed their container's width */
    height: auto;    /* Maintains the aspect ratio */
    display: block;  /* Removes default inline spacing */
}

/* Desktop (large screens) */
@media (min-width: 1025px) {
    .slider-image {
        width: 1920px; /* Full width for large screens */
        height: 432px; /* Example height; adjust according to your design */
    }
}

/* Laptops */
@media (min-width: 769px) and (max-width: 1024px) {
    .slider-image {
        width: 1280px; /* Adjusted width for laptops */
        height: 320px; /* Adjust height while maintaining aspect ratio */
    }
}

/* Tablets */
@media (min-width: 481px) and (max-width: 768px) {
    .slider-image {
        width: 768px; /* Width suitable for tablets */
        height: 432px; /* Height for maintaining 16:9 aspect ratio */
    }
}

/* Mobile Devices */
@media (max-width: 480px) {
    .slider-image {
        width: 100%;  /* Full width to fit mobile screens */
        height: auto; /* Auto height to maintain aspect ratio */
    }
}