@font-face {
  font-family: fontRegular;
  src: url("../assets/fonts/djr-font/FormaDJRDeck-Regular-Testing.woff");
}
@font-face {
  font-family: futura;
  src: url("../assets/fonts/futura-font/futura\ medium\ bt.ttf");
}
@font-face {
  font-family: fontMedium;
  src: url("../assets/fonts/djr-font/FormaDJRDeck-Medium-Testing.woff");
}
@font-face {
  font-family: fontBold;
  src: url("../assets/fonts/djr-font/FormaDJRDeck-Bold-Testing.woff");
}
.container {
  max-width: calc(100vw - 5%) !important;
}

h1 {
  font-size: calc(26.0px + (52.0 - 26.0) * ((100vw - 1001px) / (2000 - 1001))) !important;
}

p, a, .btn{
  font-size: calc(17.0px + (20.0 - 17.0) * ((100vw - 1001px) / (2000 - 1001))) !important;
}
h5{
  font-size: calc(23.0px + (25.0 - 23.0) * ((100vw - 1001px) / (2000 - 1001))) !important;
}
h6, .learn-more-custom-height{
  font-size: calc(17.0px + (18.0 - 17.0) * ((100vw - 1001px) / (2000 - 1001))) !important;
}

.button {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.container {
  font-family: fontRegular;
}
.max-container {
  max-width: 1550px;
}
.font-medium {
  font-family: fontMedium;
}
.text-red {
  color: #e94724;
}
.text-yellow {
  color: #edaa20;
}
.text-green {
  color: #30a981;
}
.text-bold {
  font-family: fontBold;
}

.btn-green-white {
  background-color: #30a981;
  color: #ffff;
  margin-left: 8px;
}

.btn-green-white:hover {
  background-color: #ffff;
  box-shadow: 1px 1px 10px 3px rgba(0, 0, 0, 0.4);
  color: #30a981;
}

/* navbar css start */
/*  */
.nav-inner {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.navbar-color {
  background-color: #ffff;
  height: 100px;
  /* max-width: 100%; */
}
.bg-drop {
  background-color: #ffff;
}
.nav-link {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.nav-login {
  margin-top: -3px !important;
}
.login-padding:hover {
  background-color: #30a981;
  color: white !important;
  border: 1px solid #30a981 !important;
}
/*  */
/* navbar css end */

.img-fluid-header {
  max-width: 70%;
}
.img-fluid-nav {
  max-width: 90%;
}
.img-fluid {
  max-width: 90% !important;
}

.banner-bottom-border {
  width: 50%;
  height: 10px;
  background-color: #ea4722;
  margin-left: -130px;
}

/* header banner end */

/* learn more start */

.learn-more-custom-height {
  height: 67px;
  margin-bottom: 0 !important;
}
.slick-header{
  height: 63px;
  margin-bottom: 0 !important;
}

.section-2 {
  gap: 10px !important;
}
.scroll-card-width {
  margin: auto;
  /* max-width: 620px; */
  border: 1px solid black;
  border-radius: 0 0 0 25px;
}
.hover-green-btn {
  padding: 8px 11px 8px 11px !important;

  font-weight: 500;
  background-color: #30a981;
  color: white;
}

.scroll-card-width:hover {
  color: white;
  background-color: #30a981;
  border: 1px solid white;
}
.scroll-card-width:hover .slick-header {
  color: white;
  background-color: #30a981;
}
.scroll-card-width:hover .btn {
  color: #30a981;
  background-color: white;
}
.scroll-card-width:hover img {
  filter: brightness(0) invert(1);;
  -webkit-filter: brightness(0) invert(1);;
}
.hover-green-btn:hover{
  box-shadow: black 0px 0px 15px  ;
}
.orange{
  margin-top: -400px !important;
  margin-bottom: 100px !important;
}
/* learn more end */

/* footer */
.footer-bg {
  background-color: #f8f7f7;
}

.vr-line-footer {
  width: 25%;
  height: 3px;
  background-color: #e94724;
}

.grapdes-design {
  font-weight: 400 !important;
}
/* footer */
.grapdes {
  font-family: futura;
  font-weight: 500;
  text-decoration: none;
  color: black;
}
.grapdes:hover {
  text-decoration: underline;
  color: black;
}

/* media query breakpoint */
@media (max-width: 991px) {
  .img-fluid-sec2 {
    width: 12% !important;
  }
}
@media (max-width: 470px) {
  .img-fluid {
    max-width: 90% !important;
  }
  .img-fluid-header {
    max-width: 85% !important;
  }
  .img-fluid-sec2 {
    width: 15% !important;
  }
}
@media (max-width: 1001px) and (min-width: 750px) {
  h1 {
    font-size: calc(28.0px + (40.0 - 28.0) * ((100vw - 750px) / (1001 - 750))) !important;
  }
  p, a , .btn{
    font-size: calc(17.0px + (20.0 - 17.0) * ((100vw - 750px) / (1001 - 750))) !important;
  }
  h5{
    font-size: calc(23.0px + (25.0 - 23.0) * ((100vw - 750px) / (1001 - 750))) !important;
  }
  h6, .learn-more-custom-height{
    font-size: calc(17.0px + (18.0 - 17.0) * ((100vw - 750px) / (1001 - 750))) !important;
  }
}
@media (max-width: 1000px) and (min-width: 991px) {
  h1 {
    font-size: calc(24.0px + (26.0 - 24.0) * ((100vw - 992px) / (1000 - 992))) !important;
  }
  p, a , .btn{
    font-size: calc(16.0px + (17.0 - 16.0) * ((100vw - 992px) / (1000 - 992)))!important;
  }
  h5{
    font-size: calc(20.0px + (23.0 - 20.0) * ((100vw - 992px) / (1000 - 992))) !important;
  }
  h6, .learn-more-custom-height{
    font-size: calc(16.0px + (17.0 - 16.0) * ((100vw - 992px) / (1000 - 992))) !important;
  }
}
@media (max-width: 749px) and (min-width: 300px) {
  h1 {
    font-size: calc(26.0px + (30.0 - 26.0) * ((100vw - 300px) / (749 - 300))) !important;
  }
  p, a , .btn{
    font-size: calc(16.0px + (18.0 - 16.0) * ((100vw - 300px) / (749 - 300)))!important;
  }
  h5{
    font-size: calc(18.0px + (20.0 - 18.0) * ((100vw - 300px) / (749 - 300))) !important;
  }
h6, .learn-more-custom-height{
    font-size: calc(14.0px + (18.0 - 14.0) * ((100vw - 300px) / (749 - 300))) !important;
  }

}
/* media query breakpoint */
