body {
  margin-bottom: 0;
}
html {
  scroll-behavior: smooth;
}

.custom-card {
  border: none;
}

.text-gray {
  color: rgb(81, 81, 81);
  font-weight: 500;
  opacity: 0.5;
}

.titan{
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}
img {
  max-width: 100%;
}

.min-height-25 {
  min-height: 25vh !important;
}

.min-height-75 {
  min-height: 75vh;
}

.bg-img-1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url(../images/lights.webp);
  min-height: 25vh;
}
.bg-img-accounting2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.219), rgba(0, 0, 0, 0.7)), url(../images/accounting3.webp);
  min-height: 25vh;
}
.bg-img-accounting3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.219), rgba(0, 0, 0, 0.7)), url(../images/accounting2.webp);
  min-height: 25vh;
}
.bg-patern {
  background-image: linear-gradient(rgba(0, 0, 0, 0.219), rgba(0, 0, 0, 0.7)), url(../images/patern.webp);
  
}
.bg-patern-2 {
  background-image: linear-gradient(rgba(65, 46, 46, 0.219), rgba(211, 211, 211, 0.7)), url(../images/patern2.webp);
  
}

.bg-img-2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url(../images/media.webp);
  min-height: 25vh;
}

.bg-img-3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url(../images/image1.webp);
  min-height: 70vh;
}
.bg-img-accounting {
  background-image: url(../images/accounting1.webp);
  min-height: 75vh;
}

.bg-img-4 {
  background-image: url(../images/image4.webp);
  min-height: 75vh;
}
.bg-img-5 {
  background-image: url(../images/image7.webp);
  min-height: 75vh;
}
.bg-img-6 {
  background-image: url(../images/image6.webp);
  min-height: 75vh;
}
.bg-img-7 {
  background-image: url(../images/image7.webp);
  min-height: 75vh;
}
.bg-img-8 {
  background-image: url(../images/image8.webp);
  min-height: 75vh;
}

.bg-img {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.carousel-item {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 75vh;
}

.carousel-item img {
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  min-height: 75vh;
}

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  bottom: auto;
}

.bg-black {
  background-color: black;
}

.border-black {
  border-color: black !important;
}

.negative-margin {
  margin-top: -10vh;
}



.indent {
  text-indent: 1em; /* Adjust the indentation as needed */
}

.bg-blend {
  background-color: #352f2f87;
}
.bg-tranzit {
  background-color: #86636387;
}


.transparent-bg {
  background-color: rgba(255, 255, 255, 0.5); /* White with 50% opacity */
}
.white-shadow {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* White shadow with 50% opacity */
  border: 1px solid rgba(255, 255, 255, 0.5); /* Optional: white border with 50% opacity */
}

/* shake */
.shakeme:hover {
  animation: shake 0.3s linear infinite both;
}

@keyframes shake {
  0% {
      transform: translate(0);
  }
  20% {
      transform: translate(-2px, 2px);
  }
  40% {
      transform: translate(-2px, -2px);
  }
  60% {
      transform: translate(2px, 2px);
  }
  80% {
      transform: translate(2px, -2px);
  }
  100% {
      transform: translate(0);
  }
}
/* shake */



/* truck cards */


/* .truck_card {
  width: 480px;
  height: 360px;
  border: solid 3px #272727;
  border-radius: 19px;
  padding: 1.5rem;
  background: white;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
} */
.truck_card {
  width: 90%; /* Adjust the percentage as needed */
  max-width: 480px; /* Set a maximum width to avoid stretching on larger screens */
  height: 20rem; /* Automatically adjust height based on content */
  border: solid 3px #272727;
  border-radius: 5%; /* Use a percentage for border-radius */
  padding: 3%; /* Use a percentage for padding */
  background: white;
  position: relative;
  display: flex;
  align-items: flex-end;
  transition: 0.4s ease-out;
  box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.5);
}

.truck_card:hover {
transform: translateY(20px);
}

.truck_card:before {
content: "";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
transition: 0.5s;
opacity: 0;
}

.truck_card:hover:before {
opacity: 1;
}

.truck_card img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
border-radius: 15px;
}

.truck_card .info {
position: relative;
z-index: 3;
color: white;
opacity: 0;
transform: translateY(30px);
transition: 0.5s;
}

.truck_card:hover .info {
opacity: 1;
transform: translateY(0px);
}

.truck_card .info h1 {
margin: 0px;
}

.truck_card .info p {
letter-spacing: 1px;
font-size: 15px;
margin-top: 8px;
}

.truck_card .info a {
padding: 0.6rem;
outline: none;
border: none;
border-radius: 3px;
background: white;
color: black;
font-weight: bold;
cursor: pointer;
transition: 0.4s ease;
}

.truck_card .info a:hover {
background: dodgerblue;
color: white;
}


/* truck cards */

/* underline border */


.underline-border {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.underline-border::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background-color: #000; /* Default border color */
  position: absolute;
  bottom: 0;
  transition: width 0.3s ease; /* Hover effect duration */
}

.underline-border:hover::after {
  width: 100%; /* Full width on hover */
  background-color: #ff0000; /* Change color on hover */
}
/* underline border */

.underline-border2 {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.underline-border2::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background-color: #000; /* Default border color */
  position: absolute;
  bottom: 0;
  transition: width 0.5s ease; /* Hover effect duration */
}

.underline-border2:hover::after {
  width: 100%; /* Full width on hover */
  background-color: #00ff33; /* Change color on hover */
}

.large-text {
  font-size: 2rem;
}
.card {
  overflow: hidden;
}

img {
  /* Other CSS properties */
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
}
img:hover{
  transform: scale(1.3);
  /* transition: ease-in-out; */
 
}
.opacity-0{
  opacity: 0;
}

  /* hover efect blur */
  .box:has(.inbox:hover) .inbox:not(:hover){
    scale: 0.8;
    opacity: 0.8;
    filter: blur(1.5px);
  }
  .inbox {
    transition: scale 0.3s ease-in, opacity 0.3s ease-in, filter 0.3s ease-in;
    &:hover{
      scale: 1.1;
    }
  }
  /* hover efect blur */