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

/* text styles */
.text--gray-primary{
  color: var(--gray-primary);
}
.text--gray-secondary{
  color: var(--gray-secondary);
  font-size: 18px;
  line-height: 25px;
}
.text--gray-tertiary{
  color: var(--gray-tertiary) !important;
}
.text--dark-blue{
  color: var(--dark-blue);
}

.w-50--responsive{
  width:50%;
}

/* .img-fluid {
  max-height: 553px;
} */

.slick-dots {
 bottom: -35px;
}

.slick-dots li button::before {
  font-size: 8px;
}

.banner-inner-content .display-1 {
  font-size: calc(38px + 19*(100vw - 768px)/832);
}

.banner-inner-content h5 {
  font-size: 18px;
}

h1 {
  font-size: calc(38px + 7*(100vw - 768px)/832);
}

@media (min-width: 992px) {
  .banner-inner-content .page-spacing{
    padding-top: 15%;
    padding-left: 5rem;
  }

  .banner-inner-content .display-1 {
    width: 30vw;
    line-height: 1.2;
  }

  .banner-inner-content h5 {
    padding-top: 23px!important;
  }

  .banner-inner-content .btn {
    width: 174px;
    height: 46px;
  }

  .btn-pad {
    padding: 0!important;
    padding-top: 0.55rem!important;
  }

  .col-lg-5 img {
    max-width: 200%;
  }

  section .row {
    gap: 5rem;
  }

  .row .col h1 {
    width: 40vw;
  }

  .row .col .p {
    width: 35vw;
  }

  .content-block-carousel img {
    width:unset;
  }

  h1 {
    color: #333;
    width: 40vw;
  }
  
  .container-fluid .top-block .h4 {
    width: 57vw;
    line-height: 25px;
  }

  .w-40--responsive h4{
    width: 30.5vw;
  }

  .w-40--responsive .display-5{
    width: 40vw;
  }

  .deskpadRight {
    padding-right: 8%;
    padding-left: 5%;
  }

  .deskpadRight h4{
    width: 37vw;
  }

  .top-block {
    width: 65vw;
  }
  .col-lg-6 .h4{
    width: 42vw;
  }

  .card-img-wrap {
    border-radius: 5px;
  }

  .card .card-img-overlay p{
      opacity: 0;
      transition: opacity .4s ease-in-out;
  }
  
  .card:hover > .card-img-overlay p{
      opacity: 1;
  }

  .card .card-img-overlay{
      transform: translateY(calc(100% - 120px));
      transition: opacity .4s ease-in-out, transform .4s ease-in-out; 
  }

  .card:hover > .card-img-overlay{
      opacity: 1;
      transform: translateY(0); 
  }

  .card >  .card-img-wrap img{
      transition: transform 0.5s;
  }

  .card:hover > .card-img-wrap img{
      transform: scale(1.1);
  }

  .card-text {
    font-size: 18px;
  }
}

@media only screen and (max-width: 768px) {
  .w-50--responsive,
  .w-40--responsive {
    width: unset;
  }
    .card img{
    width: 275px;
    }

    .mobile-reverse {
      display: flex;
      flex-direction: column-reverse;
    }
}
@media only screen and (min-width: 768px) {
   .card img{
    width: 400px;
    }
}