@import url(custom-classes.css);

/* default */
::-webkit-scrollbar {
  width: 3px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--primary);
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary);
}

a {
  text-decoration: none;
  color: inherit;

  &:hover {
    color: inherit;
  }
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

/* .form-control {
  &:focus {
    border-color: transparent !important;
    outline: unset !important;
    box-shadow: unset !important;
  }
} */

.slick-slide {
  height: auto !important;
}
/* -------------------- */

.topbar {
  & .row.bg {
    background: linear-gradient(125deg, transparent calc((100% / 12) * 4), var(--secondary) calc((100% / 12) * 4));

    @media (max-width: 500px) {
      background-color: var(--secondary);
      display: none;
    }

    & * {
      color: #fff;
    }
  }
}

nav {
  & .navbar-brand {
    & img {
      width: 250px;
    }
  }
  & .nav-link {
    color: var(--black) !important;
    transition: 0.2s;

    &:hover {
      color: var(--primary) !important;
      /* text-decoration: underline; */
      transition: 0.2s;
      font-weight: bold;
    }

    &.active {
      color: var(--primary) !important;
      text-decoration: underline;
      transition: 0.2s;
      font-weight: bold;
    }
  }
}

.hero {
  & .slide {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #212529;
    background-blend-mode: overlay;
    height: 500px !important;
    align-content: center;
    &.slide1 {
      background-image: url("../media/inner_banners/careers_banne.png");
    }
    &.slide2 {
      background-image: url("../media/life-insurance.jpg");
      background-position: center -17vh;
    }
    &.slide3 {
      background-image: url("../media/health-insurance.jpg");
      background-position: top;
    }
    &.slide4 {
      background-image: url("../media/dentist.jpg");
    }
    &.slide5 {
      background-image: url("../media/medical.jpg");
      /* background-position: top; */
    }
    &.slide6 {
      background-image: url("../media/old-couple.jpg");
      /* background-position: top; */
    }
    &.slide7 {
      background-image: url("../media/happy.jpg");
      /* background-position: top; */
    }
    &.slide8 {
      background-image: url("../media/health-insurance.jpg");
      /* background-position: top; */
    }
    &::before {
      content: "";
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, var(--black), transparent);
      position: absolute;
      top: 0;
      left: 0;
    }

    & section {
      z-index: 999;
      position: relative;
    }
  }

  .slider-buttons {
    position: absolute;
    display: flex;
    justify-content: space-between;
    z-index: 999;
    width: 95vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.cards {
  & .card {
    &.feature {
      & img {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 0;
      }
      & .wrap {
        z-index: 1;
      }
    }
  }
}

.float-img {
  position: absolute;
  width: 50%;
  right: 0;
  bottom: 0;
  border: 10px solid white;
  border-radius: 10px;
}

.services {
  & .image-wrap {
    aspect-ratio: 1.5/1;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.careers {
  & ul {
    /* columns: 2; */
    font-size: 14px;
    /* list-style-type: "o"; */
    @media (max-width: 500px) {
      columns: 1;
    }
    & li {
      padding: 3px 0px;
    }
  }

  .float-img {
    width: 35%;
  }
}
.fl-page {
  bottom: 50px;
  right: 50px;
}
.testimonials {
  & .quote {
    width: 50px;
  }

  & .avatar {
    width: 70px;
    aspect-ratio: 1;
  }
}

.slick-dots {
  margin-top: 20px;
  display: flex;
  gap: 15px;
  justify-content: center;
  & li {
    color: rgb(185, 185, 185);
    &.slick-active {
      color: var(--secondary);
    }

    & button {
      display: none;
    }
  }
}

footer {
  margin-top: 20px;

  & .customInput {
    border: unset;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    background-color: transparent;
    width: 100%;
    color: #fff !important;
    font-family: "poppins", fontAwesome;
    font-size: 14px;
    &:focus {
      outline: unset;
      box-shadow: unset;
      background-color: transparent;
      border-bottom: 1px solid;
    }
    &::placeholder {
      color: rgb(211, 211, 211);
    }
  }
  & .nav-link {
    color: #fff;
    padding: 0px;
    &:hover {
      color: #fff;
    }
    &:active {
      color: #fff;
    }
    &:focus {
      color: #fff;
    }
  }
}
#inner_banner {
  position: relative;
  height: 370px;
  overflow: hidden;
  & img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  & .wrap {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: #000;
      opacity: 0.2;
    }
  }
}

#services {
  & .content {
    & p {
      margin: 20px 0px;
    }
  }
  & ul {
    position: relative;
    padding-left: 20px;
    & li {
      position: relative;
      &:before {
        content: url(../media/Layer_1.png);
        position: absolute;
        top: 3px;
        left: -30px;
      }
    }
  }
}
ul.list-check {
  position: relative;
  padding-left: 20px;
  & li {
    position: relative;
    &:before {
      content: url(../media/Layer_1.png);
      position: absolute;
      top: 3px;
      left: -30px;
    }
  }
}

#careers_2 {
  position: relative;
  & .float_img {
    width: 60%;
  }
  & .float-img2 {
    & img {
      border: 10px solid #fff;
      border-radius: 10px;
    }
  }
  ul {
    columns: 2;
  }
}
#list_3 {
  position: relative;
  & ul {
    columns: 2;
  }
}

.contact_form {
  position: relative;
  & label {
    color: #000;
    font-weight: 500;
    margin: 10px 0px;
  }
  & .form-select {
    background-color: #f4f4f4 !important;
    border: 1px solid #9e9e9e !important;
    color: #484848 !important;
    &:focus {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }

    &:hover {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }
    &:focus-visible {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }
    &:active {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }
  }
  & .form-control {
    background-color: #f4f4f4 !important;
    border: 1px solid #9e9e9e !important;
    color: #484848 !important;
    &:focus {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }

    &:hover {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }
    &:focus-visible {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }
    &:active {
      box-shadow: unset !important;
      outline: unset !important;
      border: 1px solid var(--primary) !important;
    }
  }
}

.accordion-button:not(.collapsed) {
  color: var(--primary);
  outline: unset;
  box-shadow: unset;
  background-color: #fff;
}
.accordion-button:not(.collapsed)::after {
  filter: invert(1);
}

.blogCards {
  & .img-wrap {
    aspect-ratio: 1.3/1;
    overflow: hidden;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
#services{
  & .wrap{
    width: 100%;
    height: 600px;
    object-fit: cover;
    & img{
      border-radius: 30px;
    }
  }
}