/* Import Poppins and Roboto fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");


/* Styling for the header logo */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  font-family: "Poppins", sans-serif;
  background-color:white ;
}

.navbar {
    padding: 0.2rem;
    font-family: "Inter", "Segoe UI", sans-serif;
    position: absolute;
    width: 100%;
}

/* subtle shadow already added via class */
.navbar-light {
    background-color: #ffffff;
}

/* =========================
   LOGO
========================= */
.navbar-brand img {
  
    object-fit: contain;
}

@media (max-width: 768px) {
    .navbar-brand img {
        height: 34px;      /* smaller on mobile */
    }
}

/* =========================
   NAV LINKS
========================= */
.navbar-nav .nav-link {
    color: #1f2933;        /* deep neutral */
    font-weight: 500;
    padding: 0.6rem 1rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #1e3a8a;        /* rich cooperative blue */
}

/* =========================
   DROPDOWN
========================= */
.dropdown-menu {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.dropdown-item {
    font-size: 0.95rem;
    padding: 0.55rem 1.25rem;
    color: #111827;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
    color: #1e3a8a;
}

/* =========================
   RIGHT SIDE LINKS
========================= */
.navbar-nav.ms-auto .nav-link {
    font-weight: 500;
}

/* Icons */
.navbar-nav .fa-user {
    font-size: 1rem;
}

/* =========================
   MOBILE TOGGLER
========================= */
.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* =========================
   COLLAPSE (MOBILE)
========================= */
@media (max-width: 991px) {
    .navbar-nav {
        text-align: center;
    }

    .dropdown-menu {
        text-align: center;
    }
}

nav img{
  width: 120px;
  cursor: pointer;
  height: 55px;
  padding: 5px;
  
}


.navbar-nav .nav-item .nav-link:hover {

  color: green;
  font-weight: 700;
  
}

.navbar-nav .nav-item .nav-link {

  color: #2B2B2B;
  font-size: 14px;
  font-weight: 700;

}
/* =========================
   MEGA DROPDOWN
========================= */
.mega-dropdown {
    width: 100%;
    left: 0;
    right: 0;
    padding: 1.5rem 0;
    border-radius: 0;
    border-top: 3px solid #1e3a8a; /* rich blue */
}

/* Remove default dropdown spacing */
.mega-links .dropdown-item {
    padding: 0.5rem 0;
    font-weight: 500;
    color: #111827;
}

.mega-links .dropdown-item:hover {
    background: none;
    color: #1e3a8a;
    text-decoration: underline;
}

/* Image styling */
.mega-image {
    width: 100%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


/* Mobile behavior */
@media (max-width: 991px) {
    .mega-dropdown {
        padding: 1rem;
    }
}
.hero-section {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(2px) brightness(0.95);
    opacity: 0;
    animation: fadeSlides 16s infinite;
}

.hero-slideshow .slide:nth-child(1) { animation-delay: 0s; }
.hero-slideshow .slide:nth-child(2) { animation-delay: 4s; }
.hero-slideshow .slide:nth-child(3) { animation-delay: 8s; }
.hero-slideshow .slide:nth-child(4) { animation-delay: 12s; }

/* Fade animation */
@keyframes fadeSlides {
    0% { opacity: 0; }
    10% { opacity: 1; }
    25% { opacity: 1; }
    35% { opacity: 0; }
    100% { opacity: 0; }
}

/* Hero Text */
.hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    max-width: 900px;
    padding: 0 1rem;
}

.welcome-text {
    font-size: 3rem;
    font-weight: 800;
    animation: flashText 2s infinite;
    text-shadow: 3px 3px 20px rgba(0,0,0,0.7);
}

.sub-text {
    font-size: 1.25rem;
    margin-top: 1rem;
    text-shadow: 2px 2px 15px rgba(0,0,0,0.6);
}

@keyframes flashText {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0.3; }
}

@media (max-width: 768px) {
    .welcome-text { font-size: 2rem; }
    .sub-text { font-size: 1rem; }
}
.about-section {
    min-height: 100vh; /* full viewport height */
    display: flex;
    align-items: center; /* vertically center the row */
}

.about-section .container {
    height: 100%;
}

.about-section .row {
    height: 100%;
    display: flex;
    align-items: stretch; /* make columns full height */
}

.about-section .col-lg-6 {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* spreads text vertically */
    padding: 40px; /* optional padding inside column */
}
.about-section .about-title {
    font-size: 2rem;
    line-height: 1.2;
    color: #1A1A1A; /* slightly darker for better contrast */
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
    letter-spacing: 1px; /* adds elegance */
    margin-bottom: 15px;
}
.hero-stats {
  background-color: #f8f9fa; /* soft white/gray background */
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1A1A1A;
}

.stat-label {
  font-size: 1rem;
  font-weight: 500;
  color: #555;
  margin-top: 5px;
}


.about-section .about-subtitle {
    font-size: 1.5rem;
    margin: 20px 0;
}

.about-section .about-text {
    font-size: 1.2rem;
    flex-grow: 1; /* makes text expand to fill space */
}

.about-section .comp_btn {
    margin-top: 20px;
}

.about-section .comp_btn a {
    padding: 12px 24px;
    background: #007bff; /* adjust color */
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
}


.coop-info-section {
    background: #f9f7f5;
}

.coop-card {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    flex-direction: column;
    height: 100%;
    border-radius: 0;
}

.coop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.coop-card img {
    border-radius: 0;
}

.coop-text h6 {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #007bff;
}

.coop-text p {
    font-size: 0.95rem;
    color: #333;
}

@media (max-width: 768px) {
    .coop-card img {
        height: 150px;
    }
}



.btn-primary {
    background-color: #1e5631;
    border-color: #1e5631;
    color: #ffffff;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.btn-primary:hover {
    background-color: #145028;
    border-color: #145028;
}

.supplier-registration img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

.supplier-instructions {
    margin-top: 20px;
    padding-left: 20px;
    font-size: 1rem;
}

.supplier-instructions li {
    margin-bottom: 10px;
}





.form-group label {
  color: black; /* Set label text color to black */
}

.modal-title {
  color:#0A0068;
}
.category-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.category-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.category-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

.category-overlay h3 {
    font-size: 1.8rem;
    font-weight: bold;
}

.category-overlay p {
    font-size: 1rem;
    margin-top: 8px;
}

.top-banner {
  background: linear-gradient(135deg,  rgb(0, 0, 82), purple, rgb(0, 0, 82)); /* Deep blue to black gradient */
  color: goldenrod; /* White text for contrast */
  text-align: center; /* Centered text */
  padding: 5px 20px; /* Vertical padding */
  font-family: Arial, sans-serif; /* Clean, modern font */

  font-size: 0.85rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  position: fixed;
  z-index: 1000;
  margin-top: 0;
  width:100% ;


}

.top-banner a {
/* Gold color for the phone number link */
  text-decoration: none; /* Remove underline from the link */
  color: white;
   background-color: transparent;
  margin-left: 58%;
   margin-top: 8px;
   width: 100%;
}

.top-banner p {
  text-decoration: none; /* Remove underline from the link */
  color: white;
   background-color: transparent;
   margin-top: 8px;
   width: 100%;
}

.top-banner a:hover {
  text-decoration: underline; /* Underline on hover for clarity */
}
.sidebar a{

  color: powderblue;


}
.sidebar{

  background-color: #0A0068;
}

.nav-link a{
  background-color: transparent;
}

.nav-item{
  animation: none;
  transition: none;
  background-color: transparent;
  transform: none;

}
.nav-link {
  background-color: transparent;
}

.nav-link:hover{
  animation: none;
  transition: none;
  background-color: transparent;
  transform: none;
  color:brown;


}

.navbar-nav a {
  display: flex;
  flex-direction: row;
  align-items: center; /* Center items vertically */
  padding: 5px;
  font-size: 12px;
}
.navbar-nav a i{
  display: flex;
  flex-direction: row;
  align-items: center; /* Center items vertically */
  padding: 5px;
  font-size: 10px;
}

/* Add the retro pixel font */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Styling for the logo container */
.logo {
  padding: 3px; /* Space around the logo */
  border-radius: 5px; /* Rounded corners for the logo container */
  display: inline-block; /* Make the logo behave like a block element */
  transition: background-color 0.3s ease; /* Smooth transition for background */
 margin-top: 20px;
  margin-left: 20px;
}

/* Styling for the logo heading (TechXas) */
.logo h1 {
  margin: 0;
  font-weight: bold;
  font-size: 2.5rem; /* Adjust size for more emphasis */
  font-family: 'Press Start 2P', cursive; /* Apply the retro font */
  position: relative;
  color: white; /* Default color of the logo */
  transition: color 0.3s ease, transform 0.3s ease;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: 3px; /* Slightly space out the letters */
}

/* Styling for the logo subheading */
.logo h1 span {
  font-size: 1.5rem; /* Adjust size of the subheading */
  color: black; /* Add a nice contrasting color */
}
.logo div {
  font-size: 0.8rem;
  color: white;  /* Default subtitle color */
  transition: color 0.3s ease;
  padding: 5px;
}

/* Hover effect for the logo */
.logo:hover h1 {  /* Change to red on hover */
  transform: scale(1.1);  /* Slightly enlarge the logo text */
  animation: pulse 0.5s ease forwards;  /* Adding pulse animation */
}

.logo:hover div {
  animation: fadeInText 0.5s ease forwards; /* Text fade effect */
}

/* Hover effect for the notification */
.about-us-notification {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px); /* Initially shifted down */
  padding: 15px;
  background-color: #0056b3;  /* Black background */
  color: white;  /* White text */
  border-radius: 5px;
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s, transform 0.3s ease;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); /* Optional shadow */
}

/* Show the notification when the logo is hovered */
.logo:hover{
  color: #0056b3;
  background-color: #0056b3;
  display: block;
  opacity: 1;
  transform: translateX(-50%) translateY(0); /* Smoothly slide up and appear */
  animation: raiseNotification 0.3s ease forwards; /* Notification animation */
} 



/* Optional: Add a red border or accent around the notification */

/* Keyframes for Logo Pulse */
@keyframes pulse {
  0% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1.1);
  }
}



/* Keyframes for Notification Raise Effect */
@keyframes raiseNotification {
  0% {
    transform: translateY(10px); /* Start below */
    opacity: 0; /* Initially invisible */
  }
  100% {
    transform: translateY(0); /* Raise to normal position */
    opacity: 1; /* Fade in */
  }
}

/* Hover effect for the logo container background */







/* Nav Item Styles */
.nav-item {
  margin: 0 5px; /* Adjust margins for spacing between items */
}

.nav-link {
  font-weight: 400;
  font-style: italic;
  color: black;
  padding:5px; /* Adjust padding as needed */
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}



#login {
font-size: 42px; /* Adjust the size as needed */
font-weight: bold;
color: goldenrod; /* White color for the text */
text-decoration: none; /* Remove underline */
position: relative; /* Needed for pseudo-elements */
margin-bottom: 0;
animation: none;
cursor:default;
}

#signUp{
font-size: 12px; /* Adjust the size as needed */
font-weight: bold;
color: black; /* White color for the text */
text-decoration: none; /* Remove underline */
position: relative; /* Needed for pseudo-elements */
margin-bottom: 0;
animation: none;

}

/* Adding a hover effect */



#topfinancehead{
  margin-top: 50px;
  margin-bottom: 10%;
  
}
/* Add this CSS to your stylesheet or within a <style> tag in your HTML */
#lorecords {
  border-bottom: 5px solid #333; /* Bottom border with color and thickness */
  position: relative;
  margin-top: 45px;

  
}
input::placeholder {
  color: rgba(0, 0, 0, 0.5);  /* Adjust opacity for faint effect */
}

.scroll-btn {
  position: absolute;
  width: 40px;
  height: 40px;
  background-color: rgba(0,0,0,0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.scroll-up {
  top: 10px;
  right: 10px;
}

.scroll-down {
  bottom: 10px;
  right: 10px;
}
.index-product-section {
  padding: 20px;
  position: relative;
  overflow: hidden; /* Hide overflowing content */
  
}

.index-section-title {
  font-size: 1.2rem;
  text-align: center;
  color: black;
  padding: 14px;
  font-weight: 900;
}

.index-product-list {
  padding: 10px 0;
  gap: 20px; /* Adjust the gap between items as needed */
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  overflow-x: auto; /* Allow horizontal scrolling */
  scroll-behavior: smooth; /* Smooth scrolling */
  gap: 10px; 

}
#product-list {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth; /* Smooth scrolling behavior */
  max-width: 100%;
  justify-content: center;
}
.index-product-list::-webkit-scrollbar {
  display: none;
}

.index-product-item {
  flex: 0 0 auto; /* Ensures items don't shrink and take up fixed space */
  width: 300px; /* Adjust width as needed */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 15px;
  scroll-snap-align: center; /* Ensures items snap into place */
  margin-left: 8px;
  scroll-behavior: smooth; /* Smooth scrolling behavior */
   
}

.index-product-list {
  -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.index-product-image {
  border-radius: 10px;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.index-product-name {
  font-size: 1.2rem;
  margin: 10px 0;
}

.index-product-price {
  font-size: 1.1rem;
  color: #007bff;
  margin-bottom: 10px;
}

.index-product-description {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 15px;
}

.index-view-more-btn {
  display: inline-block;
  padding: 10px 15px;
  font-size: 1rem;
  color: black;
  background-color: white;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 4px 7px black;
}

.nexticon {
  display: inline-flex; /* Allows centering and alignment */
  align-items: center; /* Vertically centers the icon */
  justify-content: center; /* Horizontally centers the icon */
  float: right;
  margin-bottom: 5px;
}

.nexticon i {
  font-size: 2rem; /* Adjust the size of the arrow icon */
  color: black; /* Set the icon color */
  cursor: pointer; /* Makes the icon clickable */
}

/* Styling for the slowmotion_securityh class and its section */
.slowmotion_securityh {
  text-align: center;
  color: black;
}

/* Styling for the welcome_header with slow-motion animation */
.slowmotion_securityh .welcome_header {
  margin: 0;
  font-weight: bold;
  font-size: 2rem;
  position: relative;
  color: grey;
  display: inline-block; /* Ensure it's treated as inline-block for proper animation */
  animation: danceUpDown 4s ease-in-out infinite; /* Animation for dancing up and down */
}

/* Keyframes for the "dance up and down" animation */
@keyframes danceUpDown {
  0% {
    transform: translateY(0); /* Initial position */
  }
  25% {
    transform: translateY(0); /* Move up slightly */
  }
  50% {
    transform: translateY(0); /* Back to the initial position */
  }
  75% {
    transform: translateY(10px); /* Move down slightly */
  }
  100% {
    transform: translateY(0); /* Back to the initial position */
  }
}

/* Optional styling for the catch_phrase */
.catch_phrase {
  color: black;
  font-size: 1.2rem;
  margin-bottom: 2px; /* Adds some space below the catchphrase */
}
.header__image {
  position: relative; /* Set the position of the container to relative */
  width: 100%;
}

.header__image img {
  width: 100%;
  height: auto;
  display: block; /* Ensures the image fills the container without extra space below */
}

.network-text {
  position: absolute; /* Position the text absolutely within the container */
  top: 50%; /* Vertically center the text */
  left: 50%; /* Horizontally center the text */
  transform: translate(-50%, -50%); /* Fine-tune the centering */
  font-size: 1.5rem; /* Adjust font size as needed */
  font-weight: bold; /* Ensure the text is bold */
  color: brown; /* Set text color to red */
  text-transform: uppercase; /* Transform the text to uppercase */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Initial subtle shadow */
  text-align: center; /* Center align the text */
  padding: 10px;
  max-width: 80%; /* Prevent text from overflowing */
  line-height: 1.5;

  animation: moveShadow 2s infinite alternate; /* Apply moving box shadow animation */
}

/* Keyframes for moving box shadow */
@keyframes moveShadow {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Initial shadow */
  }
  50% {
    text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.8); /* Shadow moves to the right and down */
  }
  100% {
    text-shadow: -10px -10px 20px rgba(0, 0, 0, 0.8); /* Shadow moves to the left and up */
  }
}

.nexticon i:hover {
  color: #0056b3; /* Change icon color on hover */
}
.coop-footer {
    background-color: #1f2933;
    color: #e5e7eb;
}

.coop-footer h5,
.coop-footer h6 {
    color: #ffffff;
    font-weight: 600;
}

.coop-footer a {
    color: #d1d5db;
    text-decoration: none;
}

.coop-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.coop-footer p {
    font-size: 0.95rem;
    color: #d1d5db;
}

.footer-bottom {
    background-color: #111827;
    color: #9ca3af;
}

.top-banner {
 /* Adds space between letters to make the text appear stretched */
  transform: scaleX(1); /* Stretches the text horizontally */
  
  /* 3D Effect */
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 0.645), /* Light shadow */
    -1px -1px 2px rgba(0, 0, 0, 0.3), /* Shadow on the opposite direction */
    2px 2px 2px rgba(0, 0, 0, 0.2), /* Darker shadow for depth */
    -4px -4px 6px rgba(0, 0, 0, 0.2); /* Opposite darker shadow */
  
  /* Shiny Goldenrod Overlay */
  background-size: 200% 200%; /* Ensure gradient is wide */
  animation: shine 25.5s linear infinite; /* Animation to create moving shine effect */

  /* Shine box-shadow for a reflective look */
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6), 
              0 0 10px rgba(0, 0, 0, 0.7);
}

/* Animation for shiny effect */
@keyframes shine {
  0% {
    background-position: -200% 0;
  }
  50% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}


ul {
  list-style-type: none; /* Remove bullet points */
  padding: 0; /* Remove padding */
}

ul li {
  margin-bottom: 5px; /* Space between list items */
  text-decoration: none;
  color: gray;
}

.social-media {
  margin-top: 10px; /* Space above social media links */
}

.social-media li {
  display: inline; /* Display social media items inline */
  margin-right: 28px; /* Space between icons */
}

a i{
  text-decoration: none; /* Remove underline */
  background-color: green;
  border-radius: 2px;
  font-size: 22px;
  padding: 5px;
  height: min-content;
  
}

.navbar-nav a{
  text-decoration: none;
 
}

.near-footer a {
  text-decoration: none; /* Remove underline */
  background-color:transparent;
  border-radius: 20px;
  font-size: 24px;
  padding: 20px;
}
/* CSS for the Instagram icon */
a i {
  font-size: 20px;  /* Icon size */
  color: black;  /* Instagram's color */
  padding: 5px;
  border-radius: 20px;
  text-decoration: none;
  background-color: transparent;

}

a:hover {
  color: white;  /* A darker shade for hover effect */
  transform: none;
  transition: none;
  text-decoration: none;
}

.grey-t {
  color: grey;
  font-weight: normal;
  text-transform: lowercase;  /* This will ensure the text is always in lowercase */
  font-size: smaller;
}

.bold-x {
  color: black;
  font-weight: bold;
}
.near-footer {
  display: flex;
  background-color:whitesmoke; /* Background color */
  padding-top: 25px; /* Padding around the footer */
  margin-bottom: 30px;
  margin-top:10px;
  padding-bottom: 40px;
  justify-content: center;
  height: max-content;

}

.container {
  margin: 0 auto; /* Center the container */
  padding: 5px; /* Padding on the sides */
}
/* Container for the image section */
/* Right Side Section for Images */
.image-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 images per row */
  margin-top: 5px;
  background-color: lavender; /* Set background color to white */
  padding: 0;
  justify-items: center; /* Center images in their grid items */
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;

}

/* Individual Image Container */
.image-item-container {
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  padding: 5px;
  width: 100%; /* Make the container take up full width available */
  text-align: center; /* Center the content inside */
  margin-left: 20%;
  
  
}

/* Individual Image Styling */
.image-item {
  width: 100%; /* Make the image take up full container width */
  height: auto; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow around images */
}


.image-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bigger shadow on hover */
}

/* Caption Styling */
.image-caption {
  color: #333; /* Dark gray text */
  margin-top: 8px;
  font-weight: bold;
  text-transform: capitalize; /* Capitalize first letter */
}
/* Shop section - general layout for the left and right parts */
.shop-section {
  display: flex;                  /* Arrange left and right sections side by side */
  gap: 30px;                      /* Space between the left and right sections */
  justify-content: space-between; /* Ensure that the sections are spaced out */
  align-items: flex-start;        /* Align items to the top */
  margin: 30px 0;
  padding: 20px;
  box-sizing: border-box;
}

/* Left Side Section */
.left-side {
  flex: 1;                       /* Left side takes up 1/3 of the width */
  padding: 8px;
  background-color: #f9f9f9;     /* Light background for the left section */
  border-radius: 10px;           /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow */
  text-align: center;            /* Center text inside the left section */
}

.left-side h2 {
  color: #9a7d1e;                /* Golden color for the heading */
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.left-side p {
  color: #555;                   /* Dark gray for text */
  font-size: 1rem;
  margin-bottom: 20px;
}
.verbal-marketing{
  flex: 1;
  margin-left: 5px;
  margin-top: 25px;
  padding: 0;
  

}


.shop-link {
  display: inline-block;
  background-color: goldenrod;   /* Golden color for the link */
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.shop-link:hover {
  background-color: darkgoldenrod; /* Darker shade when hovered */
}

/* Individual Image Styling */
.image-item {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow around images */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

.image-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bigger shadow on hover */
}

.near-footer__top {
  display: flex; /* Flexbox layout for top sections */
  justify-content: space-between; /* Space out the sections evenly */
  margin-bottom: 5px; /* Space below the top sections */
  text-align: center; /* Center align text */
  background-color: black;

}

.near-footer__section {
  flex: 1; /* Allow sections to grow equally */
  margin: 0 10px; /* Margins between sections */
  padding: 25px;
  background-color:gainsboro;


}


.near-footer__categories ul {
  list-style-type: none; /* Remove default bullet points */
  padding: 0; /* Remove default padding */
  color: #757373;
  font-weight: 700;
}

.near-footer__categories li {
  margin-bottom: 5px; /* Space between list items */
}

.near-footer__partners {
  margin-top: 20px; /* Space above partners section */
}

.partner-grid {
  display: grid; /* Grid layout for partners */
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Responsive columns */
  gap: 50px; /* Space between partner logos */
  justify-items: center; /* Center items in grid */
}

.partner-logo {
  text-align: center; /* Center align logo and text */
  background-color: #ddd;
  border-radius: 15px;
}

.partner-logo img {
  width: 100%; /* Ensure images are responsive */
  height: 100px; /* Maintain aspect ratio */
  margin-bottom: 5px; /* Space below the image */
  border-radius: 15px;
  padding: 20px;
}

.partner-logo p {
  margin: 0; /* Remove default margin for paragraphs */
  font-size: 14px; /* Font size for partner names */
  font-weight: 500; /* Slightly bolder text */
  color: black;
}

.footer__location, .footer__affiliates {
  flex: 1; /* Allow these sections to grow */
  padding: 10px; /* Padding within sections */
}
.footer__copyright {
  text-align: center;
  background-color: #f8f8f8; /* Light background for contrast */
}
.footer__copyright img {
 width: 100px;
 height: 50%;
 padding: 5px;
}

.feature {
  display: flex;
  flex-direction: column;
  margin-left: 20px;
  border-bottom: 2px solid #ccc; /* Add a light grey border at the bottom */
  padding-bottom: 15px; /* Space below content */
  margin-bottom: 20px; /* Space between features */
}

.near-footer__categories {
  text-align: center; /* Center the heading */
}

.customer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Two columns */
  gap: 15px; /* Space between items */
  margin-top: 10px; /* Space above the grid */
}

.customer-item {
  background-color:#0A0068; /* Background color for items */
  padding: 10px; /* Padding inside each item */
  border-radius: 5px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  font-weight: 600;
  color: white;
}
.cctechspac {
  display: flex;
  flex-direction: row;
  justify-content: center; /* Center items */
  flex-wrap: wrap; /* Allow items to wrap */
  margin: 0px 0; /* Add some margin to the top and bottom */
  background-color:#0f1528 ;
  padding: 35px;
  border-radius: 5px;
  
}

.cctechspac h1 {
  color:  white; /* Change to white for visibility on a black theme */
  font-weight: 800;
  font-size: 16px; /* Slightly larger font size */
}

.imgsections {
  flex: 1 1 30%; /* Allow items to take up to 30% of the width */
  padding: 45px;
  box-sizing: border-box; /* Ensure padding doesn't affect total width */
  text-align: center; /* Center align text within sections */
  background-color: rgba(255, 255, 255, 0.1); /* Light background for contrast */
  border-radius: 8px; /* Rounded corners */
  margin: 5px; /* Margin between sections */
  transition: transform 0.3s; /* Smooth hover effect */
}

.imgsections:hover {
  transform: scale(1.05); /* Slightly enlarge on hover */
}

.imgsections img {
  width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Rounded corners for images */
}

.imgsections p {
  margin-top: 5px; /* Space between image and text */
  color:black; /* Change to white for visibility */
  line-height: 1.2; /* Improve readability */
  font-weight:300;
  font-size: 14px;

}

.imgsections h1 {
  margin-top: 5px; /* Space between image and text */
  color:black; /* Change to white for visibility */
  line-height: 1.2; /* Improve readability */
  font-weight:300;
  font-size: 14px;

}

.conclusion h3 {
  padding: 15px;
  color: white; /* Change to white for visibility */
}

/* Media queries for responsive design */
@media (max-width: 768px) {
  .imgsections {
      flex: 1 1 100%; /* Stack items on smaller screens */
  }
}

@media (max-width: 768px) {
  .footer__top, .footer__bottom {
      flex-direction: column; /* Stack sections on small screens */
      align-items: center; /* Center align items */
  }
}

.index-reasons h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color:whitesmoke;
  padding-top: 15px;
}

.index-reasons p {
  font-size: 1rem;
  color: white;
  line-height: 1.6;
  margin-bottom: 20px;
  width: max-content;

}
.index-reasons h2 {
  font-size: 1rem;
  color: white;
  line-height: 1.6;
  margin-bottom: 20px;
  width: max-content;

}

.index-email {
  gap: 3px;
  width:min-content;
}

.index-mail, .index-callus {
  display: flex;
  align-items: center;
  gap: 10px;
  background: brown;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 200px;
  width: max-content;
}

.index-mail i, .index-callus i {
  font-size: 1.5rem;
  color: white;
}
.index-callus{
  width: max-content;
  margin-top: 20px;
}

.index-mail span, .index-callus span {
  font-size: 0.9rem;
  color: white;
}

.index-affiliates {
  margin-top: 20px;
}

.index-affiliates h1 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: white;
  font-weight: 800;
}

.index-affiliates p {
  font-size: 1rem;
  color: white;
  margin: 5px 0;
}

.index-affiliates i {
  margin-right: 8px;
  color: white;

}.pheader__container {
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
  padding-block: 8rem 2rem;
  padding-inline: 1rem;
  display: grid;
  gap: 2rem;
  position: relative; /* Ensure the pseudo-element is positioned relative to this container */
  overflow: hidden; /* Hide any overflow caused by the pseudo-element */
  height: 50%;
}

.pheader__container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-image: url("/static/SPAPHOTOS/face15.jpeg");
  background-position: center;
  background-size: cover;
  filter: blur(10px); /* Adjust the blur intensity as needed */
  z-index: -1; /* Place the pseudo-element behind the content */
  /* Add additional properties to ensure the pseudo-element covers the container */
  transform: scale(1.1); /* Slightly scale up the pseudo-element to avoid visible edges */
  margin-top: 90px;
  padding: 20px;
}

.pheader__container > * {
  position: relative; /* Ensure child elements are on top of the pseudo-element */
}
.pheader__container::-webkit-scrollbar {
  display: none;
}

.pheader__image {
  position: relative;
  isolation: isolate;
}

.pheader__image::before {
  position: absolute;
  content: "";
  width: 100%;
  max-width: 550px;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 100%;
  opacity: 0.5;
  z-index: -1;
}

.pheader__image img {
  max-width: 520px;
  margin-inline: auto;
  border-radius: 20px;
}

.pheader__image__card {
  position: absolute;
  padding-left: 20px;
  display: flex;
  gap: 20px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dark);
  background-color: var(--white);
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left:5px;
  width: max-content;
}

.pheader__image__card span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.pheader__image__card-1 {
  top: 25%;
  left: 0;
  transform: translate(-5%, -50%);
  padding: 20px;
  background-color: yellow;
  font-weight: 700;
}

.pheader__image__card-2 {
  top: 10%;
  right: 2rem;
  transform: translateY(-50%);
  padding: 15px;
  background-color: aliceblue;
  font-weight: 700;
  margin-right: 40px;
}

.pheader__image__card-3 {
  top: 60%;
  left: 0;
  transform: translateY(-50%);
  padding: 10px;
  background-color: aliceblue;
  font-weight: 700;
}

.pheader__image__card-4 {
  top: 70%;
  right: 0;
  transform: translateY(-50%);
  padding: 20px;
  background-color: aliceblue;
  font-weight: 700;
}

.pheader__content h1 {
  font-size: 3rem;
  font-weight: 800;
  font-family: var(--header-font);
  color: var(--text-dark);
  line-height: 2.5rem;
  text-align: center;
  margin-top: 30px;
 
}
.pheader__content{
background-color: bisque;
border-radius: 5px;
}

.pheader__content h1 span {
  color: var(--primary-color);
}

.pheader__content p {
  margin-bottom: 2rem;
  columns: var(--text-light);
  line-height: 1.75rem;
  text-align: center;
}

.pheader__content form {
  margin-bottom: 4rem;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem 0;
  border-radius: calc(1rem + 10px);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.pheader__content .input__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.pheader__content .input__group {
  flex: 1;
}

.pheader__content .input__group h5 {
  margin-bottom: 5px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light);
}

.pheader__content .input__group > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pheader__content input {
  width: 100%;
  outline: none;
  border: none;
  font-size: 1rem;
  background-color: transparent;
}

.pheader__content input::placeholder {
  font-weight: 600;
  color: var(--text-dark);
}

.pheader__content .input__group span {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.pheader__content button {
  width: 100%;
  padding: 1rem 2rem;
  outline: none;
  border: none;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: 10px;
  transition: 0.3s;
  cursor: pointer;
}

.pheader__content button:hover {
  background-color: var(--primary-color-dark);
}

.pheader__content .bar {
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: center;
}

/* Container for the header */
.header__container {
  position: relative;
  width: 100%;
  max-width: var(--max-width); /* For responsiveness */
  margin: auto;
  padding-block: 8rem 2rem;
  padding-inline: 1rem;
  display: grid;
  gap: 2rem;
  overflow: hidden;
  background-size: cover; /* Ensure images cover the entire container */
  background-position: center; /* Center the background images */
  background-repeat: no-repeat; /* Avoid tiling */
  height: 100vh; /* Full height */
}

/* Common styles for all background images */
.header__container .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;  /* Start fully transparent */
  transition: opacity 2s ease-in-out; /* Smooth opacity transition */
}

/* Background 1: officesupplydark */
.header__container .background1 {
  background-image: url('/static/SPAPHOTOS/officesupplydark.jpg');
}

/* Background 2: image2 */
.header__container .background2 {
  background-image: url('/static/SPAPHOTOS/image2.png');
}

/* Background 3: image3 */
.header__container .background3 {
  background-image: url('/static/SPAPHOTOS/image3.jpg');
}

/* Background 4: image4 */
.header__container .background4 {
  background-image: url('/static/SPAPHOTOS/image4.webp');
}

/* Background 5: image5 */
.header__container .background5 {
  background-image: url('/static/SPAPHOTOS/image5.webp');
}

/* Active background visibility */
.header__container .active {
  opacity: 1;
}
.header__image {
  position: relative; /* Position the container relative to hold absolutely positioned images */
  width: 100%;
  height: 400px; /* Adjust as needed */
  overflow: hidden; /* Hide images that go outside the container */
}



/* Network text styling */
.network-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
  text-align: center;
}
/* Custom styling for the Call Us section */
/* Basic styling for the Call Us section */
.custom-call-us {
  position: absolute;
  bottom: 10%; /* Position it near the bottom of the header */
  left: 50%;
  transform: translateX(-50%); /* Center the section horizontally */
  z-index: 2; /* Ensure it's above other content */
  width: 100%;
  text-align: center;
}

/* Styling for the Call Us header section */
.call-us-section h2 {
  font-size: .9rem;
  font-weight: bold;
  color: white; /* Text color for header */
  margin: 0;
  padding: 20px;
  text-align: center;
  background-color: black; /* Background color for readability */
  border-radius: 5px;
}

.why-choose-us {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.imgsections {
  width: 30%;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
  background-color: ghostwhite;
}

.section-item i {
  font-size: 50px;
  margin-bottom: 10px;
}

.section-item h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.section-item p {
  font-size: 14px;
  line-height: 1.5;
}

/* Styling for the contact details (phone number and email) */
.contact-details {
  margin-top: 20px;
  padding: 10px;
}

/* Styling for the phone number */
.phone-number {
  color: white; /* White text for contrast */
  font-size: 1.0rem;
  font-weight: bold;
  text-decoration: underline; /* Optional: underline to highlight the number */
  margin-top: 10px;
  padding: 15px;
  background-color: black;
}

/* Styling for the email address */
.email-address {
  color: white; /* White text for contrast */
  font-size: 1.0rem;
  font-weight: bold;
  text-decoration: underline; /* Optional: underline to highlight the email */
  margin-top: 10px;
  padding: 15px;
  background-color: black;
  border-radius: 10px;

}

/* Icons for phone and email */
.fas {
  margin-right: 10px; /* Space between icon and text */
  color: silver; /* White color for icons */
  font-size: 36px;
  font-weight: 200;
}

/* Optional: Add a background transition or slide animation for the call us section */
.custom-call-us .call-us-item {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease-in-out;
  padding: 10px;
}

/* Optional: Hide the default carousel controls if not needed */
.custom-call-us .carousel-control-prev, .custom-call-us .carousel-control-next {
  display: none;
}





.header__image__card {
  position: absolute;
  padding-left: 20px;
  display: flex;
  gap: 20px;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-dark);
  background-color: var(--white);
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-left:5px;
  width: max-content;
}

.header__image__card span {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.header__image__card-1 {
  top: 25%;
  left: 0;
  transform: translate(-5%, -50%);
  padding: 20px;
  background-color: brown;
  font-weight: 700;
  color: white;
}
.fab{
  text-decoration: none;
}
.brand-item img{
  width: 40%;
  height: auto;
  margin-bottom:10px;
  border-radius: 0;
  margin-left: 30%;
  justify-content: center;
  display: flex;

}
  
  .brand-item2 img{
  width: 100%;
  height: 90px;
  margin-bottom: 10px;
  border-radius: 0;
  
  }

.header__image__card-2 {
  top: 10%;
  right: 2rem;
  transform: translateY(-50%);
  padding: 15px;
  background-color: brown;
  font-weight: 700;
  color: white;
  margin-right: 40px;
}

.header__image__card-3 {
  top: 60%;
  left: 0;
  transform: translateY(-50%);
  padding: 10px;
  background-color: brown;
  font-weight: 700;
  color: white;
}

.header__image__card-4 {
  top: 70%;
  right: 0;
  transform: translateY(-50%);
  padding: 20px;
  background-color: brown;
  font-weight: 700;
  color: white;
}
.network-text {
  position: absolute; /* Position the text absolutely within the container */
  top: 50%; /* Vertically center the text */
  left: 50%; /* Horizontally center the text */
  transform: translate(-50%, -50%); /* Fine-tune the centering */
  font-size: 1.5rem; /* Adjust font size as needed */
  font-weight: bold; /* Ensure the text is bold */
  color: brown; /* Set text color to red */
  text-transform: uppercase; /* Transform the text to uppercase */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Initial subtle shadow */
  text-align: center; /* Center align the text */
  padding: 10px;
  max-width: 80%; /* Prevent text from overflowing */
  line-height: 1.5;

  animation: moveShadow 2s infinite alternate; /* Apply moving box shadow animation */
}

/* Keyframes for moving box shadow */
@keyframes moveShadow {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Initial shadow */
  }
  50% {
    text-shadow: 10px 10px 20px rgba(0, 0, 0, 0.8); /* Shadow moves to the right and down */
  }
  100% {
    text-shadow: -10px -10px 20px rgba(0, 0, 0, 0.8); /* Shadow moves to the left and up */
  }
}

.header__content h1 {
  font-size: 3rem;
  font-weight: 800;
  font-family: var(--header-font);
  color: var(--text-dark);
  line-height: 2.5rem;
  text-align: center;
  margin-top: 30px;
 
}
.header__content{
background-color: bisque;
border-radius: 5px;
}

.header__content h1 span {
  color: var(--primary-color);
}

.header__content p {
  margin-bottom: 2rem;
  columns: var(--text-light);
  line-height: 1.75rem;
  text-align: center;
}

.header__content form {
  margin-bottom: 4rem;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  gap: 1rem 0;
  border-radius: calc(1rem + 10px);
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
}

.header__content .input__row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.header__content .input__group {
  flex: 1;
}

.header__content .input__group h5 {
  margin-bottom: 5px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light);
}

.header__content .input__group > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header__content input {
  width: 100%;
  outline: none;
  border: none;
  font-size: 1rem;
  background-color: transparent;
}

.header__content input::placeholder {
  font-weight: 600;
  color: var(--text-dark);
}

.header__content .input__group span {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.header__content button {
  width: 100%;
  padding: 1rem 2rem;
  outline: none;
  border: none;
  font-size: 1rem;
  white-space: nowrap;
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: 10px;
  transition: 0.3s;
  cursor: pointer;
}

.header__content button:hover {
  background-color: var(--primary-color-dark);
}

.header__content .bar {
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: center;
}
.ttastyle{
display: flex;
flex-direction: row;
}

.spfp{
text-align: center;
margin-top: -20px;
background-color: black;
border-radius: 5px;
font-size: 16px;
padding: 10px;
font-weight: 800;
color: white;

}


.fixed-container {
    margin-bottom: 20%;
    position: fixed;
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Offset by half of its width and height */
    z-index: 9999; /* Ensure it’s above other content */
    background-color: white; /* Or any background color you prefer */
    padding: 20px; /* Add some padding */
    box-sizing: border-box; /* Include padding in the width calculation */
    text-align: center; /* Center text inside */
}

/* Specific styling for h2 within this container */
.fixed-container .text-center.alert.alert-warning {
    margin: 0; /* Remove default margin */
    padding: 10px; /* Add padding if necessary */
}

/* Specific styling for the button within this container */
.fixed-container .btn.btn-danger.btn-lg {
    margin-top: 10px; /* Add space above the button if needed */
}
.pcontainer-fluid {
  display: flex;
  justify-content: center;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 0;
}

.foot {
  margin-bottom: 1px;
  margin-left: 5px;
  padding: 15px;
  border-radius: 25px;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  line-height: 0.2;
  height: max-content;
  width: min-content;
}

.foot p {
  color: black;
  font-weight: 800;
  font-size: 14px;
  margin: 0;
}

/* Section Styling */
#electronicsp {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background-color: black;
  overflow: hidden;
  position: relative;
  padding: 1px;
  width: min-content;
  border-radius: 20px;
  margin-right: auto;
  margin-left: auto;
}

.epheader {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}

.scroll-container {
  max-height: calc(100vh - 60px); /* Adjust based on header/footer height */
  overflow-y: auto;
  padding: 8px;
  width: 100%;
}

section#wcuindextop {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-left: 0;
}

.hometop-container {
  margin-top: 50px;
  padding: 25px;
}
.hometop-item {
  margin: 0 auto;
  position: relative;


  text-align: center;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  flex: 1 1 150px; /* Adjust size as needed */
  margin: 5px;
  margin-top: 50px;
  padding-top: 2px;
  
  background-color:lavender;
  color: white;
  text-decoration: none;
  display: inline-block;
  border: 1px solid lightgray; /* Light gray border */
  text-align: center;

}

/* Header for the section */
.midsec-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 0;
  margin-top: 40px;
}

.midsec-header h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.midsec-header p {
  font-size: 16px;
  color: #777;
  margin-top: 0;
}

/* Container for the 3 smaller sections */
.midsec {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* Spaces out the sections evenly */
  margin-top: 2px;
  padding: 50px;
  width: 100%; /* Take full width of the container */
  gap: 2px; /* Adds space between the items */
  flex-wrap: wrap; /* Ensures responsiveness */
}

/* Styles for each section */
.midsec-box {
  background-color:white;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  flex: 1;
  max-width: 320px;
  min-width: 280px;
  padding: 50px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid lightgray; /* Light gray border */

}

.partners-section {
    padding: 60px 20px;
    background-color: white; /* light neutral */
    text-align: center;
}

.partners-section .section-header h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 40px;
    color: #0A0068;
}

.trusted-shops-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, fr));
    gap: 50px;
    justify-items: center;
}
 
.trusted-box {
    height: min-content;
     padding: 20px;
     text-align: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
  
}

.trusted-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.trusted-box .image-item {
    width:250px ;
    height:auto;
    margin-bottom: 15px;
    background-color: transparent;
}

.trusted-box h5 {
    font-size: 16px;
    font-weight: 600;
    color: #111;
    margin: 0;
}


/* Section Title */
.midsec-box h4 {
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Section Description */
.midsec-box p {
  color: #555;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Button Style */
.midsec-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
}

/* Hover effect for buttons */
.midsec-button:hover {
  background-color: #0056b3;
}

/* Hover effect for each section */
.midsec-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}


/* Icons for each section */
.midsec-box img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin-bottom: 15px;
}

/* Hover Effect for Section */
.midsec-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Optional button style for action */
.midsec-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Hover effect for buttons */
.midsec-button:hover {
  background-color: #0056b3;
}

/* Container for the four sections */
.trusted-shops-info {
  display: flex;
  justify-content: space-around; /* Distribute sections evenly */
  gap: 30px; /* Space between the sections */
  padding: 20px;
  flex-wrap: wrap; /* Wrap sections on smaller screens */
}

/* Style for each box */
.trusted-box {
  display: flex;
  align-items: center; /* Align icon and text vertically */
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  flex: 1;
  min-width: 250px; /* Minimum width for smaller screens */
  max-width: 300px; /* Limit max width */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Icon styling */
.trusted-box .icon {
  font-size: 30px;
  color: #007bff; /* Icon color */
  margin-right: 15px; /* Space between icon and text */
}

/* Text styling */
.trusted-box .text h5 {
  font-size: 1.1rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.trusted-box .text p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

/* Hover effect for each box */
.trusted-box:hover {
  transform: translateY(-10px); /* Slight lift effect */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow */
}

/* Ensure responsiveness */
@media screen and (max-width: 768px) {
  .trusted-shops-info {
      flex-direction: column;
      align-items: center; /* Stack the boxes vertically on smaller screens */
      gap: 20px;
  }
}







.hometop-item h5 {
  text-align: center;
  border-radius: 5px;
  flex: 1 1 150px; /* Adjust size as needed */
  margin: 10px;
  font-weight: 700;
  color: white;
font-size: 14px;
  
}

/* General container styles */
.product-detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: Arial, sans-serif;
  padding-top: 40px;
  margin-top: 40px;
}

/* Product Header */

/* Product detail container (image and text) */
.product-detail-info {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin-top: 20px;
  margin-bottom: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  background-color: #fafafa;
  padding: 20px;
}

/* Product image styling */
.product-detail-img {
  width: 30%;
  height: auto;
  object-fit: cover;
  border-radius: 10px;
}

/* Carousel Box Styling (For text and special features) */
.carousel-box {
  padding: 20px;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-left: 20px;
  margin-right: 20px;
  flex: 1;
}

/* Product detail text section */
.product-detail-text {
  margin-left: 20px;
}

/* Styling for product details (price, quantity, etc.) */
.product-detail-details {
  margin-top: 10px;
  padding: 10px;
  background-color: #e6f7ff; /* Soft blue background */
  border-radius: 8px;
}

/* Special features section */
.special-features {
  margin-top: 20px;
}

.special-features h3 {
  font-size: 1.6em;
  color: white;
  background-color: #ff6347; /* Tomato red background */
  padding: 10px;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
  border-radius: 8px;
}

.special-features p {
  font-size: 1.1em;
  margin-bottom: 10px;
  color: #444;
}

/* Price and quantity styling */
.product-detail-text p {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 12px;
}
/* Style for the product detail link as a green button */
.prdetails-link {
  font-size: 12px;  /* Set the font size */
  color: white;  /* Text color - white for contrast */
  background-color: burlywood;  /* Green background color */
  text-decoration: none;  /* Remove the default underline */
  font-weight: bold;  /* Make the text bold */
  border-radius: 5px;  /* Round corners for the button */
  display: inline-block;  /* Ensure it behaves like a block element while staying inline */
  transition: background-color 0.3s, transform 0.3s; /* Add smooth transition for hover effects */
  margin-left: 0;
  margin-top: 2px;
  width: min-content;
  margin-bottom: 5px;
}

/* Title Styling */

/* Introduction Section */
.section-intro {
  text-align: center;
  margin-bottom: 30px;
}

.section-intro p {
  font-size: 18px;
  color: #555;
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
}

/* Electronics Types Layout (4 in a row) */
.electronics-types {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* Space between sections */
  margin-bottom: 30px;
}

.electronics-type {
  flex: 1;
  padding: 20px;
  background-color: silver;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.electronics-types h4{

  background-color: transparent;

}

.electronics-type:hover {
  transform: translateY(-5px); /* Lift effect on hover */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.electronics-type h4 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.electronics-type p {
  font-size: 16px;
  color: #777;
  line-height: 1.4;
}

/* Product Navigation with Scroll Arrows */
.product-navigation {
  display: flex;
  align-items: center;
  position: relative;
  background-color: transparent;
  border-radius: 5px;
  padding: 0;
}

/* Scroll Arrows for navigating products */
.scroll-arrow {
  cursor: pointer;
  font-size: 24px;
  color: #333;
}

.scroll-arrow:hover {
  color: #777;
}





/* Product Box Image and Name */
.product-box img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}

.product-box p {
  font-size: 14px;
  margin-top: 10px;
  font-weight: bold;
  color: #333;
}
.prdetails-link:hover {
  background-color: black;  /* Darker green on hover */
  text-decoration: none;  /* Keep the text unstyled on hover */
  transform: scale(1.05);  /* Slightly enlarge the button on hover */
  color: white;
}

.prdetails-link:focus {
  outline: none;  /* Remove the outline when focused (optional) */
  box-shadow: 0 0 0 3px white;  /* Add a focus ring for accessibility */
}



/* Hover effect on product detail container */
.product-detail-info:hover {
  background-color: #f9f9f9;
  transition: background-color 0.3s ease-in-out;
}

.product-detail-container {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.product-detail-info {
  display: flex;               /* Set the container to be a flexbox */
  justify-content: space-between; /* Space between image and text */
  width: 80%;                    /* Adjust the width of the container as needed */
  margin-top: 20px;
  margin-bottom: 50px;
}

.product-detail-img {
  width: 20%;  /* Adjust the size of the image */
  height: auto;
  object-fit: contain;  /* Ensures the image maintains aspect ratio */
}

.product-detail-text {
  flex: 1;  /* Take up the remaining space */
  margin-left: 20px;  /* Space between image and text */
}

.product-detail-details {
  margin-top: 10px;
}

.product-detail-header {
  color: #333;
  text-align: start;
  margin-bottom: 20px;
  font-size: 20px;
  margin-left: 0;
  margin-top: 15px;
  text-transform: uppercase;
  background-color: gainsboro; /* Set background color to Gainsboro */
  padding: 10px; /* Optional: add some padding to give space around the text */
  width: 100%;
  

}
.top-sellers-container {
  margin-top: 30px;
  padding: 20px 0;
  width: 80%; /* Limit the width to 80% */
  margin-left: auto;
  margin-right: auto;
  position: relative; /* To position the buttons inside the container */
  display: flex;
}

.top-sellers-header {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}

.top-sellers-items {
  display: flex; /* Align items in a row */
  overflow: hidden; /* Hide the scrollbar */
  white-space: nowrap; /* Prevent wrapping of items */
  gap: 20px; /* Add some space between items */
  padding: 10px;
  transition: transform 0.3s ease; /* Smooth transition when scrolling */
}

.top-seller-item {
  flex-shrink: 0; /* Prevent items from shrinking */
  width: 120px; /* Set a smaller width for each item */
  overflow: hidden;
  border: 1px solid #ddd; /* Add a border around each item */
  padding: 10px;
  border-radius: 8px; /* Rounded corners for the items */
  text-align: center;
  background-color: #f8f8f8; /* Light background */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
  transition: transform 0.3s ease; /* Smooth hover effect */
}

/* Container for navigation links */
.navigation-container {
  display: flex; /* Ensures elements are aligned in a row */
  justify-content: space-between; /* Space between the cards */
  gap: 20px; /* Optional: Adjust space between cards */
  margin-top: 150px;
}

/* Style for each equipment card */
.equipment-card {
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #0a006850; /* Deep blue to dark purple to black */  color: white; /* White text for contrast */
  text-align: center;
  cursor: pointer; /* Indicates clickable element */
  transition: background-color 0.3s, transform 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for each card */
.equipment-card:hover {
  background-color: goldenrod; /* Light gray on hover */
  transform: translateY(-5px); /* Slight upward movement */
  text-decoration-thickness: 3px; /* Makes the underline thicker */
  text-decoration-color: white; /* Changes the underline color to white */
}
/* Text styling inside each card */
.equipment-card p {
  margin: 0;
  font-size: 12px;
  color:white;
  font-weight: bold;
  background-color: transparent;
}

.input {
  width: 20%;
  padding: 8px;
  font-size: 16px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  transition: border-color 0.3s;
}

.top-seller-item:hover {
  transform: translateY(-5px); /* Slight upward movement on hover */
}

.top-seller-img {
  max-width: 100%; /* Ensure the image doesn't overflow */
  height: auto;
  border-radius: 4px; /* Rounded corners for images */
  margin-bottom: 10px;
}

.top-seller-item p {
  margin: 5px 0;
  font-size: 14px;
}

.top-seller-item strong {
  font-size: 16px;
  color: #333;
}

/* Back and Next buttons */
.top-seller-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 10;
}

.top-seller-nav button {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.top-seller-nav button:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.top-seller-nav button:focus {
  outline: none;
}

/* For the hidden scrollbar */
.top-sellers-items::-webkit-scrollbar {
  display: none; /* Hide the scrollbar */
}
/* Discount Section Styles */
.discount-section {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  margin-top: 0 ;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.discount-item {
  width: 45%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.discount-item h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.discount-item p {
  font-size: 16px;
  color: #555;
}

.refurbished {
  background-color: #ffeb3b; /* Yellow for refurbished */
}

.new {
  background-color: #4caf50; /* Green for new items */
  color: white;
}

.discount-item h3 {
  color: #fff;
}

/* Delivery Section Styles */
.delivery-info {
  padding: 20px;
  margin: 20px 0;
  background-color: #e3f2fd;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.delivery-info h3 {
  font-size: 22px;
  font-weight: bold;
  color: #1e88e5; /* Blue for delivery info */
}

.delivery-info p {
  font-size: 16px;
  color: #333;
}
.product-detail-container h1{
color: brown;
}

.hometop-item h5{
  color: gray;
  font-size: 12px;

}
.hometop-icon {
  font-size: 1.6rem;
  color: brown; /* Adjust color as needed */
  margin-top: 5px;
}
.hometop-title {
  margin-top: 10px;
  font-size: 1.2rem;
  font-weight: 200;
}
.search-bar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.popular-brands-section{
  display: flex; 
  flex-wrap: wrap; 
  gap: 5px; 
  justify-content:
  space-between; margin: 20px 0;

} 

.search-form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin-top: 15px;
}

.search-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
}

.search-button {
  padding: 2px;
  border: none;
  background-color:brown;
  color: white;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  margin-left: 2px;
  margin-right: 15px;
  height: min-content;
}

.image-item{
  width: 80%;
  height: 250px;
  padding: 5px;
}



.search-button:hover {
  background-color: #0056b3;
}

.reasons {
  flex: 3;
  height: min-content;
  width: 100%;
  padding-left: 20px;
  margin-right: 0;

  
}

.reasons img {
  max-width:300px;
  height: 75%;
  border-radius: 10px;
  padding: 20px;
  border-radius: 20px;
  
}

.index-product-price {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.index-product-description {
  font-size: 14px;
  color: #666;
}

.wcuicons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.affordability {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.affordability i {
  font-size: 20px;
  color: #333;
  margin-right: 10px;
}

.affordability span p {
  margin: 0;
}

.security {
  display: flex;
  flex-direction: column;
}

.security img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.scroll-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s ease;
}

.scroll-btn:hover {
  background-color: #555;
}
.text-black {
  color: black !important; /* !important ensures it overrides other styles */
}
.table-hover tbody td {
  color: black !important; /* Use !important to override other styles */
}
span{

font-size: 1.5rem; 
font-size: 2.5rem;
 text-shadow: px 1px 2px rgba(0,0,0,0.2);
 color: black;
}
h6 {
  font-size: 1.1rem;
  color: rgb(24, 24, 49);
}
/* =========================
   NAVBAR BASE
========================= */

/* subtle shadow already added via class */
.navbar-light {
    background-color: #ffffff;
}


@media (max-width: 768px) {
    .navbar-brand img {
        height: 34px;      /* smaller on mobile */
    }
}

/* =========================
   NAV LINKS
========================= */
.navbar-nav .nav-link {
    color: #1f2933;        /* deep neutral */
    font-weight: 500;
    padding: 0.6rem 1rem;
    transition: color 0.2s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #1e3a8a;        /* rich cooperative blue */
}

/* =========================
   DROPDOWN
========================= */
.dropdown-menu {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.dropdown-item {
    font-size: 0.95rem;
    padding: 0.55rem 1.25rem;
    color: #111827;
}

.dropdown-item:hover {
    background-color: #f1f5f9;
    color: #1e3a8a;
}

/* =========================
   RIGHT SIDE LINKS
========================= */
.navbar-nav.ms-auto .nav-link {
    font-weight: 500;
}

/* Icons */
.navbar-nav .fa-user {
    font-size: 1rem;
}

/* =========================
   MOBILE TOGGLER
========================= */
.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    box-shadow: none;
}

/* =========================
   COLLAPSE (MOBILE)
========================= */
@media (max-width: 991px) {
    .navbar-nav {
        text-align: center;
    }

    .dropdown-menu {
        text-align: center;
    }
}



#welcome .welcomeheader{
  padding:30px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-top: 205px;
  height: 50px;


}

#home{
  width: 100%;
  justify-content: center;

}


#home .content{
  padding:250px;
  width: 100%;
  height: 5vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-top: 390px;
 
}

 #home .content .popular_styles{
  width: 100%;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 5px;
  border-style:outset;
  border-radius: 100px;
  backdrop-filter: blanchedalmond(40px);
  box-shadow: 0 8px 32px 0;

  
 }


/* features */
#home h2{
  color: goldenrod;
  font-size: 2.4rem;
  letter-spacing: -3px;
  justify-content: center;
  font-weight: 600;
  font-family: monospace;
  
}
#home p{
  justify-content: center;
  
}
#home .popular_styles{
  justify-content: center;
  flex-direction: column;
}


#home .btn{
  margin-top: 40px;
}
#home a{
  text-decoration:none ;
  background-color: blanchedalmond;
  font-size: 2.4rem;
  letter-spacing: 0.5px;
  font-weight: 600 ;
  border-radius: 5px;
}
#home a.blue{
  color: #fff;
  background: rgb(25, 25, 93);
  transition: 0.4s;
}
#home a.blue:hover{
  color:  rgb(25, 25, 93);
  background: #fff;
}

#home a.yellow{
  color: #fff;;
  background: goldenrod;
  transition: 0.4s;
}
#home a.yellow:hover{
  color: goldenrod;
  background:#fff;
}
/* Top Header Styles */
/* Top Header Styles */

/* Professional Header Styles */
.laiheader-top-header {
  background-color: white; /* Background color */
  padding-top: 90px; /* Increased padding for top/bottom and left/right */
  display: flex;
  justify-content: center; /* Center the header content horizontally */
  align-items: center; /* Center items vertically */
  border-bottom: 5px solid brown; /* Light border at the bottom */
}

.laiheader-header-content {
  margin-top: 20px;
  display: flex;
  justify-content: space-between; /* Space out items evenly within the header */
  align-items: center;
  width: 100%; /* Full width to use the available space */
  max-width: 1200px; /* Optional: Max width for better alignment on large screens */
  padding: 30px;
}

.laiheader-header-logo h1 {
  font-size: 28px; /* Increased font size for better visibility */
  color: white; /* White color for contrast with blue background */
  font-weight: bold; /* Bold font weight */
  font-family: 'Roboto', sans-serif; /* Use the Roboto font */
  position: relative; /* Needed for positioning pseudo-elements */
  overflow: hidden; /* Ensures text does not overflow its container */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.3); /* Basic shadow for 3D effect */
  transform: perspective(500px) rotateX(10deg); /* Adds perspective and rotation for 3D effect */
  padding: 2px;
}



/* Small tag/footer styling */
.laiheader-header-logo h1::after {
  content: "Empowering Your Financial Future"; /* Tag text */
  display: block;
  font-size: 12px; /* Font size for the tag */
  font-weight: 900px;
  color: rgba(255, 255, 255, 0.7); /* Faint white color */
  font-family: 'Roboto', sans-serif; /* Same font for consistency */
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Subtle shadow for clarity */
  margin-top: 10px; /* Space between the heading and the tag */
  text-align: center; /* Center the tag text */
}

/* Create the wavy effect with a CSS animation */
.laiheader-header-logo h1::after {
  animation: wave 3s infinite; /* Apply wave animation */
}

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

.laiheader-header-contact {
  display: flex;
  flex-direction: row; /* Align contact numbers in a row */
  align-items: center; /* Center contact numbers vertically */
  margin: 0 20px; /* Space between contact section and social media */
}

.laiheader-contact-text {
  font-size: 16px; /* Font size for "Call Us" text */
  color: black; /* White color for visibility */
  margin-right: 10px; /* Space between "Call Us" text and contact numbers */
  font-weight: 600;
}

.laiheader-contact-number {
  font-size: 16px; /* Font size */
  color: black; /* White color for contact numbers */
  padding: 30px;
  font-weight: 900;

}

.laiheader-header-social-media {
  display: flex;
  align-items: center; /* Center social media icons vertically */
  font-size: 40px;
}

.laiheader-header-social-media a {
  color: black; /* White color for icons */
  margin-left: 15px; /* Space between icons */
  text-decoration: none; /* Remove underline from links */
  padding: 4px;
}

.laiheader-header-social-media i {
  font-size: 18px; /* Adjust icon size */
  transition: color 0.3s; /* Smooth color transition on hover */
}

.laiheader-header-social-media a:hover i {
  color: white; /* Change icon color on hover */
}
.gallery{
  width: 900px;
  display: flex;
  overflow-x: scroll;

}
.gallery div{
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  padding: 10px;
  justify-content: space-between space-evenly;
}
.gallery div img{
  width: 100px;
  filter: grayscale(100%);
  transition: transform 0.5s;
}
.gallery::-webkit-scrollbar{
  display: none;
}
.gallery div img:hover{
  filter: grayscale(0);
  cursor: pointer;
  transform: scale(1.1);
}
.order-details-container {
  max-width: 900px;
  margin: 40px auto; /* Center container horizontally */
  padding: 20px;
  background-color: azure; /* White background for content */
  border-radius: 12px; /* Rounded corners for a softer look */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  animation: fadeIn 1s ease-out; /* Fade-in animation */
  margin-top: 140px;
  padding-top: 50px;
}

.order-details-header {
  text-align: center;
  color: #333;
  font-weight: 700;
  font-size: 28px;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.order-details-info {
  font-size: 16px;
  margin-bottom: 30px;
}

.order-details-info p {
  margin: 5px 0;
}

.order-details-items-header {
  font-size: 22px;
  color: #555;
  margin-bottom: 10px;
  font-weight: 700;
}

.order-details-table-container {
  max-height: 400px; /* Adjust height as needed */
  overflow-y: auto; /* Enable vertical scrolling if needed */
  border-radius: 8px; /* Match border radius with container */
  border: 1px solid brown; /* Light border around the table container */
}

.order-details-table {
  width: 100%;
  border-collapse: collapse;
}

.order-details-table th, .order-details-table td {
  border: 1px solid #ddd;
  padding: 12px 15px;
  text-align: left;
  background-color: rgba(0, 0, 255, 0.333);
}
.order-details-table td {
  color: black;
  font-weight: 800;
  padding: 15px;
}

.order-details-table th {
  background-color: #f7f7f7; /* Slightly darker background for headers */
  color: #666;
  font-weight: bold;
  font-weight: 800;
}

.order-details-table tr:nth-child(even) {
  background-color: #fafafa; /* Alternate row color for readability */
}

.order-details-table tr:hover {
  background-color: #f0f0f0; /* Highlight row on hover */
  transition: background-color 0.3s; /* Smooth transition on hover */
}

.order-details-back-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 16px;
  color: brown; /* Changed color to yellow */
  text-decoration: none;
  font-weight: 800; /* Changed font weight to 800 */
}

.order-details-back-link:hover {
  text-decoration: underline;
  color: goldenrod; /* Slightly darker yellow on hover for better visibility */
}

/* Animation for fade-in effect */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

.addp-container-wrapper {
  display: flex;
  justify-content: center;  /* Center the container horizontally */
  align-items: center;      /* Center the container vertically */
  margin-top: 0;
  height: 100vh;            /* Full height of the viewport */
}

.addp-container {
  background-color: #f5f5f5;
  border: 1px solid #a52a2a;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 5px;
  max-width: 500px;         /* Limit the width of the form */
  width: 100%;              /* Full width, but limited to max-width */
  height: auto;             /* Height auto to adjust based on content */
  overflow-y: auto;         /* Allows scroll if the content overflows */
}

.addp-title {
  text-align: center;
  margin-bottom: 20px;
}

.addp-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;     /* Space between form groups */
}

.addp-form-control, 
.addp-form-file {
  padding: 8px;
  margin-top: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.addp-btn {
  width: 100%;
  padding: 10px;
  background-color: #a52a2a;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  text-align: center;
  margin-top: 20px;
}

.addp-btn:hover {
  background-color: #8b4513; /* Darker brown on hover */
}

@media (max-width: 768px) {
  .addp-container {
    max-width: 90%;           /* Ensure it's not too wide on smaller screens */
  }
}

/* Inventory Container */
.inventory-container {
  flex: 1; /* Take remaining space */
  margin-left: 20px; /* Space between form and inventory */
  max-height: 600px; /* Decreased max height to match add product section */
  overflow-y: auto; /* Enable vertical scrolling */
  background-color: #f5f5f5; /* Light grey background */
  border: 1px solid #a52a2a; /* Brown border */
  border-radius: 5px;
  padding: 15px; /* Reduced padding for visibility */
  width: 300px; /* Width remains the same */
}

/* Inventory Table */
.inventory-table {
  width: 100%;
  border-collapse: collapse;
}

.inventory-table th, .inventory-table td {
  border: 1px solid #ddd; /* Light grey border */
  padding: 8px; /* Reduced padding for better spacing */
  text-align: center; /* Centered text for headers and cells */
  font-weight: 600; /* Bold font weight */
  color: #333; /* Dark grey text */
}

.inventory-table th {
  background-color: brown; /* Brown background for header */
  color: #fff; /* White text for contrast */
}

.inventory-title {
  text-align: center; /* Center the text */
  color: #333; /* Dark grey text */
  font-weight: 700;
  font-size: 21px;
}

#add-product-btn {
  background-color:  brown; /* Primary color */
  color: #fff; /* White text */
  border: none; /* No border */
  border-radius: 6px; /* Rounded corners */
  padding: 10px 15px; /* Padding */
  font-size: 16px; /* Font size */
  font-weight: 600; /* Bold font */
  text-align: center; /* Center text */
  cursor: pointer; /* Pointer cursor */
  transition: background-color 0.3s; /* Smooth transition */
}

#add-product-btn:hover {
  background-color: green; /* Darker on hover */
}

#add-product-btn:active {
  background-color: green; /* Even darker on active */
}

.orders-details-link {
  color: white;
  background-color: green;  /* Or set it to the default link color */
  border-radius: 5px;
  padding: 5px;
  text-decoration: none;  /* Remove underline if needed */
}

.orders-details-link:hover {

  text-decoration: none;
}

.orders-container {
    max-width: 800px;
    margin: 30px auto; /* Center container horizontally */
    padding: 5px;
    background-color: #ffffff; /* White background for content */
    border-radius: 12px; /* More rounded corners for a softer look */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Subtle shadow for depth */
    border: 1px solid #e0e0e0; /* Light border for a cleaner edge */
    margin-top: 5px;
}

.orders-header {
    text-align: center;
    color: #333;
    font-weight: 600;
    font-size: 24px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.orders-table-container {
    max-height: 500px; /* Adjust height as needed */
    overflow-y: auto; /* Enable vertical scrolling if needed */
    overflow-x: hidden; /* Hide horizontal scrolling */
    border-radius: 8px; /* Match border radius with container */
    border: 1px solid #ddd; /* Border around the table container */
    height: 60vh;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0; /* No extra margin for a flush fit */
}

.orders-table th, .orders-table td {
    border: 1px solid #ddd;
    padding: 12px 15px;
    text-align: left;
    background-color: #fff;
}

.orders-table th {
    background-color: #f8f8f8; /* Slightly darker background for headers */
    color: #555;
    font-weight: bold;
}

.orders-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Alternate row color for readability */
}

.orders-table tr:hover {
    background-color: #f1f1f1; /* Highlight row on hover */
}



#backbtn,#nextbtn{
  width: 50px;
  cursor: pointer;
  margin: 40px;

}
.gallerywrap{
  display: flex;
  align-items: center;
  justify-content: center;
  margin:10% auto;
}
.explore  .gallery{
  width: 900px;
  display: flex;
  overflow-x: scroll;
}
.explore .salon .content .gallery div{
  width: 100%;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
  padding: 10px;
  justify-content: space-between space-evenly;
}

#features{
  padding: 5vw 8vw 0vw 8vw;
  text-align: center;

}

#features .viewmore{
  margin-top: -505px;

}
#features a{
  text-decoration:none ;
  background-color: blanchedalmond;
  font-size: 2.4rem;
  font-weight: 600 ;
  width: 100%;
  border-radius: 5px;
  margin-bottom: auto;
}
#features a.blue{
  color: #fff;
  background:goldenrod;
  transition: 0.4s;
} 
#features .headingsfeatures h1{
  border: #757373;
  color: #757373;
  font-weight: 600;
  
}

#features .fea_base{
  display: flex;
  justify-content: space-between space-evenly;
  text-align: center;
  flex-direction: row;
  margin-left: 10px;
  justify-content: center;
  padding: 50px;
  width: 100%;
  height: 50%;
  border-radius: 30px;

}
#features .fea_box{
  box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
  text-align: start;
  justify-content: space-between space-evenly;
  margin-left: 10px;
  justify-content: center;
  border-radius:20px;
  width: 100%;
  backdrop-filter: blur(10px);
  background-color: #757373;
}
#features .fea_box img{
  width: 80px;
}
#features .fea_box h3{
  font-size: 1.3rem;
  font-weight: 600;
  color: goldenrod;
  padding: 13px 0 7px 0;
}
#features .fea_box p{
  font-size: 1.3rem;
  font-weight: 400;
  color: whitesmoke;
  margin-bottom: 20px;
}
#homes_and_apartments {
 
  padding: 8vw 8vw 8vw 8vw;
  text-align: center;
}
#homes_and_apartments {
  text-align: start;
  height: 100%;
}
#homes_and_apartments .just_a_few{
  text-align: start;
  
  height: 100%;
  width: 300px;
 
}
#homes_and_apartments .images {
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-direction: row ;
  margin-top: 10px;
  position: relative;
}


#homes_and_apartments .just_a_few img{
  width: 300px;
}
#homes_and_apartments .star img{
  width: 20px;
}
#homes_and_apartments .images .details{
  padding: 10px 10px 0 10px;
}
#homes_and_apartments .just_a_few .details{
  background-color: rgb(165, 154, 91);
  color: black;
  line-height: 40px;
  text-align: center;
  border-radius: 20%;
  position: relative;
}
#homes_and_apartments .just_a_few .price{
  background-color: rgb(118, 118, 216);
  color: rgb(231, 231, 241);
  line-height: 20px;
  width: 70px;
  height: 50px;
  margin-top: 10px;
  border-radius: 20px;
}
#bloggers{
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 90%;
  margin-left: 80px;
  
}
#bloggers .services{
font-style: oblique;
font-weight: 200;
font-stretch: extra-condensed;
text-decoration: wavy;
color: #757373;
}
#bloggers h1{
color: #757373;

}
#bloggers p{
color: #757373;
font: bold;

}


  

/* course */

/* registration */
#registration {
  padding: 6vw 8vw 6vw 8vw;
  background-image: linear-gradient(rgba(60, 70, 170, 0.5), rgba(60, 70, 170, 0.5)),url("SPAPHOTOS/ambient\ background.jpg") ;
  height: 100%;
  width: 100%;
  margin-top: 10px;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: space-between;
  align-items:center ;

}

#registration .notice {
color: #fff;
}

#registration .notice h1{
  color: #fff;
}
#registration .notice .time{
  display: flex;
  margin-top: 40px;}

#registration .notice .time .date{
  text-align: center;
  padding: 13px 33px;
  background: rgb(255, 255, 255, 0.25);
  backdrop-filter: blur(40px);
  border-radius: 5px;
  box-shadow: 0 8px 32px 0;
  margin-top: 10px;
  font-weight: 600;

}

#registration .form h3{
  font-size: 40px;
  font: bold;
  color: rgb(240, 240, 247);


}
#registration .form {
  display: flex;
  border-radius: 8px;
  padding:50px ;
  background: #fff;
  flex-direction: column;
  box-shadow: 10px 8px 32px 10px rgba(60, 70, 170, 0.5);
  

}

#registration .form input{
  margin: 15px 0;
  padding: 15px 10px ;
  border: 1px solid rgb(84, 40, 240);
  outline: none;
}
#registration .form a.yellow{
  color: #fff;;
  background: goldenrod;
  transition: 0.4s;
  text-decoration:none ;
  background-color: blanchedalmond;
  font-size: 2.4rem;
  letter-spacing: 1px;
  padding: 10px 20px;
  font-weight: 600 ;
  border-radius: 5px;
  margin-top: 10px;
}
#registration .form a.yellow:hover{
  color: goldenrod;
  background:#fff;
}
#registration .form input::placeholder{
  font-size: 0.9rem;
  font-weight: 600;
  color: #757373;

}
#bloggers .services{
  display: flex;
  flex-direction: row;
  padding: 20px;
  justify-content: space-between;
  justify-content: space-evenly;
}
#bloggers .services .Salonservices{
margin-left: -100px;
padding: 15px;
}
#bloggers .services .Manicureservices{
padding: 15px;}

#bloggers .services .Barbershopservices{
margin-left:-100px ;
padding: 15px;

}
#bloggers .blog{
  display: flex;
  text-align: center;
  margin-top: 10px;
  padding: left;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  flex-direction: row;



}
#bloggers .blog .photosanddetails{
  background-image:url(SPAPHOTOS/beautiful-sky-line.jpg);
}

#bloggers .photosanddetails{
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: start;
  padding: 20px;
  height: 50%;
  width: 100%;
  margin-left: 5px;
  margin-right: 20px;
  background: rgb(255, 255, 255, 0.25);
  backdrop-filter: blur(40px);
  border-radius: 5px;
  box-shadow: 0 8px 32px 0;
  margin-top: 10px;
  font-weight: 600;
}
#bloggers .blog .photosanddetails img{
  width: 100%;
  inline-size: fit;
  padding: -70px 2px;
}#bloggers a{
  text-decoration:none ;
  background-color: blanchedalmond;
  font-size: 2.4rem;
  font-weight: 600 ;
  border-radius: 5px;

}
#bloggers a.blue{
  color: #fff;
  background: goldenrod;
  transition: 0.4s;
} 

.viewmore .bloggers
{
  margin-top: 100px;
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.viewmore .bloggers .blog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 30px;
}

.viewmore .bloggers .photosanddetails {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
  background: #fff;
  text-align: start;
  padding: 30px;
  width: calc(50% - 20px); /* Adjust width for two columns with gap */
  margin-bottom: 20px;
}

.viewmore .bloggers .photosanddetails img {
  width: 100%;
  object-fit: cover;
}

.pro-links{
  margin-top: 10px;
}

.pro-links i{
  padding: 10px 13px;
  cursor: pointer;
  border: 2px solid rgb(24, 24, 49);
  transition: 0.3 ease;

}
.pro-links i:hover{
  color: #fff;
  background: rgb(25, 25, 93);
  cursor: pointer;
  border: 2px solid rgb(24, 24, 49);
}
.contacts{
  position: relative;
  min-height: 100vh;
  padding: 50px 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}
.contacts .content {
  margin-top: 100px;
  max-width: 800px;
  text-align: center;

}
.contacts .content p{
  font-size:  18px;
  font-weight: 300;
  color: rgb(16, 8, 69);
}
.contactinfo{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  flex-direction: left;
}

.box .text{
  font-size:  20px;
  font-weight: 200;
  color: rgb(16, 8, 69);
  display: inline-flexbox;
  justify-content: center;
  align-items: top;
  flex-direction: column;
}
.box .text p{
  font-size:  14px;
  font-weight: 600;
  animation: name duration timing-function delay iteration-count direction fill-mode;
}

.contacts .container h2{
  display: flex;
  flex-direction: row;
  font-size:  25px;
  font-weight: 500;
  color: rgb(245, 245, 246);
  margin-left: -30%;
}
.contact form{
  font-size:  15px;
  font-weight: 500;
  color: #fff;
  margin-left: 20%;
  margin-top: 10px;
  background:#0f1528;
}

.container .contactinfo .box .icon{
  border-style:ridge;
  border-radius: 50px;
  background: #f2f2f4;
  justify-content: center;
 
}

.form-group{
  margin-top: auto;
 margin-bottom: auto;
}
.form-group .placeholder{
  min-width: fit-content;
}
.contact form .form-group label{
  padding: 5px 0;
  position: relative;
  pointer-events: none;
  transition: 0.5s;
  color: #757373;
}
.form-group input:focus ~ label{
  color: goldenrod;
  font-size: 12px;
  transform: translatey(-20px); 
}

#wcu{
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color:brown;
  width: 100%;
  height: 50%;
  margin-top: 20px;
}
.wcu{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color:white;
  width: 100%;
  height: 50%;
  margin-top: 20px;
}
.wcu .affordability{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color:black;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 55px;
  margin-left: 0;
  width: 25%;
  border-radius: 10px;
  margin-left: 10px;
}
.bigofferimg{
  justify-content: center;
}
.bigofferimg h1 {
  margin-top: 20px;
  margin-left: 0;
  margin-right: 0;
  animation: bulgeShrink 2s infinite; /* Adjust duration as needed */
  /* Optionally, add smooth transition for scaling */
  transition: transform 0.5s ease-in-out;
  text-align: center;
}
.bigofferimg img{
  align-items: center;
  justify-content: center;
 
}
.bigofferimg p{
  justify-content: center;
  text-align: center;
}

@keyframes bulgeShrink {
  0% {
    transform: scale(1); /* Initial size */
  }
  50% {
    transform: scale(1.2); /* Bulging size */
  }
  100% {
    transform: scale(1); /* Back to initial size */
  }
}



.add-to-cart-container {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  padding-top: 5px;
  border-radius: 5px;
  flex-direction: column; /* Stack the input and button vertically */
  margin-left: auto;
  margin-right: auto;
}

.add-to-cart-container label {
  display: flex;
  margin-top: 5px;
  padding-top: 5px;
  border-radius: 5px;
  flex-direction: column; /* Stack the input and button vertically */
  margin-left: auto;
  margin-right: auto;
  color: burlywood;
  font-weight: 600;

  /* Add heartbeat animation */
  animation: heartbeat 1.5s ease-in-out infinite; /* Apply animation */
}

/* Keyframes for heartbeat effect */
@keyframes heartbeat {
  0% {
    transform: scale(1); /* Start at normal size */
  }
  25% {
    transform: scale(1.05); /* Slightly grow */
  }
  50% {
    transform: scale(1); /* Return to normal size */
  }
  75% {
    transform: scale(1.05); /* Slightly grow again */
  }
  100% {
    transform: scale(1); /* Back to normal */
  }
}


.add-to-cart-container input {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  padding-top: 5px;
  border-radius: 5px;
  flex-direction: column; /* Stack the input and button vertically */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5px;
}
@media  (width: 800px) {


  .navbar {
    background-color: ghostwhite;  
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin-top: 50px;
    padding-top: 25px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.344);
    margin-bottom: 0;
    padding-bottom: 0;
    transition: top 0.3s, visibility 0s 0.3s; /* Smooth transition for hiding */
    width: fit-content;
    width: 100%;
    height: min-content;
  }

  
  /* Option 1: Using visibility to hide */
  .navbar.hidden {
    visibility: hidden; /* Navbar is hidden but still takes space */
    opacity: 0; /* Fade out effect */
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
  }
  
  /* Option 2: Using display to completely hide */
  .navbar.hidden {
    display: none; /* Navbar completely disappears and takes no space */
  }
  .nav-link a{
    background-color: transparent;
  }
  
  .nav-item{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
  
  }
  .nav-link {
    background-color: transparent;

   
    
  }

  
  .nav-link:hover{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
    color:brown;
  
  
  }
  
  .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    padding: 2px;
    margin-right: 0;
    width: fit-content;
    margin-top: 45px;
    margin-right: 40px;
  }
  
  .navbar-nav a {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    font-size:12px;
    margin-right: auto;
    justify-content: space-between;
    padding: 2px;
    margin-right: 2px;
    
  }

  .cart {

    margin-left: 25px;
  }

 
  .top-banner {
    background: linear-gradient(135deg,  rgb(0, 0, 82), purple, rgb(0, 0, 82)); /* Deep blue to black gradient */
    color: white; /* White text for contrast */
    text-align: center; /* Centered text */
    padding: 2px; /* Vertical padding */
    font-family: Arial, sans-serif; /* Clean, modern font */
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    position: fixed;
    z-index: 1000;
    margin-top: 0;
    width:100% ;
  
  }
  
  .top-banner a {
    color: #FFD700; /* Gold color for the phone number link */
    text-decoration: none; /* Remove underline from the link */
    width: 90%;
    color: white; 
    background-color: transparent; 
    margin-left: 8%; 
    
  }
  
  
  .top-banner a:hover {
    text-decoration: underline; /* Underline on hover for clarity */
  }

}

@media (max-width: 769px) {

  .navbar {
    background-color: ghostwhite;  
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin-top: 50px;
    padding-top: 5px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.344);
    margin-bottom: 0;
    padding-bottom: 0;
    transition: top 0.3s, visibility 0s 0.3s; /* Smooth transition for hiding */
    width: fit-content;
    width: 100%;
    height: min-content;
  }

  
  /* Option 1: Using visibility to hide */
  .navbar.hidden {
    visibility: hidden; /* Navbar is hidden but still takes space */
    opacity: 0; /* Fade out effect */
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
  }
  
  /* Option 2: Using display to completely hide */
  .navbar.hidden {
    display: none; /* Navbar completely disappears and takes no space */
  }
  .nav-link a{
    background-color: transparent;
  }
  
  .nav-item{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
  
  }
  .nav-link {
    background-color: transparent;

   
    
  }

  
  .nav-link:hover{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
    color:brown;
  
  
  }
  
  .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    padding: 2px;
    margin-right: 0;
    width: fit-content;
    margin-top: 45px;
    margin-right: 40px;
  }
  
  .navbar-nav a {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    font-size:12px;
    margin-right: auto;
    justify-content: space-between;
    padding: 2px;
    margin-right: 2px;
    
  }
  
  
  .navbar-nav a i{
    display: flex;
    flex-direction: row;
    padding: 2px;
    font-size: 8px;
    margin-left: 2px;
  }
  /* Styling for the logo container */
.logo {
  padding: 0; /* Space around the logo */
  border-radius: 5px; /* Rounded corners for the logo container */
  display: inline-block; /* Make the logo behave like a block element */
  transition: background-color 0.3s ease; /* Smooth transition for background */
  margin-left: 0;
  margin-top: 28px;
  width: 90px;
  margin-left: 8px;
}

/* Styling for the logo heading (TechXas) */
.logo h1 {
  margin: 0;
  font-weight: bold;
  font-size: 2.5rem; /* Adjust size for more emphasis */
  font-family: 'Press Start 2P', cursive; /* Apply the retro font */
  position: relative;
  color: white; /* Default color of the logo */
  transition: color 0.3s ease, transform 0.3s ease;
  text-align: center;
  text-transform: lowercase; /* Slightly space out the letters */
}

/* Styling for the logo subheading */
.logo h1 span {
  font-size: 1.5rem; /* Adjust size of the subheading */
  color: black; /* Add a nice contrasting color */
}
.logo div {
  font-size: 0.8rem;
  color: white;  /* Default subtitle color */
  transition: color 0.3s ease;
  padding: 5px;
}

/* Hover effect for the logo */
.logo:hover h1 {  /* Change to red on hover */
  transform: scale(1.1);  /* Slightly enlarge the logo text */
  animation: pulse 0.5s ease forwards;  /* Adding pulse animation */
}

.logo:hover div {
  animation: fadeInText 0.5s ease forwards; /* Text fade effect */
}

 
.top-banner {
  background: linear-gradient(135deg,  rgb(0, 0, 82), purple, rgb(0, 0, 82)); /* Deep blue to black gradient */
  color: white; /* White text for contrast */
  text-align: center; /* Centered text */
  padding: 2px; /* Vertical padding */
  font-family: Arial, sans-serif; /* Clean, modern font */
  font-size: 0.85rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  position: fixed;
  z-index: 1000;
  margin-top: 0;
  width:100% ;

}

.top-banner a {
  color: #FFD700; /* Gold color for the phone number link */
  text-decoration: none; /* Remove underline from the link */
  width: 90%;
  color: white; 
  background-color: transparent; 
  margin-left: 8%; 
  margin-top: 28px;
  
}


.top-banner a:hover {
  text-decoration: underline; /* Underline on hover for clarity */
}
  .hometop-container {
    margin-top: 120px;
    padding: 0;
  }
  .hometop-item {
    margin: 0 auto;
    position: relative;
  
  
    text-align: center;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex: 1 1 150px; /* Adjust size as needed */
    margin: 5px;
    margin-top: 0;
    padding-top: 2px;
    
    background-color: lavender;
    color: gray;
    text-decoration: none;
    display: inline-block;
    border: 1px solid lightgray; /* Light gray border */
    text-align: center;
  
  }
  
.hometop-item h5{
  color: gray;
  font-size: 10px;

}
.hometop-icon {
  font-size: 1.2rem;
  color: firebrick;; /* Adjust color as needed */
  margin-top: 5px;
}


  #login {
  font-size: 22px; /* Adjust the size as needed */
  font-weight: bold;
  color: goldenrod; /* White color for the text */
  text-decoration: none; /* Remove underline */
  position: relative; /* Needed for pseudo-elements */
  margin-bottom: 0;
  animation: none;
  cursor:default;
  }
  
  #signUp{
  font-size: 10px; /* Adjust the size as needed */
  font-weight: bold;
  color: black; /* White color for the text */
  text-decoration: none; /* Remove underline */
  margin-bottom: 0;
  animation: none;
  
  }
  .verbal-marketing{
    flex: 1;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    
  }
  .verbal-marketing .form label{
    font-size: 12px;
    font-weight: 200; 
  
  
  }
  .popular-brands-section{
    display: flex; 
    flex-direction: column;
    
  }
  .brand-item img{
  width: 90%;

  height: auto;
  margin-bottom:10px;
  border-radius: 0;
margin-left: 5%;
}
  
  .brand-item2 img{
  width: 70%;
  height: auto;
  margin-bottom: 10px;
  border-radius: 0;
  margin-left: 40px;

}
  /* Default layout for larger screens (2 images per row) */
.image-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 images per row */
  margin-top: 5px;
  background-color: white; /* Set background color to white */
  padding: 0;
  justify-items: center; /* Center images in their grid items */
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Individual Image Container */
.image-item-container {
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  width: 100%; /* Make the container take up full width available */
  text-align: center; /* Center the content inside */
  margin: 0;
}

.image-item-container .btn{

  margin-left: 2px;
}

/* Individual Image Styling */
.image-item {
  width: 100%; /* Make the image take up full container width */
  height: 200px; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow around images */
  padding: 5px;
}

.image-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bigger shadow on hover */
}

/* Caption Styling */
.image-caption {
  color: #333; /* Dark gray text */
  margin-top: 8px;
  font-weight: bold;
  text-transform: capitalize; /* Capitalize first letter */
}

.near-footer__top{

  display: flex;
  flex-direction: column;


}

  .laiheader-top-header {
    margin-top: 80px;
    padding-bottom: 50px;
    position: relative;
    background-color: white; /* Background color */
    display: flex;
    justify-content: center; /* Center the header content horizontally */
    align-items: center; /* Center items vertically */
    border-bottom: 5px solid brown; /* Light border at the bottom */
    padding: 2px;
  }
  
  .laiheader-header-content {
    margin-top: 80px;
    display: flex;
    justify-content: center; /* Space out items evenly within the header */
    align-items: center;
    width: 50%; /* Full width to use the available space */
    padding: 30px;
    height: min-content;
  }
  
  .laiheader-header-logo h1 {
    font-size: 28px; /* Increased font size for better visibility */
    color: white; /* White color for contrast with blue background */
    font-weight: bold; /* Bold font weight */
    font-family: 'Roboto', sans-serif; /* Use the Roboto font */
    position: relative; /* Needed for positioning pseudo-elements */
    overflow: hidden; /* Ensures text does not overflow its container */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3), 0 3px 6px rgba(0, 0, 0, 0.3); /* Basic shadow for 3D effect */
    transform: perspective(500px) rotateX(10deg); /* Adds perspective and rotation for 3D effect */
    padding: 2px;
  }
  
  
  
  /* Small tag/footer styling */
  .laiheader-header-logo h1::after {
    content: "Empowering Your Financial Future"; /* Tag text */
    display: block;
    font-size: 12px; /* Font size for the tag */
    font-weight: 900px;
    color: rgba(255, 255, 255, 0.7); /* Faint white color */
    font-family: 'Roboto', sans-serif; /* Same font for consistency */
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); /* Subtle shadow for clarity */
    margin-top: 10px; /* Space between the heading and the tag */
    text-align: center; /* Center the tag text */
  }
  
  /* Create the wavy effect with a CSS animation */
  .laiheader-header-logo h1::after {
    animation: wave 3s infinite; /* Apply wave animation */
  }
  
  @keyframes wave {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  
  .laiheader-header-contact {
    display: flex;
    flex-direction: row; /* Align contact numbers in a row */
    align-items: center; /* Center contact numbers vertically */
    margin: 5px; /* Space between contact section and social media */
    justify-content: center;
  }
  
  .laiheader-contact-text {
    font-size: 12px; /* Font size for "Call Us" text */
    color: black; /* White color for visibility */
    margin-right: 1px; /* Space between "Call Us" text and contact numbers */
    font-weight: 600;
    padding: 12px;
    width: 100%;
    display: inline-block;
  }
  .laiheader-contact-text i{
    font-size: 12px; /* Font size for "Call Us" text */
    color: black; /* White color for visibility */
    margin-right: 1px; /* Space between "Call Us" text and contact numbers */
    font-weight: 600;
    padding: 2px;
    width: 100%;
    display: flex;
    flex-direction: row;  }
  
  .laiheader-contact-number {
    font-size: 12px; /* Font size */
    color: black; /* White color for contact numbers */
    padding: 10px;
    font-weight: 900;
  
  }
  
  .laiheader-header-social-media {
    display: flex;
    align-items: center; /* Center social media icons vertically */
    justify-content: center;
    font-size: 10px;
  }
  
  .laiheader-header-social-media a {
    color: black; /* White color for icons */
    margin-left: 5px; /* Space between icons */
    text-decoration: none; /* Remove underline from links */
    padding: 2px;
  }
  
  .laiheader-header-social-media i {
    font-size: 12px; /* Adjust icon size */
    transition: color 0.3s; /* Smooth color transition on hover */
  }
  
  .laiheader-header-social-media a:hover i {
    color: white; /* Change icon color on hover */
  }
  
  /* Adding a hover effect */
  
  
  @keyframes flashColors {
    0% { color: black; }
    25% { color: goldenrod; }
    50% { color: goldenrod; }
    100% { color: black; }
  }

  #wcuh{
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color:rgba(255, 255, 255, 0.492);
    width: 100%;
    height: max-content;
    padding: 5px;
}
#wcuh .hreasons{
  display: flex;
  justify-content: center;
  width: 100%;
  font-weight: 700;
  padding: 2px;
  margin-top: 5px;
      
}

#wcuh .hreasons h1{
    align-items: center;
    text-align: center;
    width: 100%;
    font-weight: 700;
    font-size: x-large;
    color: black;
    padding: 1px;
    margin-top: 15px;
        
}
#wcuh .hreasons p{
    margin: 0;
    margin-left: 10px;
    align-items: center;
    width: 100%;
    height: 50%;
    
}
.wcuiconsh{
    display: flex;
    flex-direction: row;
    margin-left: 20px;
    justify-content: center;
    padding-bottom: 40px;
}
.affordabilityh,
.securityh {
    margin-left: 2px;
    padding: 5px;
    border-radius: 10px;
    
}
.affordabilityh {
    justify-content: center;
    align-items: center;
    margin-right: 30px;
    margin-top: 100px;
}

.securityh {
    margin-top: 5px;
    margin-right: 0;
    background-color: none;
    margin-left: 20px;
    padding: 20px;

}
.securityh img{
    border-radius: 10px;
}

.header__image__card-1 {
  top: 25%;
  left: 0;
  transform: translate(-5%, -50%);
  padding: 15px;
  background-color: rgba(213, 213, 1, 0.83);
  font-weight: 700;
  margin-left: 15px;
}

.header__image__card-2 {
  top: 15%;
  transform: translateY(-50%);
  background-color: rgba(17, 120, 254, 0.51);
  font-weight: 700;
  margin-right: 20px;
  padding: 2px;
  margin-left: 10px;
}

.header__image__card-3 {
  top: 60%;
  left: 0;
  transform: translateY(-50%);
  padding: 10px;
  background-color: rgba(165, 27, 27, 0.795);
  font-weight: 700;
}

.header__image__card-4 {
  top: 65%;
  right: 0;
  transform: translateY(-50%);
  padding: 10px;
  background-color: rgba(250, 245, 204, 0.852);
  font-weight: 700;
}

index-product-section {
  padding: 20px;
  
}

.index-section-title {
  font-size: 1.2rem;
  text-align: center;
  color: black;
  padding: 4px;
  font-weight: 900;
}

.index-product-list {
  display: flex;
  overflow-x: hidden; /* Allows horizontal scrolling */
  gap: 20px; /* Adjust the gap between items as needed */
  width: 100%;

}
#product-list {
  display: flex;
  overflow-x: hidden;
  scroll-behavior: auto; /* Smooth scrolling behavior */
  justify-content: center;
}


.index-product-list::-webkit-scrollbar {
  display: none;
}

.index-product-item {
  flex: none; /* Ensures items don't shrink and take up fixed space */
  width: 100%; /* Adjust width as needed */
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 15px;
  scroll-snap-align: center; /* Ensures items snap into place */
  scroll-behavior: smooth; /* Smooth scrolling behavior */
  margin-left: auto;

}

.index-product-image {
  border-radius: 10px;
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.index-product-name {
  font-size: 1.2rem;
  margin: 10px 0;
}

.formhead{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

}
.formhead h1 {
  align-items: center;
  text-align: center;
  font-weight: 700;
  font-size: x-large;
  color:black;
  position: relative; /* Ensure positioning context for pseudo-element */
  margin-top: 20px;
  padding: 10px 5px;
  margin-right: auto;
  margin-left: auto;
 

}

.formhead h1::after {
  content: ''; /* Required for pseudo-elements */
  position: absolute; /* Position relative to the h1 */
  left: 0;
  bottom: -8px; /* Adjust as needed to control distance from text */
  width: 100%;
  height: 3px; /* Adjust thickness of the dashed line */
  background-image: 
      linear-gradient(to right, transparent calc(33.33% - 1px), rgba(49, 50, 0, 0.945) calc(33.33% - 1px), rgba(49, 50, 0, 0.945) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px), rgba(49, 50, 0, 0.945) calc(66.66% - 1px), rgba(49, 50, 0, 0.945) 66.66%, transparent 66.66%);
  background-size: 6px 3px; /* Adjust dash length (6px) and thickness (3px) */
  background-repeat: repeat-x; /* Repeat the gradient horizontally */
  transition: background-position 0.3s ease; /* Smooth transition for animation */
}

.formhead h1:hover::after {
  background-position: 100% 0; /* Move the gradient to animate the dash effect */
}
.flash-messages-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Ensure full height to center vertically */
  margin-top: 20px; /* Adjust margin as needed */
  transition: opacity 1s ease-out; /* Add transition for fading */
  
}

#wcu{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color:black;
  width: 100%;
  height: 50%;
}
.wcu{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color:white;
  width: 100%;
  height: 50%;
  margin-top: 20px;
}
.wcu .affordability{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color:black;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

#wcu .reasons h1{
  align-items: center;
  text-align: center;
  width: 100%;
  font-weight: 700;
  font-size: xx-large;
  color: goldenrod;
  margin-top: 10px;
  padding: 20px;
      
}
#wcu .reasons p{

  margin-left: 40px;
  align-items: center;
  
}

.affordability {
  justify-content: center;
  align-items: center;
  margin-left: 0;
  padding: auto;
  margin-top: 20px;
  padding: 20px;

}
span{
  font-weight: 500;
  margin-left: 0;
  margin-right: auto;

}

#fut{
  width: 100%;
  display: flex;
  background-color: brown;
  margin-top: 20px;
}
.index-reasons {
  display: inline-block;
  padding: 5px;
  border-radius: 8px;
  margin-top: 30px; /* Centers the block horizontally */
  width: 100%;
  margin-left: 0;

}

.index-reasons h1 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: black;
}

#fut .index-reasons p {
  font-size: 1rem;
  color: white;
  line-height: 1.6;
  margin-bottom: 20px;


}

.index-mail{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 80%;
}

.index-callus {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 200px;
}


.index-mail i, .index-callus i {
  font-size: 1.5rem;
}
.index-callus{
  width: max-content;
  margin-top: 20px;
}

.index-mail span, .index-callus span {
  font-size: 0.8rem;
  color: #333;
}

.index-affiliates {
  margin-top: 20px;
}

.index-affiliates h1 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: white;
}

.index-affiliates p {
  font-size: 1rem;
  color: white;
  margin: 5px 0;
}

.index-affiliates i {
  margin-right: 8px;
  color: white;


}

section#wcuindextop {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 0;
}

.reasons img {
  max-width:300px;
  height: 75%;
  border-radius: 20px;
  padding: 6px;
}

.foot {
  margin-bottom: 1px;
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
  border-radius: 25px;
  background-color: #f1f1f1;
  display: flex;
  flex-direction: column;
  line-height: 0.2;
  height: max-content;
  width: min-content;
}

.foot p {
  color: black;
  font-weight: 800;
  font-size: 14px;
  margin: 0;
}
.alert {
  border-color: #c3e6cb; /* Border color */
  color: white; /* Text color */
  text-align: center;
  font-weight: 500; /* Updated to use font-weight */
  transition: opacity 1s ease-out; /* Add transition for fading */
  position: relative;
  margin-top: 120px;
}

.alert::after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 1s ease-out;
  margin-top: 90px;
}

#electronicsp {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: black;
  overflow: hidden;
  position: relative;
  width: 100%;
  border-radius: 20px;
  margin-left: auto;
  margin-right: auto;


}
#wcuindextop .reasons p {
  margin-left: 0;
  display: flex;
}

@keyframes bulgeShrink {
  0% {
    transform: scale(1); /* Initial size */
  }
  50% {
    transform: scale(1.2); /* Bulging size */
  }
  100% {
    transform: scale(1); /* Back to initial size */
  }
}

/* Apply the animation to the image */
.bigofferimg h1 {
  margin-left: 0;
  margin-right: 0;
  animation: bulgeShrink 2s infinite; /* Adjust duration as needed */
  /* Optionally, add smooth transition for scaling */
  transition: transform 0.5s ease-in-out;
}
.bigofferimg img{
  width: max-content;
  align-items: center;
  justify-content: center;
  margin-right:auto ;
  margin-left: auto;
}
.bigofferimg p{
  justify-content: center;
  text-align: center;
}
/* General Styles for Product Detail Container */
.product-detail-container {
  padding-top: 80px; /* Ensure padding on smaller screens */
  display: flex;
  flex-direction: column; /* Stack all sections vertically */
  align-items: center; /* Centers the content horizontally */
  margin-top: 50px;
  height: min-content;
}

/* Style the individual sections */
.product-detail-info {
  display: flex;
  flex-direction: column; /* Stack the content of this section vertically */
  width: 100%;
  margin-bottom: 20px; /* Adds space between sections */
}

.special-features {
  width: 100%;
  margin-bottom: 20px; /* Adds space between sections */
}

.product-detail-text {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.add-to-cart-container {
  display: flex;
  justify-content: center;
  margin-top: 5px;
  padding-top: 5px;
  border-radius: 5px;
  flex-direction: column; /* Stack the input and button vertically */
  margin-left: auto;
  margin-right: auto;
}
.add-to-cart-container label {
  display: flex;
  margin-top: 5px;
  padding-top: 5px;
  border-radius: 5px;
  flex-direction: column; /* Stack the input and button vertically */
  margin-left: auto;
  margin-right: auto;
  color: burlywood;
  font-weight: 600;

  /* Add heartbeat animation */
  animation: heartbeat 1.5s ease-in-out infinite; /* Apply animation */
}

/* Keyframes for heartbeat effect */
@keyframes heartbeat {
  0% {
    transform: scale(1); /* Start at normal size */
  }
  25% {
    transform: scale(1.05); /* Slightly grow */
  }
  50% {
    transform: scale(1); /* Return to normal size */
  }
  75% {
    transform: scale(1.05); /* Slightly grow again */
  }
  100% {
    transform: scale(1); /* Back to normal */
  }
}
.special-features h3 {
  font-size: 1.6em;
  color: white;
  background-color: #ff6347;
  padding: 10px;
  text-align: center;
  margin-bottom: 15px;
  text-transform: uppercase;
  border-radius: 8px;
  margin-left: 0;
}
.add-to-cart-container input {
  display: flex;
  margin-top: 5px;
  padding-top: 5px;
  border-radius: 5px;
  flex-direction: column; /* Stack the input and button vertically */
  margin-left:auto;
  margin-right: auto;
  color:brown;
  font-weight: 600;
}
.discount-section {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px;
  margin-top: 0;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.discount-item {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: 5px;
}
.discount-item h3 {
margin-left: 0;
}
.delivery-info h3{
  margin-left: 0;
}
.refurbished {
  background-color: #ffeb3b;
}
.new {
  background-color: #4caf50;
  color: white;
}



.add-to-cart-container button {
  background-color: orange;
  color: white;
  padding: 8px;
  margin-left: 5px;
  border-radius: 5px;
  cursor: pointer;
}

.add-to-cart-container input {
  margin-bottom: 10px; /* Space between input and button */
}

/* Responsive styles for specific elements */
.product-detail-img {
  width: 100%;
  height: 400px; /* Ensure images are responsive */
  object-fit: contain;
  padding: 5px;
}

.product-detail-text,
.special-features {
  width: 100%; /* Ensure sections fill the available width */
  padding: 5px; /* Provide some padding for readability */
  box-sizing: border-box; /* Prevent overflow */
  margin-left: 0;
}


}
/* Media query for screen widths between 390px and 450px */
@media (min-width: 390px) and (max-width: 450px) {
  .about-us-image {
    flex: 1;
    width: 250px;
    height: 350px;
    margin-right: 20px;
    background-color: red;
  }
}

@media (max-width: 400px) {
  .navbar {
    background-color: ghostwhite;  
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin-top: 50px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.344);
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    transition: top 0.3s, visibility 0s 0.3s; /* Smooth transition for hiding */
    width: fit-content;
    padding: 0;
    width: 100%;
  }

  
  /* Option 1: Using visibility to hide */
  .navbar.hidden {
    visibility: hidden; /* Navbar is hidden but still takes space */
    opacity: 0; /* Fade out effect */
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
  }
  
  /* Option 2: Using display to completely hide */
  .navbar.hidden {
    display: none; /* Navbar completely disappears and takes no space */
  }
  .nav-link a{
    background-color: transparent;
  }
  
  .nav-item{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
  
  }
  .nav-link {
    background-color: transparent;

   
    
  }

  
  .nav-link:hover{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
    color:brown;
  
  
  }
  
  .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    padding: 5px;
    margin-right: 0;
    width: fit-content;
    margin-top: 45px;
  }
  
  .navbar-nav a {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    font-size: 8px;
    margin-right: auto;
    justify-content: space-between;
    padding: 2px;
    margin-left:5px ;
    margin-right: 2px;
  }
  
  
  .navbar-nav a i{
    display: flex;
    flex-direction: row;
    padding: 0;
    font-size: 8px;
    margin-left: -2px;
  }
  /* Styling for the logo container */
.logo {
  padding: 0; /* Space around the logo */
  border-radius: 5px; /* Rounded corners for the logo container */
  display: inline-block; /* Make the logo behave like a block element */
  transition: background-color 0.3s ease; /* Smooth transition for background */
  margin-left: 0;
  margin-top: 28px;
  width: 60px;
}

/* Styling for the logo heading (TechXas) */
.logo h1 {
  margin: 0;
  font-weight: bold;
  font-size: 2.5rem; /* Adjust size for more emphasis */
  font-family: 'Press Start 2P', cursive; /* Apply the retro font */
  position: relative;
  color: white; /* Default color of the logo */
  transition: color 0.3s ease, transform 0.3s ease;
  text-align: center;
  text-transform: lowercase; /* Slightly space out the letters */
}

/* Styling for the logo subheading */
.logo h1 span {
  font-size: 1.5rem; /* Adjust size of the subheading */
  color: black; /* Add a nice contrasting color */
}
.logo div {
  font-size: 0.8rem;
  color: white;  /* Default subtitle color */
  transition: color 0.3s ease;
  padding: 5px;
}

/* Hover effect for the logo */
.logo:hover h1 {  /* Change to red on hover */
  transform: scale(1.1);  /* Slightly enlarge the logo text */
  animation: pulse 0.5s ease forwards;  /* Adding pulse animation */
}

.logo:hover div {
  animation: fadeInText 0.5s ease forwards; /* Text fade effect */
}

 
.top-banner {
  background: linear-gradient(135deg,  rgb(0, 0, 82), purple, rgb(0, 0, 82)); /* Deep blue to black gradient */
  color: white; /* White text for contrast */
  text-align: center; /* Centered text */
  padding: 2px; /* Vertical padding */
  font-family: Arial, sans-serif; /* Clean, modern font */
  font-size: 0.85rem;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  position: fixed;
  z-index: 1000;
  margin-top: 0;
  width:100% ;

}

.top-banner a {
  color: #FFD700; /* Gold color for the phone number link */
  text-decoration: none; /* Remove underline from the link */
  width: 90%;
  color: white; 
  background-color: transparent; 
  margin-left: 8%; 
  margin-top: 28px;
  
}


.top-banner a:hover {
  text-decoration: underline; /* Underline on hover for clarity */
}
  .hometop-container {
    margin-top: 120px;
    padding: 0;
  }
  .hometop-item {
    margin: 0 auto;
    background:white;
    position: relative;
  
  
    text-align: center;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex: 1 1 150px; /* Adjust size as needed */
    margin: 5px;
    margin-top: 5px;
    padding-top: 2px;
    
    background-color: white;
    color: gray;
    text-decoration: none;
    display: inline-block;
    border: 1px solid lightgray; /* Light gray border */
    text-align: center;
  
  }
  
.hometop-item h5{
  color: gray;
  font-size: 10px;

}
.hometop-icon {
  font-size: 1.2rem;
  color: firebrick;; /* Adjust color as needed */
  margin-top: 5px;
}


/* Header for the section */
.midsec-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 0;
  margin-top: 8px;
}

.midsec-header h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.midsec-header p {
  font-size: 14px;
  color: #777;
  margin-top: 0;
}
/* Default layout for larger screens (2 images per row) */
.image-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 images per row */
  margin-top: 5px;
  background-color: white; /* Set background color to white */
  padding: 0;
  justify-items: center; /* Center images in their grid items */
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Individual Image Container */
.image-item-container {
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  width: 100%; /* Make the container take up full width available */
  text-align: center; /* Center the content inside */
  margin: 0;
}

.image-item-container .btn{

  margin-left: 2px;
}

/* Individual Image Styling */
.image-item {
  width: 100%; /* Make the image take up full container width */
  height: 200px; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow around images */
  padding: 5px;
}

.image-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bigger shadow on hover */
}

/* Caption Styling */
.image-caption {
  color: #333; /* Dark gray text */
  margin-top: 8px;
  font-weight: bold;
  text-transform: capitalize; /* Capitalize first letter */
}


/* Container for the 3 smaller sections */
.midsec {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* Spaces out the sections evenly */
  margin-top: 2px;
  padding: 5px;
  width: 100%; /* Take full width of the container */
  gap: 2px; /* Adds space between the items */
  flex-wrap: wrap; /* Ensures responsiveness */
  margin-left: 0;
}

/* Styles for each section */
.midsec-box {
  background-color: #ffffff;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  flex: 1;
  max-width: 320px;
  min-width: 280px;
  padding: 50px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid lightgray; /* Light gray border */
  margin-left: 0;

}

/* Section Title */
.midsec-box h4 {
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Section Description */
.midsec-box p {
  color: #555;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Button Style */
.midsec-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
}

/* Hover effect for buttons */
.midsec-button:hover {
  background-color: #0056b3;
}

/* Hover effect for each section */
.midsec-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.verbal-marketing{
  flex: 1;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
  
}
.verbal-marketing .form label{
  font-size: 12px;
  font-weight: 200; 


}
.popular-brands-section{
  display: flex; 
  flex-direction: column;
  
}

.about-us-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  padding-bottom: 40px;
}



.about-us-image {
    flex: 1;
    width: 250px;
    height: 350px;
    margin-right: 20px;
    background-color: red;

}
}
@media (max-width: 500px) {

 
    
        .navbar-nav a {
            display: flex
    ;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            margin-right: auto;
            justify-content: space-between;
            padding: 1px;
        }
    
        .logo{
    
          margin-left: -5px;
    
        }
    
        .logo img{
    
          width: 50px;
        }
    
        .cart{
          margin-left: 5px;
          width: 60px;
        }
/* Equipment Section */
.equipment-section {
  padding-top: 80px;
  background-image: url('/static/SPAPHOTOS/imagex.jpg');
  margin-bottom: 0;
  margin-top: 80px;
  padding-bottom: 0;
}

.equipment-section h2 {
  margin-top: 75px;
  padding: 5px;
  margin-left: 10px;
  color: black;
  display: flex;
  font-size: 20px;
  font-weight: 300;
}

.checkmark {
  margin-right: 8px; /* Space between the tick and the text */
  color: white; /* Adjust color as needed */
  font-size: 2rem; /* Increase size for thickness */
  font-weight: bold; /* Make it bold */
  transform: scaleY(1.5); /* Stretch vertically for longer appearance */
  margin-top: -20px;
}

/* Equipment Container Grid */
.equipment-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Change to 2 columns for 475px */
  justify-items: center; /* Centers items horizontally */
  padding: 20px;
  margin-left: 0;
}
.equipment-card {
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #0a006850;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.3sease;
  width: 90px;
  height: min-content;
  margin-left: 0.8px;
  margin-top: 5px;
}
}
@media (max-width: 475px) {
 
  /* Navbar Styling */
  .navbar {
    background-color: ghostwhite;
    justify-content: flex-start; /* Align logo to the left */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin-top: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.344);
    padding-top: 40px;
    margin-bottom: 0;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack logo and navbar items vertically */
    align-items: center;
  }

  /* Logo Styling */
  .logo {
    margin-bottom: 0; /* Space between logo and navbar items */
    margin-right: 20px;
  }

  .logo img {
    width: 50px; /* Adjust logo size for smaller screens */
    margin-right: 20px;
  }
  

  /* Navbar Links Container */
  .navbar-nav {
    display: flex;
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center links horizontally */
    margin-top: 5px; /* Space between logo and navbar items */
  
  }

  /* Individual Nav Items */
  .navbar-nav a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Align links to the left */
    font-size: 10px; /* Adjust font size for better readability */
    padding: 2px;
    width: 80%;
    text-align: center;
    margin-left: 2%;
    margin-top: 0;
  }

  /* Cart Icon */
  .cart {
    margin-left: 10px;
    width: 60px; /* Adjust size */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  /* Cart Icon Styling */
  .cart i {
    font-size: 20px;
  }

  /* Social Media Icons */
  .navbar-nav a i {
    font-size: 12px;
    margin-left: 2px;

  }

  /* Adjust the Sign Up and Login Links */
  .nav-link {
    font-size: 12px;
  }

  /* Nav Link Hover Effect */
  .nav-link:hover {
    background-color: transparent;
    transform: none;
    color: brown;
  }

  
 
  
  .top-banner {
    background: linear-gradient(135deg,  rgb(0, 0, 82), purple, rgb(0, 0, 82)); /* Deep blue to black gradient */
    color: white; /* White text for contrast */
    text-align: center; /* Centered text */
    padding: 2px; /* Vertical padding */
    font-family: Arial, sans-serif; /* Clean, modern font */
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    position: fixed;
    z-index: 1000;
    margin-top: 0;
    width:100% ;

  }
  
  .top-banner a {
    color: #FFD700; /* Gold color for the phone number link */
    text-decoration: none; /* Remove underline from the link */
    width: 90%;
    color: white; 
    background-color: transparent; 
    margin-left: 8%; 
    margin-top: 28px;
    
  }
  
  
  .top-banner a:hover {
    text-decoration: underline; /* Underline on hover for clarity */
  }
  .hometop-container {
    margin-top: 120px;
    padding: 0;
  }
  .hometop-item {
    margin: 0 auto;
    position: relative;
  
  
    text-align: center;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex: 1 1 150px; /* Adjust size as needed */
    margin: 5px;
    margin-top: 5px;
    padding-top: 2px;
    
    background-color: lavender;
    color: gray;
    text-decoration: none;
    display: inline-block;
    border: 1px solid lightgray; /* Light gray border */
    text-align: center;
  
  }
  
.hometop-item h5{
  color: gray;
  font-size: 10px;

}
.hometop-icon {
  font-size: 1.2rem;
  color: firebrick;; /* Adjust color as needed */
  margin-top: 5px;
}


/* Header for the section */
.midsec-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 0;
  margin-top: 8px;
}

.midsec-header h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.midsec-header p {
  font-size: 14px;
  color: #777;
  margin-top: 0;
}
/* Default layout for larger screens (2 images per row) */
.image-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 images per row */
  margin-top: 5px;
  background-color: white; /* Set background color to white */
  padding: 0;
  justify-items: center; /* Center images in their grid items */
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Individual Image Container */
.image-item-container {
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  width: 100%; /* Make the container take up full width available */
  text-align: center; /* Center the content inside */
  margin: 0;
}

.image-item-container .btn{

  margin-left: 2px;
}

/* Individual Image Styling */
.image-item {
  width: 100%; /* Make the image take up full container width */
  height: 200px; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow around images */
  padding: 5px;
}

.image-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bigger shadow on hover */
}

/* Caption Styling */
.image-caption {
  color: #333; /* Dark gray text */
  margin-top: 8px;
  font-weight: bold;
  text-transform: capitalize; /* Capitalize first letter */
}


/* Container for the 3 smaller sections */
.midsec {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* Spaces out the sections evenly */
  margin-top: 2px;
  padding: 5px;
  width: 100%; /* Take full width of the container */
  gap: 2px; /* Adds space between the items */
  flex-wrap: wrap; /* Ensures responsiveness */
  margin-left: 0;
}

/* Styles for each section */
.midsec-box {
  background-color: lavenderblush;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  flex: 1;
  max-width: 320px;
  min-width: 280px;
  padding: 50px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid lightgray; /* Light gray border */
  margin-left: 0;

}

/* Section Title */
.midsec-box h4 {
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Section Description */
.midsec-box p {
  color: #555;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Button Style */
.midsec-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
}

/* Hover effect for buttons */
.midsec-button:hover {
  background-color: #0056b3;
}

/* Hover effect for each section */
.midsec-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.verbal-marketing{
  flex: 1;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
  
}
.verbal-marketing .form label{
  font-size: 12px;
  font-weight: 200; 


}
.popular-brands-section{
  display: flex; 
  flex-direction: column;
  
}

.about-us-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
  padding-bottom: 40px;
}



.about-us-image {
  flex: 1;
  width: 400px;
  height: 500px;
  margin-right: 20px;
  background-color: red;
}

  .laiheader-top-header {
    padding: 10px; /* Adjust padding for smaller screens */
    margin-top: 60px; /* Reduce margin to fit small screens */
  }

  .laiheader-header-content {
    padding: 15px; /* Adjust padding */
    width: 100%; /* Full width for smaller screens */
  }

  .laiheader-header-logo h1 {
    font-size: 22px; /* Smaller font size */
    padding: 0; /* Remove padding for a tighter look */
  }

  .laiheader-header-logo h1::after {
    font-size: 10px; /* Smaller font size for the tagline */
    margin-top: 5px; /* Reduce space above tagline */
  }

  .laiheader-contact-text,
  .laiheader-contact-text i {
    font-size: 10px; /* Smaller font size for contact text */
    padding: 5px; /* Adjust padding */
  }

  .laiheader-contact-number {
    font-size: 10px; /* Smaller font size for contact numbers */
    padding: 5px; /* Adjust padding */
  }

  .laiheader-header-social-media {
    font-size: 8px; /* Smaller font size for social media icons */
  }

  .laiheader-header-social-media a {
    margin-left: 3px; /* Adjust spacing between icons */
  }

  .laiheader-header-social-media i {
    font-size: 10px; /* Smaller font size for icons */
  }

  .index-product-list {
    gap: 10px; /* Reduce gap between items */
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping */
    overflow-x: auto; /* Allow horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling */
    gap: 2px; 
  }
  #product-list {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth; /* Smooth scrolling behavior */
    max-width: 100%;
    justify-content: center;
  }
  
.index-product-list {
  -ms-overflow-style: none; /* Hide scrollbar for Internet Explorer and Edge */
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

  .index-product-item {
    width: 100%; /* Full width for better fitting */
    padding: 10px; /* Adjust padding */
    
  }

  .index-product-name {
    font-size: 1rem; /* Smaller font size for product names */
  }

  .formhead h1 {
    font-size: 1.5rem; /* Adjust font size */
    padding: 5px; /* Adjust padding */
  }

  .formhead h1::after {
    height: 2px; /* Adjust thickness of the dashed line */
  }

  .flash-messages-container {
    margin-top: 10px; /* Reduce margin for smaller screens */
  }

  #wcu,
  .wcu {
    height: auto; /* Allow container to grow with content */
    padding: 10px; /* Adjust padding */
  }

  .wcu .affordability,
  .wcu .securityh {
    flex-direction: column; /* Stack items vertically */
    padding: 10px; /* Adjust padding */
  }

  .affordabilityh,
  .securityh {
    margin: 10px 0; /* Adjust margin */
  }

  .header__image__card-1,
  .header__image__card-2,
  .header__image__card-3,
  .header__image__card-4 {
    font-size: 0.9rem; /* Adjust font size for cards */
    padding: 10px; /* Adjust padding */
  }

  .index-reasons h1 {
    font-size: 1.2rem; /* Adjust font size */
  }

    #fut {
      width: 100%;
      display: flex;
      background-color: indigo;
      margin-top: 10px; /* Reduced margin for smaller screens */
      justify-content: center;
      flex-direction: column; /* Stack elements vertically */
    }
  
    /* Adjusting .index-reasons */
    .index-reasons {
      display: inline-block;
      padding: 10px; /* Increased padding for better readability */
      border-radius: 8px;
      margin-top: 10px; /* Adjusted margin */
      width: 100%;
    }
  
    .index-reasons h1 {
      font-size: 1.5rem; /* Reduced font size for smaller screens */
      margin-bottom: 15px; /* Adjusted margin */
      color: whitesmoke;
      padding-top: 10px; /* Adjusted padding */
    }
  
    .index-reasons p, .index-reasons h2 {
      font-size: 0.9rem; /* Reduced font size for smaller screens */
      color: white;
      line-height: 1.4; /* Adjusted line height */
      width: 100%; /* Full width for better fit */
    }
  
    /* Adjusting .index-email */
    .index-email {
      gap: 5px; /* Reduced gap */
      width: 100%; /* Full width */
      display: flex;
      flex-direction: column; /* Stack items vertically */
      align-items: flex-start; /* Align items to the start */
    }
  
    /* Adjusting .index-mail and .index-callus */
    .index-mail, .index-callus {
      display: flex;
      flex-direction: column; /* Stack items vertically */
      align-items: flex-start; /* Align items to the start */
      gap: 5px; /* Reduced gap */
      background: brown;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      width: 100%; /* Full width */
      height: min-content;
    }
  
    .index-mail i, .index-callus i {
      font-size: 1.2rem; /* Reduced icon size */
      color: white;
    }
  
    .index-mail span, .index-callus span {
      font-size: 0.8rem; /* Reduced font size */
      color: white;
    }
  
    /* Adjusting .index-callus */
    .index-callus {
      margin-top: 10px; /* Adjusted margin */
    }
  
  
    .index-affiliates h1 {
      font-size: 1.2rem; /* Reduced font size */
      margin-bottom: 10px; /* Adjusted margin */
      color: white;
      font-weight: 800;
    }
  
    .index-affiliates p {
      font-size: 0.9rem; /* Reduced font size */
      color: white;
      margin: 5px 0;
    }
  
    .index-affiliates i {
      font-size: 1rem; /* Reduced icon size */
      margin-right: 6px; /* Adjusted margin */
      color: white;
    }
  

  section#wcuindextop {
    padding: 10px; /* Adjust padding */
  }

  .reasons img {
    width: 100%; /* Full width for better fitting */
    height: auto; /* Maintain aspect ratio */
  }

  .foot {
    padding: 10px; /* Adjust padding */
    font-size: 12px; /* Smaller font size */
  }

  .foot p {
    font-size: 12px; /* Smaller font size */
  }

  #electronicsp {
    flex-direction: column; /* Stack items vertically */
  }

  .bigofferimg h1 {
    font-size: 1rem; /* Adjust font size */
  }

  .bigofferimg img {
    width: 100%; /* Full width for better fitting */
    margin: 0 auto; /* Center image */
  }

  .bigofferimg p {
    font-size: 0.8rem; /* Adjust font size */
  }


  .ttastyle{
    display: flex;
    flex-direction: column;
    }

}
@media (max-width: 360px) {
  .equipment-card  {

    margin-left: 2px;
}

  
.equipment-card:hover {
  transform: scale(1.05);
}

.equipment-card img {
  width: 70px;  /* Adjust width as needed */
  height: 80px; /* Adjust height to match */
  border-radius: 10%; /* Makes the image circular */
  object-fit: cover; /* Ensures the image covers the dimensions without distortion */
  margin-bottom: 8px; /* Space between the image and text */
}
.equipment-card p {
  margin-top: 8px;
  font-weight: 600; /* Semi-bold for a balanced look */
  font-size: 0.8rem; /* Adjust font size for readability */
  color: white; /* Darker color for better legibility */
  line-height: 1.5; /* Improve line spacing for clarity */
  text-transform: capitalize; /* Optional: Capitalize the first letter of each word for consistency */
  margin-bottom: 12px; /* Add bottom margin for spacing between paragraphs */
  padding: 5px; /* Padding to give text room inside the background */
  border-radius: 8px; /* Rounded corners for a soft look */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtle box shadow for depth */
  transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effects */
}
  .navbar {
    background-color: ghostwhite;  
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin-top: 50px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.344);
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    transition: top 0.3s, visibility 0s 0.3s; /* Smooth transition for hiding */
    width: fit-content;
    padding: 0;
    width: 100%;
  }

  
  /* Option 1: Using visibility to hide */
  .navbar.hidden {
    visibility: hidden; /* Navbar is hidden but still takes space */
    opacity: 0; /* Fade out effect */
    transition: opacity 0.3s ease-out, visibility 0s 0.3s;
  }
  
  /* Option 2: Using display to completely hide */
  .navbar.hidden {
    display: none; /* Navbar completely disappears and takes no space */
  }
  .nav-link a{
    background-color: transparent;
  }
  
  .nav-item{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
  
  }
  .nav-link {
    background-color: transparent;

   
    
  }

  
  .nav-link:hover{
    animation: none;
    transition: none;
    background-color: transparent;
    transform: none;
    color:brown;
  
  
  }
  
  .navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    padding: 2px;
    margin-right: 0;
    width: fit-content;
    margin-top: 5px;
  }
  
  .navbar-nav a {
    display: flex;
    flex-direction: row;
    align-items: center; 
    justify-content: center;
    font-size: 8px;
    margin-right: auto;
    justify-content: space-between;
    padding: 2px;
    margin-left:5px ;
    margin-right: 2px;
  }
  
  
  .navbar-nav a i{
    display: flex;
    flex-direction: row;
    padding: 0;
    font-size: 8px;
    margin-left: -2px;
  }
  /* Styling for the logo container */
.logo {
  padding: 0; /* Space around the logo */
  border-radius: 5px; /* Rounded corners for the logo container */
  display: inline-block; /* Make the logo behave like a block element */
  transition: background-color 0.3s ease; /* Smooth transition for background */
  margin-left: 0;
  margin-top: 28px;
  width: 60px;
}

/* Styling for the logo heading (TechXas) */
.logo h1 {
  margin: 0;
  font-weight: bold;
  font-size: 2.5rem; /* Adjust size for more emphasis */
  font-family: 'Press Start 2P', cursive; /* Apply the retro font */
  position: relative;
  color: white; /* Default color of the logo */
  transition: color 0.3s ease, transform 0.3s ease;
  text-align: center;
  text-transform: lowercase; /* Slightly space out the letters */
}

/* Styling for the logo subheading */
.logo h1 span {
  font-size: 1.5rem; /* Adjust size of the subheading */
  color: black; /* Add a nice contrasting color */
}
.logo div {
  font-size: 0.8rem;
  color: white;  /* Default subtitle color */
  transition: color 0.3s ease;
  padding: 5px;
}

/* Hover effect for the logo */
.logo:hover h1 {  /* Change to red on hover */
  transform: scale(1.1);  /* Slightly enlarge the logo text */
  animation: pulse 0.5s ease forwards;  /* Adding pulse animation */
}

.logo:hover div {
  animation: fadeInText 0.5s ease forwards; /* Text fade effect */
}

  
  .top-banner {
    background: linear-gradient(135deg,  rgb(0, 0, 82), purple, rgb(0, 0, 82)); /* Deep blue to black gradient */
    color: white; /* White text for contrast */
    text-align: center; /* Centered text */
    padding: 2px; /* Vertical padding */
    font-family: Arial, sans-serif; /* Clean, modern font */
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    position: fixed;
    z-index: 1000;
    margin-top: 0;
    width:100% ;

  }
  
  .top-banner a {
    color: #FFD700; /* Gold color for the phone number link */
    text-decoration: none; /* Remove underline from the link */
    width: 90%;
    color: white; 
    background-color: transparent; 
    margin-left: 8%; 
    margin-top: 28px;
    
  }
  
  
  .top-banner a:hover {
    text-decoration: underline; /* Underline on hover for clarity */
  }
  .hometop-container {
    margin-top: 120px;
    padding: 0;
  }
  .hometop-item {
    margin: 0 auto;
    position: relative;
  
  
    text-align: center;
    border-radius: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    flex: 1 1 150px; /* Adjust size as needed */
    margin: 5px;
    margin-top: 5px;
    padding-top: 2px;
    
    background-color: lavender;
    color: gray;
    text-decoration: none;
    display: inline-block;
    border: 1px solid lightgray; /* Light gray border */
    text-align: center;
  
  }
  
.hometop-item h5{
  color: gray;
  font-size: 10px;

}
.hometop-icon {
  font-size: 1.2rem;
  color: firebrick;; /* Adjust color as needed */
  margin-top: 5px;
}


/* Header for the section */
.midsec-header {
  text-align: center;
  margin-bottom: 20px;
  padding: 20px 0;
  margin-top: 8px;
}

.midsec-header h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.midsec-header p {
  font-size: 14px;
  color: #777;
  margin-top: 0;
}
/* Default layout for larger screens (2 images per row) */
.image-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 images per row */
  margin-top: 5px;
  background-color: white; /* Set background color to white */
  padding: 0;
  justify-items: center; /* Center images in their grid items */
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* Individual Image Container */
.image-item-container {
  display: flex;
  flex-direction: column; /* Stack image and caption vertically */
  width: 100%; /* Make the container take up full width available */
  text-align: center; /* Center the content inside */
  margin: 0;
}

.image-item-container .btn{

  margin-left: 2px;
}

/* Individual Image Styling */
.image-item {
  width: 100%; /* Make the image take up full container width */
  height: 200px; /* Maintain aspect ratio */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow around images */
  padding: 5px;
}

.image-item:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Bigger shadow on hover */
}

/* Caption Styling */
.image-caption {
  color: #333; /* Dark gray text */
  margin-top: 8px;
  font-weight: bold;
  text-transform: capitalize; /* Capitalize first letter */
}


/* Container for the 3 smaller sections */
.midsec {
  display: flex;
  flex-direction: row;
  justify-content: space-around; /* Spaces out the sections evenly */
  margin-top: 2px;
  padding: 5px;
  width: 100%; /* Take full width of the container */
  gap: 2px; /* Adds space between the items */
  flex-wrap: wrap; /* Ensures responsiveness */
  margin-left: 0;
}

/* Styles for each section */
.midsec-box {
  background-color: lavenderblush;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  flex: 1;
  max-width: 320px;
  min-width: 280px;
  padding: 5px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid lightgray; /* Light gray border */
  margin-left: 0;

}

/* Section Title */
.midsec-box h4 {
  color: #333;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Section Description */
.midsec-box p {
  color: #555;
  font-size: 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* Button Style */
.midsec-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: inline-block;
}

/* Hover effect for buttons */
.midsec-button:hover {
  background-color: #0056b3;
}

/* Hover effect for each section */
.midsec-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.verbal-marketing{
  flex: 1;
  margin-left: 5px;
  margin-top: 5px;
  padding: 0;
  
}
.verbal-marketing .form label{
  font-size: 12px;
  font-weight: 200; 


}
.popular-brands-section{
  display: flex; 
  flex-direction: column;
  
}
.brand-item1 img{
width: 70%;
padding-right: 40px;
margin-right: 40px;
height: auto;
margin-bottom:10px;
border-radius: 0;}

.brand-item2 img{
width: 60%;
height: auto;
margin-bottom: 10px;
border-radius: 0;
margin-right: 40px;


}

  .laiheader-top-header {
    padding: 8px; /* Reduce padding */
    margin-top: 50px; /* Further reduce margin */
  }

  .laiheader-header-content {
    padding: 12px; /* Adjust padding */
    width: 100%;
  }

  .laiheader-header-logo h1 {
    font-size: 18px; /* Smaller font size */
    padding: 0;
  }

  .laiheader-header-logo h1::after {
    font-size: 8px; /* Smaller font size */
    margin-top: 4px; /* Reduce space above tagline */
  }

  .laiheader-contact-text,
  .laiheader-contact-text i,
  .laiheader-contact-number {
    font-size: 9px; /* Smaller font size */
    padding: 4px; /* Adjust padding */
  }

  .laiheader-header-social-media {
    font-size: 7px; /* Smaller font size */
  }

  .laiheader-header-social-media a {
    margin-left: 2px; /* Adjust spacing between icons */
  }

  .laiheader-header-social-media i {
    font-size: 8px; /* Smaller font size */
  }

  .index-product-list {
    gap: 8px; /* Reduce gap */
  }

  .index-product-item {
    width: 100vw; /* Full viewport width */
    padding: 8px; /* Adjust padding */
  }

  .index-product-name {
    font-size: 0.9rem; /* Smaller font size */
  }

  .formhead h1 {
    font-size: 1.2rem; /* Adjust font size */
    padding: 4px; /* Adjust padding */
  }

  .formhead h1::after {
    height: 1px; /* Adjust thickness of the dashed line */
  }

  .flash-messages-container {
    margin-top: 8px; /* Reduce margin */
  }

  #wcu,
  .wcu {
    height: auto;
    padding: 8px; /* Adjust padding */
  }

  .wcu .affordability,
  .wcu .securityh {
    flex-direction: column;
    padding: 8px; /* Adjust padding */
  }

  .affordabilityh,
  .securityh {
    margin: 8px 0; /* Adjust margin */
  }

  .header__image__card-1,
  .header__image__card-2,
  .header__image__card-3,
  .header__image__card-4 {
    font-size: 0.8rem; /* Adjust font size */
    padding: 8px; /* Adjust padding */
  }
  .header__image__card-3{
    margin-top: -40px;
  }

  .index-reasons h1 {
    font-size: 1rem; /* Smaller font size */
    margin-bottom: 10px; /* Adjust margin */
  }

  #fut {
    margin-top: 8px; /* Reduce margin */
    flex-direction: column;
    width: 100%;
    display: flex;
    background-color: indigo;
    margin-top: 10px; /* Reduced margin for smaller screens */
    justify-content: center;
    flex-direction: column; /* Stack elements vertically */
  }
  
.container .box-container .box{
  border-radius: 5px;
  background: white;
  text-align: center;
  padding:15px;
  justify-content: center;
  margin-right: 25px;
  width: 85%;
  margin-left: 0;
}
.container .box-container{
  margin-right: 10px;
}

  .index-reasons {
    padding: 8px; /* Adjust padding */
    margin-top: 8px; /* Adjust margin */
  }

  .index-reasons h1 {
    font-size: 1.2rem; /* Adjust font size */
  }

  .index-reasons p,
  .index-reasons h2 {
    font-size: 0.8rem; /* Smaller font size */
    line-height: 1.4;
  }

  .index-email {
    gap: 4px; /* Reduce gap */
  }

  .index-mail,
  .index-callus {
    gap: 4px; /* Reduce gap */
    height: min-content;
  }

  .index-mail i,
  .index-callus i {
    font-size: 1rem; /* Smaller icon size */
  }

  .index-mail span,
  .index-callus span {
    font-size: 0.7rem; /* Smaller font size */
  }

  .index-callus {
    margin-top: 8px; /* Adjust margin */
  }

  .index-affiliates h1 {
    font-size: 1rem; /* Smaller font size */
    margin-bottom: 8px; /* Adjust margin */
  }

  .index-affiliates p {
    font-size: 0.8rem; /* Smaller font size */
  }

  .index-affiliates i {
    font-size: 0.9rem; /* Smaller icon size */
    margin-right: 4px; /* Adjust spacing */
  }

  section#wcuindextop {
    padding: 8px; /* Adjust padding */
  }

  .reasons img {
    width: 50vw; /* Full viewport width */
    height: auto;
  }
  #wcuindextop .reasons h1 {
    align-items: center;
    width: 100%;
    font-weight: 700;
    font-size: x-large;
    color: goldenrod;
    margin-top: 10px;
    padding: 10px;
}
  .foot {
    padding: 8px; /* Adjust padding */
    font-size: 10px; /* Smaller font size */
  }

  .bigofferimg h1 {
    font-size: 0.9rem; /* Adjust font size */
  }

  .bigofferimg img {
    width: 100vw; /* Full viewport width */
  }

  .bigofferimg p {
    font-size: 0.7rem; /* Smaller font size */
  }

  .ttastyle{
    display: flex;
    flex-direction: column;
    }

}

/* For screens between 270px and 349px */
@media (min-width: 270px) and (max-width: 320px) {

  /* Navbar Styling */
  .navbar {
    background-color: ghostwhite;
    justify-content: flex-start; /* Align logo to the left */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    margin-top: 20px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.344);
    padding-top: 40px;
    margin-bottom: 0;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column; /* Stack logo and navbar items vertically */
    align-items: center;
  }

  /* Logo Styling */
  .logo {
    margin-bottom: 0; /* Space between logo and navbar items */
    margin-right: 20px;
  }

  .logo img {
    width: 50px; /* Adjust logo size for smaller screens */
    margin-right: 20px;
  }
  

  /* Navbar Links Container */
  .navbar-nav {
    display: flex;
    flex-direction: row; /* Stack items vertically */
    align-items: center; /* Center links horizontally */
    margin-top: 5px; /* Space between logo and navbar items */
    margin-right: 25px;
  
  }

  /* Individual Nav Items */
  .navbar-nav a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start; /* Align links to the left */
    font-size: 9px; /* Adjust font size for better readability */
    width: 80%;
    text-align: center;
    margin-left: 2px;
    margin-top: 0;
    margin-right: 5px;
  }

  /* Cart Icon */
  .cart {
    margin-left: 5px;
    width: 60px; /* Adjust size */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  /* Cart Icon Styling */
  .cart i {
    font-size: 20px;
  }

  /* Social Media Icons */
  .navbar-nav a i {
    font-size: 12px;
    margin-left: 2px;

  }

  /* Adjust the Sign Up and Login Links */
  .nav-link {
    font-size: 12px;
  }

  /* Nav Link Hover Effect */
  .nav-link:hover {
    background-color: transparent;
    transform: none;
    color: brown;
  }
  .hometop-container{
    margin-top: 135px;
  }


}



@media (max-width: 640px) {


  .reasons h1{
    margin-right: 20px;
    padding: 5px;
  }

 
  .laiheader-top-header {
    padding: 12px; /* Adjust padding */
    margin-top: 55px; /* Reduce margin */
  }

  .laiheader-header-content {
    padding: 16px; /* Adjust padding */
    width: 100%;
  }

  .laiheader-header-logo h1 {
    font-size: 20px; /* Adjust font size */
    padding: 0;
  }

  .laiheader-header-logo h1::after {
    font-size: 9px; /* Adjust font size */
    margin-top: 6px; /* Adjust space above tagline */
  }

  .laiheader-contact-text,
  .laiheader-contact-text i,
  .laiheader-contact-number {
    font-size: 11px; /* Adjust font size */
    padding: 6px; /* Adjust padding */
  }

  .laiheader-header-social-media {
    font-size: 9px; /* Adjust font size */
  }

  .laiheader-header-social-media a {
    margin-left: 4px; /* Adjust spacing between icons */
  }

  .laiheader-header-social-media i {
    font-size: 11px; /* Adjust font size */
  }

  .index-product-list {
    gap: 12px; /* Adjust gap */
  }

  .index-product-item {
    width: 100vw; /* Full viewport width */
    padding: 12px; /* Adjust padding */
  }

  .index-product-name {
    font-size: 1rem; /* Adjust font size */
  }

  .formhead h1 {
    font-size: 1.6rem; /* Adjust font size */
    padding: 6px; /* Adjust padding */
  }

  .formhead h1::after {
    height: 2px; /* Adjust thickness of the dashed line */
  }

  .flash-messages-container {
    margin-top: 12px; /* Adjust margin */
  }

  #wcu,
  .wcu {
    height: auto;
    padding: 12px; /* Adjust padding */
  }

  .wcu .affordability,
  .wcu .securityh {
    flex-direction: column;
    padding: 12px; /* Adjust padding */
  }

  .affordabilityh,
  .securityh {
    margin: 12px 0; /* Adjust margin */
  }

  .header__image__card-1,
  .header__image__card-2,
  .header__image__card-3,
  .header__image__card-4 {
    font-size: 1rem; /* Adjust font size */
    padding: 12px; /* Adjust padding */
  }

  .index-reasons h1 {
    font-size: 1.3rem; /* Adjust font size */
    margin-bottom: 12px; /* Adjust margin */
  }

  #fut {
    margin-top: 12px; /* Adjust margin */
    flex-direction: column;
    width: 100%;
      display: flex;
      background-color: indigo;
      margin-top: 10px; /* Reduced margin for smaller screens */
      justify-content: center;
      flex-direction: column; /* Stack elements vertically */
  }

  .index-reasons {
    padding: 12px; /* Adjust padding */
    margin-top: 12px; /* Adjust margin */
  }

  .index-reasons h1 {
    font-size: 1.3rem; /* Adjust font size */
  }

  .index-reasons p,
  .index-reasons h2 {
    font-size: 1rem; /* Adjust font size */
    line-height: 1.5;
  }

  .index-email {
    gap: 6px; /* Adjust gap */
  }

  .index-mail,
  .index-callus {
    gap: 6px; /* Adjust gap */
    height: min-content;
  }

  .index-mail i,
  .index-callus i {
    font-size: 1.3rem; /* Adjust icon size */
  }

  .index-mail span,
  .index-callus span {
    font-size: 1rem; /* Adjust font size */
  }

  .index-callus {
    margin-top: 12px; /* Adjust margin */
  }

  .index-affiliates h1 {
    font-size: 1.4rem; /* Adjust font size */
    margin-bottom: 12px; /* Adjust margin */
  }

  .index-affiliates p {
    font-size: 1rem; /* Adjust font size */
  }

  .index-affiliates i {
    font-size: 1.2rem; /* Adjust icon size */
    margin-right: 6px; /* Adjust spacing */
  }

  section#wcuindextop {
    padding: 12px; /* Adjust padding */
  }

  .reasons img {
    width: 50vw; /* Full viewport width */
    height: auto;
  }

  .reasons h1{
    margin-right: 20px;
    padding: 5px;
  }

  .foot {
    padding: 12px; /* Adjust padding */
    font-size: 13px; /* Adjust font size */
  }

  .bigofferimg h1 {
    font-size: 1.1rem; /* Adjust font size */
  }

  .bigofferimg img {
    width: 100vw; /* Full viewport width */
  }

  .bigofferimg p {
    font-size: 0.9rem; /* Adjust font size */
  }

  .ttastyle{
    display: flex;
    flex-direction: column;
    }

}




.footer__section p{
  font-size: 13px;
  font-weight: 800;
  color: gray;
}
.footer__section ul li {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: gray;
}

.footer__section ul li a {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: gray;
}

/* Hover effect */
.footer__section ul li:hover,
.footer__section ul li a:hover {
  color: brown;
}

.footer__section a {
text-decoration: none;
color: gray;

}

.footer__address p {
  text-decoration: none;
  color: gray;
  }