*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: antiquewhite;
}

main {
  flex: 1 0 auto;
}


h1{
  color: brown;
}
.card-img-top{
  height: 5rem;
  object-fit: contain;
}

label{
  width: 10rem;
}


.fa-brands {
padding-right: 5px;
}

/* ------------------contact page------------- */

.form {
display: flex;
flex-direction: column;
align-self: center;
font-family: inherit;
gap: 10px;
padding-inline: 2em;
padding-bottom: 0.4em;
background-color: grey;
border-radius: 20px;
}

.form-heading {
text-align: center;
margin: 2em;
color: #64ffda;
font-size: 1.2em;
background-color: transparent;
align-self: center;
}

.form-field {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5em;
border-radius: 10px;
padding: 0.6em;
border: none;
outline: none;
color: white;
background-color: #4f4949;
box-shadow: inset 2px 5px 10px rgb(48, 47, 47);
}

.input-field {
background: none;
border: none;
outline: none;
width: 100%;
color: #ccd6f6;
padding-inline: 1em;
}

.sendMessage-btn {
cursor: pointer;
margin-bottom: 3em;
padding: 1em;
border-radius: 10px;
border: none;
outline: none;
background-color: transparent;
color: #64ffda;
font-weight: bold;
outline: 1px solid #64ffda;
transition: all ease-in-out 0.3s;
}

.sendMessage-btn:hover {
transition: all ease-in-out 0.3s;
background-color: #64ffda;
color: #000;
cursor: pointer;
box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

.form-card1 {
background-image: linear-gradient(163deg, #64ffda 0%, #64ffda 100%);
border-radius: 22px;
transition: all 0.3s;
}

.form-card1:hover {
box-shadow: 0px 0px 30px 1px rgba(100, 255, 218, 0.3);
}

.form-card2 {
border-radius: 0;
transition: all 0.2s;
}

.form-card2:hover {
transform: scale(0.98);
border-radius: 20px;
}
/* ------------------------------social media icos from uiverse------------------------ */

ul {
list-style: none;
}

.example-2 {
display: flex;
justify-content: center;
align-items: center;
}
.example-2 .icon-content {
margin: 0 10px;
position: relative;
}
.example-2 .icon-content .tooltip {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
color: #fff;
padding: 6px 10px;
border-radius: 5px;
opacity: 0;
visibility: hidden;
font-size: 14px;
transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
opacity: 1;
visibility: visible;
top: -50px;
}
.example-2 .icon-content a {
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: #4d4d4d;
background-color: #fff;
transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
position: relative;
z-index: 1;
width: 30px;
height: 30px;
}
.example-2 .icon-content a:hover {
color: white;
}
.example-2 .icon-content a .filled {
position: absolute;
top: auto;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #000;
transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
height: 100%;
}

.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
background-color: #0274b3;
}

.example-2 .icon-content a[data-social="github"] .filled,
.example-2 .icon-content a[data-social="github"] ~ .tooltip {
background-color: #24262a;
}
.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
background: linear-gradient(
  45deg,
  #405de6,
  #5b51db,
  #b33ab4,
  #c135b4,
  #e1306c,
  #fd1f1f
);
}
.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
background-color: #ff0000;
}


/* header image */
.headerImage {
background-color: #eeebdf;
background-image: url('../images/warehouse.avif');
background-repeat: no-repeat;
background-size: cover;
padding-top: 4rem;
padding-bottom: 4rem;
padding-left: 4rem;
background-position: center;
background-blend-mode:difference;

}

/*  making map to be responsive */

.map iframe{
width: 100%;
/* object-fit: contain; */
height: 100%;
}


.erro{
color: red;
background-color: #ffcdd2;
text-align: center;
}



.success{
color: green;
background-color: #c8e6c9;
text-align: center;
}

.cart{
display: flex;
flex-direction: row;
gap: 0;
}


.sup {
line-height: 5;
color: white;
}

nav ul a {
transition: background-color .3s;
font-size: 1rem;
color: #fff;
display: flex;
padding: 0 15px;
cursor: pointer;
}

.row {

margin-bottom: 0;
}

/* Cart Sidebar */
/* .cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: antiquewhite;
  box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2);
  padding: 1.25rem;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 5;
}

.cart-sidebar.hidden {
  transform: translateX(100%);
}

.cart-sidebar.visible {
  transform: translateX(0);
} */



/* Cart Sidebar */
.cart-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: antiquewhite;
  box-shadow: -5px 0 5px rgba(0, 0, 0, 0.2);
  padding: 1.25rem;
  transform: translateX(100%); /* Initially hidden */
  transition: transform 0.3s ease; /* Smooth transition effect */
  z-index: 5;
}

/* Class to keep it hidden */
.cart-sidebar.hidden {
  transform: translateX(100%); /* Off-screen */
}

/* Class to make it visible */
.cart-sidebar.visible {
  transform: translateX(0); /* Fully visible */
}


.content_dashboard{

  margin-left: 250px;
width: 100%;
}

.hidden {
  display: none; /* Hide filtered-out cards */
}


.carousel {
  height: 300px; /* Adjust carousel height */
}
.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Maintain aspect ratio */
}

.nav-wrapper {
  box-shadow: 0 3px 8px -1px #0000001a, 0 1px 4px 0 #0000001a;
}