/* ============================================================================
  🎨 Global Styles
  - Sets base font and background color for the entire website.
  - You can modify body background or font-family globally here.
============================================================================
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
============================================================================
  🧭 Header Section (Currently Commented Out)
  - To enable and customize header styles, remove the comment block below.
  - Customize navigation background, title colors, hover effects, mobile menu, etc.
============================================================================

.menu-background       => background color of the top navigation bar
.menu-main-title       => main title in header, color and hover behavior
.menu-item             => individual menu items with text-transform and hover styles
#mobile-menu           => mobile dropdown background
#hamburger-btn         => color of hamburger toggle icon


============================================================================
  🧩 Main Section - Card Components
  - These styles define the appearance of cards (e.g. product cards, blog cards).
  - Customize background, title, text, price section, and button appearance.
============================================================================
.card                => sets card background color
.card-title          => defines color of the card title
.card-description    => paragraph or short text under title
.card-price          => background color of the price label
.card-btn            => styling of call-to-action button (e.g. "Buy Now")

============================================================================
  🦶 Footer Section
  - Controls styles for footer background, titles, descriptions, and email input.
  - Adjust footer subscribe button and social icons section.
============================================================================
.footer               => overall footer background and text color
.footer-title         => main headings inside footer
.footer-description   => descriptive text
.input-email          => background color of email input field
.footer-btn-subscribe => styling for subscribe button
.footer-bottom-social => color of social media icons/text in footer bottom */

/* Styles code  */
/* ============================== Header ============================== */
body {
  background-color: #e0e0e0;
}
/* .menu-background {
  background: #4e2094;
}
.menu-main-title {
  color: rgb(255, 95, 215);
}
.menu-main-title:hover {
  color: rgb(213, 221, 228);
}
.menu-item {
  color: rgb(192, 160, 255);
  text-transform: capitalize;
}
.menu-item:hover {
  color: rgb(213, 221, 228);
}
#mobile-menu {
  background: #e1e2e1;
}
#hamburger-btn {
  color: rgb(135, 145, 222);
} */
/* ============================== Main ============================== */
/* .card{
  background: #2b0131;
}
.card-title{
  color: rgb(152, 77, 219);
}
.card-description{
  color: rgb(155, 155, 155);
}
.card-price{
color: rgb(105, 224, 105);
}
.card-btn{
  background: rgb(81, 30, 165);
  color: rgb(255, 160, 215);
}
.card-btn:hover{
  background: rgb(80, 10, 193);
  color: rgb(241, 192, 221);
} */

/* ============================== Footer ============================== */
/* .footer {
  background: #180238;
  color: #cecece;
}
.footer-title {
  color: #713ac4;
}
.footer-description {
  color: rgb(147, 133, 205);
}
.footer-item-title {
  color: rgb(186, 158, 224);
}
.footer-item {
  color: rgb(210, 210, 210);
}
.input-email {
  background: #471295;
}
.footer-btn-subscribe {
  background: #711cef;
}
.copyright {
  color: rgb(199, 199, 199);
}
.footer-bottom-social {
  color: rgb(215, 146, 240);
} */

/* Type Writer */
#KIUI-typewriter {
  color: rgb(68, 68, 68);
  margin: 4rem;
  margin-inline: auto;
  font-size: 2rem;
  text-align: center;
  height: 4rem;
}