/* General Styles */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0a0f24; /* Dark royal blue */
  color: #f6e58d; /* Golden */
}

a {
  color: #f6e58d;
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}

/* Utility Styles */
img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 8%;
}

h6:hover{
  color: white;
}
/* Header Section */
.header_section {
  background-color: #14213d; /* Slightly lighter dark royal blue */
  padding: 5px 0;
}
.navbar {
  border: none;
}
.navbar-brand img { /* Make logos fit the dark theme */
  max-height: 50px;
}
.custom_menu-btn span {
  background-color: #f6e58d;
}
.overlay {
  background-color: #14213d;
}
.overlay-content a {
  color: #f6e58d;
  font-weight: bold;
}

/* Slider Section */
.slider_section {
  position: relative;
  background: url('/images/main_bg.jpg') no-repeat center center/cover; /* Add background image */
  text-align: start;
  padding: 10%;
}
.slider_bg_box {
  display: none; /* Hide img element as background is set via CSS */
}
.detail-box h1 {
  color: #f6e58d;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}
.detail-box p {
  color: #fffffe;
  font-size: 18px;
  margin-bottom: 20px;
}
.slider-link {
  background-color: #f6e58d;
  color: #0a0f24;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  display: inline-block;
}
.slider-link:hover {
  background-color: #e5c071;
  color: #fffffe;
}

/* Shop Section */
.shop_section {
  background-color: #0a0f24;
  padding: 5px 2px;
}
.heading_container h2 {
  color: #f6e58d;
  text-align: center;
  margin-bottom: 4px;
}
.shop_section .box-container {
  display: contents;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.box {
  background-color: #14213d;
  border: 1px solid #f6e58d;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
  transition: transform 0.3s;
  max-width: 90%;
  width: 100%;
}
.box:hover {
  transform: scale(1.05);
}
.box img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 15px;
}
.box h5 {
  color: #f6e58d;
  margin-bottom: 10px;
}
.box p {
  color: #e5c071;
  font-size: 16px;
  margin-bottom: 15px;
}
.box .btn {
  color: #f6e58d;
  border-color: #f6e58d;
  padding: 8px 15px;
  border-radius: 5px;
}
.box .btn:hover {
  background-color: #f6e58d;
  color: #0a0f24;
}

/* About Section */
.about_section {
  background-color: #14213d;
  padding: 50px 20px;
}
.about_section .detail-box {
  text-align: left;
  margin: 0 auto;
  max-width: 800px;
}
.about_section .detail-box h2 {
  color: #f6e58d;
  margin-bottom: 20px;
}
.about_section p {
  color: #e5c071;
  font-size: 18px;
}

/* Offer Section */
.offer_section {
  background-color: #0a0f24;
  padding: 50px 20px;
}
.offer_section .offer-box1, .offer_section .offer-box2 {
  position: relative;
  text-align: center;
  margin-bottom: 30px;
}
.offer-box1 img, .offer-box2 img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.offer-box1 .detail-box, .offer-box2 .detail-box {
  background-color: rgba(20, 33, 61, 0.8);
  color: #f6e58d;
  padding: 20px;
  border-radius: 8px;
  display: inline-block;
}

/* Blog Section */
.blog_section {
  background-color: #14213d;
  padding: 50px 20px;
}
.blog_section h2 {
  color: #f6e58d;
  text-align: center;
  margin-bottom: 40px;
}
.blog_section .box-container {
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.blog_section .box {
  background-color: #0a0f24;
  border: 1px solid #f6e58d;
  border-radius: 8px;
  text-align: center;
  padding: 20px;
  max-width: 100%;
  width: 100%;
}
.blog_section .box .img-box img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 15px;
}
.blog_section .box h5 {
  color: #f6e58d;
  margin-bottom: 10px;
}
.blog_section .box p {
  color: #e5c071;
  font-size: 16px;
  margin-bottom: 10px;
}

/* Info Section */
.info_section {
  background-color: #0a0f24;
  padding: 50px 20px;
}
.info_links h4, .info_detail h4, .info_contact h4 {
  color: #f6e58d;
  margin-bottom: 9px;
}
.info_links a, .info_contact a {
  color: #e5c071;
}
.info_links a:hover, .info_contact a:hover {
  text-decoration: none;
}
.social_box img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}
.social_box a {
  color: #f6e58d;
  font-size: 20px;
  margin-right: 15px;
}

/* Footer Section */
footer {
  background-color: #14213d;
  color: #e5c071;
  padding: 20px;
  text-align: center;
}