/*--------------- global styles ---------------*/

.aj-mt-50{
  margin-top: 50px;
}
.aj-mt-75{
  margin-top: 75px;
}
.aj-mt-100{
  margin-top: 100px;
}
.aj-mt-125{
  margin-top: 125px;
}
.aj-mt-150{
  margin-top: 150px;
}
.aj-mb-50{
  margin-bottom: 50px;
}
.aj-mb-75{
  margin-bottom: 75px;
}
.aj-mb-100{
  margin-bottom: 100px;
}
.aj-mb-125{
  margin-bottom: 125px;
}
.aj-mb-150{
  margin-bottom: 150px;
}
.aj-pb-50{
  padding-bottom: 50px;
}
.aj-pb-75{
  padding-bottom: 75px;
}
.aj-pb-100{
  padding-bottom: 100px;
}
.aj-pb-125{
  padding-bottom: 125px;
}
.aj-pb-150{
  padding-bottom: 150px;
}
.aj-pt-50{
  padding-top: 50px;
}
.aj-pt-75{
  padding-top: 75px;
}
.aj-pt-100{
  padding-top: 100px;
}
.aj-pt-125{
  padding-top: 125px;
}
.aj-pt-150{
  padding-top: 150px;
}

.theme-dark-color{
  color: var(--bs-dark);
}
.theme-light-color{
  color: var(--bs-primary);
}

.footer-bg{
  background: linear-gradient( white, #222529), var(--bs-primary);
}
.home-footer-bg{
  background: linear-gradient(#222529, white), var(--bs-primary);
}

/*--------------- Navbar styles ---------------*/
/* Display the dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

ul.dropdown-menu li a{
  font-size: 12px;
}

ul.dropdown-menu li a:hover,
a.dropdown-item.text-light.active{
  background-color: var(--bs-primary);
  color: #222529 !important;
}

.site-logo-style{
  padding-bottom: 0px; 
  height: 45px;
}

/*--------------- Home Hero & search input styles ---------------*/
.home-hero-main{
  background-image: url('../img/hero-image.avif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  padding-top: 250px;
}

#hero-search {
  background-color: rgba(0,0,0,.7);
  border-radius: 5px;
}

#hero-search::placeholder {
  color: var(--bs-primary-bg-subtle);
}

div#hero-search-container {
  justify-content: center !important;
  display: flex;
}


button i.fas {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem; /* Adjust the size if needed */
}


.hero-search-btn,
.hero-search-input{
  height: 40px;
}

/*--------------- How Does It Work ---------------*/

.timeline>li {
  min-height: 150px;
}


.timeline>li .timeline-image {
  background-color: var(--bs-dark);
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0 !important;
}


.timeline>li .timeline-image img.img-fluid {
  height: 100px;
  width: 100px;
}



#how-to-use > div > div:nth-child(2) > div > ul > li:nth-child(5) > div > h4 {
  color: #fed136;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

/*--------------- Team Section ---------------*/
section#team {
  padding: 150px 0 150px 0;
}


/*--------------- Social media icons hover ---------------*/
.list-inline-item a {
  color: #fed136; 
  transition: color 0.3s ease, transform 0.3s ease;
}

.list-inline-item a:hover {
  color: #212529; 
  transform: translateY(-5px); 
}


/*--------------- Home Page - Contact form ---------------*/

#sendMessageButton {
  background-color: #fed136;
  color: var(--bs-dark);
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#sendMessageButton:hover {
  background-color: #f0c12a;
  color: var(--bs-dark);
  transform: scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

section#contact{
  background-image: url('../img/map-image.png');
}

section#contact .form-group textarea.form-control {
  height: 230px;
}


/*--------------- about us - team member - clickable modal ---------------*/
img.card-img-top.rounded-circle.mx-auto.mt-4 {
  cursor: pointer;
  transition: transform 0.5s ease-in-out; 
  filter: drop-shadow(2px 4px 6px black);
}

img.card-img-top.rounded-circle.mx-auto.mt-4:hover {
  transform: scale(1.1); 
  filter: drop-shadow(0px 0px 15px black);
}

.team-member-image{
  width: 150px;
  height: 150px;
}

/*--------------- Screen size controll ---------------*/

@media only screen and (max-width: 575px) {
  section#team {
    padding: 50px 0 50px 0;
  }
}


@media only screen and (max-width: 768px) {
  .timeline>li .timeline-image {
    top: 25px !important;
  }
}

@media (min-width: 768px) {
  section {
      padding: 75px 0;
  }
}


@media only screen and (max-width: 992px) {
  form#hero-search-form {
    width: 100%;
  }

  .timeline>li .timeline-image img.img-fluid {
    height: 50px;
    width: 50px;
  }
  .timeline>li .timeline-image {
    top: 50px !important;
  }

}

@media only screen and (min-width: 992px) {
  form#hero-search-form {
    width: 50%;
  }
}