@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/dist/vanilla-datetimerange-picker.css");


@font-face {
  font-family: 'Urbanist';
  src: url(/assets/Urbanist-Medium-35c5b865969e09299b87cb9b144e4cb16b22cffd0351cdac733e4ef18f042bc4.ttf);
}

body{
  font-family: 'Urbanist' !important;
}

.website{
  font-family: 'Inter' !important;
}

a.active {
  background-color: #0B498E;
  border: 1px solid #FFFFFF80;
}

#myTab li a.active {
  background-color: #EDF5FE !important;
  border: unset !important;
  border-bottom: 4px solid #286DBA !important;
  font-weight: 600;
}

.primary-btn-color {
  background-color: #0B498E !important;
}

#myTab li a{
  color: #286DBA;
}

.custom-tab-bar .active{
  border-radius: 22px;
  background: #935EFB;
  color:#ffffff;  
}

.custom-tab-bar a.active:after{
  background-color: transparent;
}

.nav-bg-color{
  background: #111827;
}
.side-nav-bg-color{
  background: #0B498E;
  /* background: #0B498E; */
}
.nav_logo img{
  height: 50px;
  /* margin-bottom: 50px; */
}
.all-badge{
  background: #935EFB;
  color: #ffffff;
  font-weight: 400;
}
.due-badge{
  color: #3C148B;
  font-weight: 400;
  background: linear-gradient(0deg, rgba(255, 27, 27, 0.24), rgba(255, 27, 27, 0.24)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.overdue-badge{
  color: #3C148B;
  font-weight: 400;
  background: linear-gradient(0deg, rgba(255, 27, 27, 0.24), rgba(255, 27, 27, 0.24)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
}
.due-15-days-badge{
  color: #3C148B;
  font-weight: 400;
  background: linear-gradient(0deg, rgba(255, 191, 0, 0.5), rgba(255, 191, 0, 0.5)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
}
.in-cal-badge{
  color: #3C148B;
  font-weight: 400;
  background: linear-gradient(0deg, rgba(233, 222, 252, 1), rgba(233, 222, 252, 1)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
}

.due-days-badge{
  color: #3C148B;
  font-weight: 400;
  background: linear-gradient(0deg, rgba(255, 191, 0, 0.5), rgba(255, 191, 0, 0.5)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
}
.calibaration-badge{
  background: linear-gradient(0deg, #E9DEFC, #E9DEFC),linear-gradient(0deg, #FFFFFF, #FFFFFF);
  color: #3C148B;
  font-weight: 400;
}
.active-badge{
  background: linear-gradient(0deg, rgba(29, 205, 157, 0.39), rgba(29, 205, 157, 0.39)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
  color: #006348;
  font-weight: 400;
}
.inactive-badge{
  background: linear-gradient(0deg, rgba(200, 200, 200, 0.7), rgba(200, 200, 200, 0.7)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
  color: #0E0E0E;
  font-weight: 400;
}
.selected-badge{
  border: 3px solid #93c5fd;
}
.text-violet{
  color: #0B498E;
  text-decoration-line: underline;
}
/* dashboard */
/* .tool-img{
  height: 182px;
} */
.dashboard-card{
  background: #0B498E;
  border-radius: 8px;
  height: fit-content;
  margin-bottom: 10px;
}
.dashboard-card-normal{
  /* background: #0B498E; */
  border-radius: 8px;
  height: fit-content;
  margin-bottom: 10px;
}
.tool-details-card{
  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; */
  /* padding: 10px 20px; */
  border-radius: 8px;
}
.tool-img{
  height: 5.6rem;
  margin: 5px 10px;
  border-radius: 8px;
}
.toolmaster-img{
  height: 6.6rem;
  margin: 5px 10px;
  border-radius: 8px;
}
.indicator-img{
  height: 70px;
}
#myTab li {
  color: #3C148B;
}
.background-logo{
  /* background-image: url(/cali-banner.svg); */
  background-repeat: no-repeat;
  height: 100%; 
  background-position: center;
  background-size: cover;
 
  /* background-position: left bottom; */
  /* background-position: 100% 100%; */
  /* background-size: auto */
}
.outer-shadow{
  box-shadow: 0 3px 10px rgb(0,0,0,0.2);
}
.bg-purple-btn{
  background-color:#0B498E ;
  color: #ffffff;
}
.outline-purple-btn{
  border: 1px solid #0B498E;
  color:#0B498E;
}
.outline-purple-btn:hover{
  background-color: #ffffff;
  color: #0B498E;
}
aria-selected {
  background-color: #0B498E;
  color: #ffffff;
}
.h-1 {
  height: 0.1rem !important;
}
.ss-main {
  @apply bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5
}
.ss-values {
  @apply p-2
}
.is-disabled {
  pointer-events: none !important;
}
.pagy-nav,
.pagy-nav-js {
  @apply flex space-x-2;
}

.pagy-nav .page a,
.pagy-nav .page.active,
.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page a,
.pagy-nav-js .page.active,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply block rounded-lg px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
  font-weight: normal;
  &:hover{
    @apply bg-gray-300;
  }
  &:active{
    @apply bg-gray-400 text-white;
  }
}

.page.active {
  background-color: #0B498E !important;
  margin: auto;
}
.page.active, .page a, .page.disabled {
  padding: 5px 12px !important;
  font-size: 12px !important;
}
.page a, .page.disabled{
  background-color: white !important;
  border: 1px solid #e2e8f0;
  color: black !important;
}

.pagy-nav .page.prev.disabled,
.pagy-nav .page.next.disabled,
.pagy-nav-js .page.prev.disabled,
.pagy-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
  &:hover {
    @apply text-gray-400 bg-gray-200;
  }
  &:active {
    @apply text-gray-400 bg-gray-200;
  }
}
.pagy-nav, .pagy-nav .page.active, .pagy-nav .page.next.disabled, .pagy-nav .page.prev.disabled, .pagy-nav .page a {
  box-shadow: none;
}
.pagy-nav .page.active,
.pagy-nav-js .page.active {
  @apply text-white cursor-default bg-blue-500;
  &:hover {
    @apply text-white bg-gray-400;
  }
  &:active {
    @apply bg-gray-400 text-white;
  }
}


.pagy-combo-nav-js {
  @apply flex max-w-max rounded-full px-3 py-1 text-sm text-gray-500 font-semibold bg-gray-200 shadow-md;
}

.pagy-combo-nav-js .pagy-combo-input {
  @apply bg-white px-2 rounded-sm
}

.pagy-combo-nav-js .page.prev,
.pagy-combo-nav-js .page.next {
  &:hover {
    @apply text-gray-800;
  }
  &:active {
    @apply text-gray-800;
  }
}

.pagy-combo-nav-js .page.prev.disabled,
.pagy-combo-nav-js .page.next.disabled {
  @apply text-gray-400 cursor-default;
}

.pagy-nav .page.active, .pagy-nav .page a {
  border-radius: 50%;
  font-weight: normal;
}
.pagy-nav .page.next a, .pagy-nav .page.prev a {
  border-radius: 5px;
}

.date-range input[type="text"]{
  border-radius: 6px !important;
  border-color: rgb(226 232 240) ;
  font-size: .875rem;
  padding: 0.6rem;
}
.daterangepicker.auto-apply .drp-buttons {
  display: block !important;
}

.preview-image {
  width: 300px; 
  height: auto;
}

.preview-image-container {
  width: 300px; 
  height: 300px
}
.chart-content{
  background-color: #f5f5f5;
  border-radius: 13.271px;
}
.chart-text-title{
  font-size: 20px;
  font-weight: 600;
  color: #0E0E0E;
}

.banner-wrap{
  /* height: 278px;
  background-image: url(/banner-rec.svg);
  background-repeat: no-repeat;
  background-size: cover; */

}
.banner{
  /* background-image: url(/banner.svg); */
}
.banner-logo{
  position: absolute;
  top: 15%;
  left: 35%;
  width: 211px;
  height: 211px;
  background-color: #ffffff;
  border-radius: 50%;
}
.img-background{
  background-image: url(/round.svg);
  height: 100%;
}
.grey-card{
  border-radius: 10px;
  background: #F6FBFF;
}
.text-blue{
  color: #286DBA;
}



.header-text {
  background-color: rgba(176, 176, 176, 0.7);
}

.the-header {
  position: relative;
  padding: 5% 0px;
}

.header-background {
  position: absolute;
  width: 100%;
  object-fit: cover;
  z-index: -100;
  bottom: 0;
  left: 0;
  right: 0;
  top:0;
}
.img-wrapper{
  background-image: url(/round.svg);
  background-repeat: no-repeat;
  background-size: auto;
  height: 100%;
}

.profile-picture {
  /* border-radius: 50%; */
  /* width: 19%;
  height: 202px; */
  /* width: 150px; */
  /* margin-top: -75px; */ 
  margin-left: 30px;
  /* background-image: url(/round.svg); */
  /* background-repeat: no-repeat; */
  /* background-size: auto; */
  background-color: #ffffff;
  height: 215px;
  width: 215px;
  border-radius: 50%;
  /* display: flex;
  align-items: center;
  justify-content: center; */
  
}
/* .img-div{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
} */
.banner-round-img{
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sm-the-header {
  position: relative;
  padding: 40px 20px;
}

.sm-header-background {
  position: absolute;
  width: 100%;
  object-fit: cover;
  z-index: -100;
  bottom: 0;
  left: 0;
  right: 0;
  top:0;
}

.sm-profile-picture {
  /* border-radius: 50%; */
  height: 100px;
  width: 100px;
  /* width: 30%; */
  margin-top: -50px;
  margin-left: 30px;
  background-image: url(/round.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
.side_nav_user_wrapper {
  word-wrap: break-word;
  border-radius: 10px;
  background-color: #638BB7;
  padding: 5px;
  color: #F3F3F3;
}
.btn-wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-tab-underline{
  border-bottom: 0.035rem solid #0B498E;
}
.back-btn{
  border-radius: 6.543px;
  border: 1px solid #0B498E;
  color: #0B498E;
}
.print-btn{
  border-radius: 8px;
  background-color: #0B498E !important;
  color: #ffffff;
}
.w-sm{
  width: 12%;
}
.w-md{
  width: 50%;
}
.w-xl{
  width: 75%
}
.text-stroke-2
{
  -webkit-text-stroke: 0.1px;
  line-height: 1.70rem !important;
}
.round-blue{
  height: 50px;
  width: 50px;
  background-color: #286DBA;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

#upcomingCalibrationsDiv {
  width: 100%;
  height: 300px;
}
#calibrationDuesDiv {
  width: 100%;
  height: 300px;
}
#calibrationHistoryDiv {
  width: 100%;
  height: 300px;
}
#statusChartDiv {
  width: 100%;
  height: 300px;
}

.pg-header {
  position: sticky;
  top: 0;
  width: -webkit-fill-available;
  height: auto;
  background-color: white;
  padding-bottom: 1px;
}
.th-row {
  position: sticky;
  z-index: 10;
  top: 115px;
}
.dis-block{
  display: block;
}

/* #sidebar-multi-level-sidebar{
  display:none;
  border-radius: 5px;
  border: 1px solid #0B498E;
} */
/* fonts */

.go-line-card {
  @apply rounded-lg border border-slate-200 
}
.go-card {
  @apply bg-white rounded-lg border border-slate-200  
}
.go-card-content {
  @apply px-5 py-3
}

.go-hover-card{
  @apply px-4 py-3 rounded-lg border border-slate-200 bg-white transform transition duration-500 hover:scale-105 hover:shadow-lg;
}

.font-14 { font-size: 14px !important; }
.font-16 { font-size: 16px !important; }
.font-18 { font-size: 18px !important; }

.ml-100px { margin-left: 100px; }
.ml-60px { margin-left: 60px; }
.-mt-20px { margin-top: -20px; }
.m-auto { margin: auto; }
.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}

.col-span-4 { grid-column: span 4/span 4; }
.col-span-5 { grid-column: span 5/span 5; }

/* */

/* #fixed-sidenav {
  width: 100px;
  height: 100vh;
  background-color: #333;
  color: white;
  float: left;
}
#sidebar-multi-level-sidebar {
  width: 0;
  height: 100vh;
  background-color: #666;
  color: white;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.3s ease;
} */

.tooltip {
  @apply z-40;
  transition: opacity 0.3s;
  visibility: hidden;
  opacity: 0;
}

.tooltip-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
.bg-nav{
  background: rgba(255, 255, 255, 0.85);
}
#hero_section{
  margin-top: 2rem;
}
.item-card-fill{
  /* background-color: #F5FAFF; */
  background-color: #c0ddef;
}
.footer-text{
  color: #0B498E;
}
.top-head{
  position: absolute;
  top: 0px;
  height: 93px;
  width: 100%;
  margin-bottom: 20px;
  overflow: hidden;
}
.content-wrap  {
  position: absolute;
  width: 100%;
  top: 50px;
  height: 85%;
  overflow: auto;
}
.modal-image{
  width: 100%;
  height: auto;
}
.limit a.active {
  color: #3F83F8;
  font-weight: bolder;
  background-color: unset !important;
  border: unset !important;
}


.gridtable tbody{
  display: block;
  max-height: 500px;
  overflow-y: scroll;
}
.gridtable thead{
  background-color: #EBF5FF;
  z-index: -1;
}
.gridtable thead, .gridtable tbody tr{
  display: table;
  table-layout: fixed;
  width: 100%;
}
.gridtable thead{
  width: calc(100% - 1.1em);
}
.gridtable thead{
  position: relative;
}
.gridtable thead th:last-child:after{
  /* content: ' ';
  position: absolute;
  background-color: #337ab7;
  width: 1.3em;
  height: 38px;
  right: -1.3em;
  top: 0;
  border-bottom: 2px solid #ddd; */
}

/* Website */

.primary-btn-bg{
  background-color: #286DBA !important;
  color: #ffffff;
}
.primary-btn-text-color{
  color: #286DBA !important;
}

.fill-btn{
  background-color: #286DBA !important;
  color: #ffffff;
  font-size: 16px;
  font-size: 16px;
  padding: 0.75rem 1.5rem;
}
.btn-1 {
  /* font-family: Hack, monospace; */
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  padding: 0.75rem 1.5rem;
  border: 0;
  transition: all 0.5s;
  border-radius: 10px;
  width: auto;
  position: relative;

  &::after {
      content: "";
      font-weight: 400;
      position: absolute;
      left: 0;
      top: 20%;
      right: 0;
      bottom: 0;
      opacity: 0;
      height: 28px;
      margin-left: 10px;
      background-image: url(/Play-2.png);
      background-size: contain;
      background-repeat: no-repeat;
  }

  &:hover {
      transition: all 0.5s;
      border-radius: 10px;
      box-shadow: 0px 6px 15px #286DBA;
      padding: 0.75rem 2.5rem 0.75rem 2.5rem;

      &::after {
          opacity: 1;
          transition: all 0.5s;

      }
  }
}
.fill-btn1{
  background-color: #E6F1FE;
  color: #286DBA;  
  padding: 0.75rem 1.5rem;
  font-size: 16px;
  &:hover {
    
    border: 2px solid #286DBA;  
    background-color: #ffffff;
    }
}

.border-btn{
  background-color: #ffffff;
  color: rgba(0, 111, 238, 1);
  font-size: 16px;
  font-weight: 600;
  border: 2px solid rgba(0, 111, 238, 1);
  /* border-radius: 12px; */
}
.gradient-card{
  background: linear-gradient(136.04deg, #286DBA 19.22%, #00488A 69.6%);
  /* background: linear-gradient(136.04deg, #286DBA 19.22%, #000000 69.6%); */
}
.mobile-hero-card{
  height: 25vh;
}

.banner-section {
  /* background-image: url(/cali-banner.svg); */
  background-size: cover;
  background-repeat: no-repeat;
  height: 680px;
  margin-top: 6rem;
}
.mobile-banner-section{
  background-image: url(/mobile_banner.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 735px;
  display: flex;
  align-items: end;
  /* margin-top: 6rem; */

}


section {
  width: 100%;
}

.outer-wrapper {
  max-width: 100vw;
  overflow-x: scroll;
  position: relative;
  /* scrollbar-color: #d5ac68 #f1db9d;
  scrollbar-width: thin;
  -ms-overflow-style: none; */
}

.pseduo-track {
  /* background-color: #f1db9d; */
  height: 2px;
  width: 100%;
  position: relative;
  top: -3px;
  z-index: -10;
}

@media (any-hover: none) {
  .pseduo-track {
    display: none;
  }
}

.outer-wrapper::-webkit-scrollbar {
  height: 5px;
}

.outer-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}

.outer-wrapper::-webkit-scrollbar-thumb {
  height: 5px;
  /* background-color: #d5ac68; */
}

.outer-wrapper::-webkit-scrollbar-thumb:hover {
  /* background-color: #f1db9d; */
}

.outer-wrapper::-webkit-scrollbar:vertical {
  display: none;
}

.inner-wrapper {
  display: flex;
  /* padding-bottom: 10px; */
}

.pseudo-item {
  /* height: 300px;
  width: 369px; */
  margin-right: 30px;
  flex-shrink: 0;
  /* background-color: gray; */
}

.pseudo-item:nth-of-type(2n) {
  /* background-color: lightgray; */
}
.md2{
  margin: 25px;
}
.d2 {
  /* width: 50%; */
  margin: -90px 50px;
  /* height: 200px; */
  /* background-color: #993333; */
}
.bg-blue-grad{
  background: linear-gradient(104.03deg, #286DBA 40.59%, #0B498E 86.37%);
}
.scroll-card{
  height: 160px;
}
.industy-sec{
  background-image: url(/side-round.svg);
  background-size: auto;
  background-repeat: no-repeat;
  height: max-content;
}
.machine-card{
  background-image: url(/side-round.svg);
  background-size: auto;
  background-repeat: no-repeat;
  height: 160px;
}
.font-extra-bold{
  font-weight: 600 !important;
  font-size: 18px;
}
.font-normal{
  font-size: 16px !important;
  font-weight: 400 !important;
}

.side-image{
  height: 289px;
  /* width: 100%; */
  border-radius: 10px;
  aspect-ratio: 15/7;
  object-fit: contain;
}
.m-up-image{
  /* height: 289px; */
  /* width: 100%; */
  border-radius: 10px;
  aspect-ratio: 15/7;
  object-fit: contain;
}
.industry_testimonial_p{
  max-width: 619px;
  object-fit: contain;
}
.h-70vh{
  height: 70vh;
}
.h-60vh{
  height: 60vh;
}
.h-82{
  height: 82vh;
}
.h-50vh{
  height: 50vh;
}
.tick{
  height: 18px;
}

.text-blue-bold{
  font-size: 20px;
  color: rgba(40, 109, 186, 1);
  font-weight: 600 !important;
}
/* .connect-now-wraper{
  height: 590px;
} */
.connect-now-sec{
  /* background-image: url(/Contact_section.png); */
  background-image: url(/connect-now-grad.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 720px;
}
.mobile-connect-now-sec{
  background-image:
    linear-gradient(to bottom, rgba(1, 1, 1, 0.4), rgba(0, 0, 0, 0.6)),
    url(/connect-now-grad.png);
  background-size: cover;
  background-repeat: no-repeat;
  height: 720px;
}

.form-background{
  background-color: rgba(34, 34, 34, 0.7);
  border-radius: 10px;
}  

/* .gradient-card img:hover {
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  z-index: 0;
} */
.bg-modal{
  background-color: rgb(230,239,247);
}
.industry{
  margin-bottom: 6rem;;
}
.bg-dark-blue{
  background: rgba(20, 1, 83, 1)!important;
}
.slide.active {
  transform: scale(1);
  opacity: 1;
} 
.bg-sky-blue{
   background: rgba(238, 245, 255, 1);
}
.card-shadow{
  background: rgba(255, 255, 255, 1);
  /* box-shadow: 11px 4px 55px rgba(0, 0, 0, 0.5); */
  box-shadow: 0px 10px 10px 4px rgba(0, 0, 0, 0.109);
  height: 25rem;

}

.pp-head-text{
  margin: 0;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-weight: 400;
}
.pp-date-text{
  font-weight: 400;
  font-size: 0.8428571428571429rem;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-weight: 400;
  font-size: 20px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.pp-p1-text{    
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-weight: 400;
  font-size: 18px;
  margin-top: 80px;
  margin-bottom: 16px;
}
.pp-p2-text{
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-weight: 400;
  font-size: 18px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.pp-head1-text{
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-size: 24px;
  margin-top: 60px;
}
.pp-heading{
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-weight: 600;
  font-size: 22px;
  margin-top: 32px;
}  
.pp-small-heading{
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.00938em;
  font-weight: 600;
  font-size: 18px;
  margin-top: 20px;
}
.video-container {
  position: relative;
  width: 640px;
  height: 360px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
#gifContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh; 
  /* background-color: #f9f9f9; Background color */
}
#gif {
  /* max-width: 100%;  */
  height: auto;
  display: none;
  /* width: 672px; */
}
#staticImage {
  height: auto;
  display: none; /* Hidden initially */
  /* max-width: 100%; Ensure static image is responsive */
  /* height: 728px; */
}
.h-84{
  height: 22rem !important;
}
.h-max{
  height: max-content!important ;
}
.carousel-height{
  height: 37rem;
}

.test-scroll-container {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 120px;
}
.no-transition {
  transition: none!important; /* No transition initially */
}


/* Bounce from bottom animation */
@keyframes bounce-bottom {
  0% {
    opacity: 0;
    transform: translateY(100px); /* Start off-screen (bottom) */
  }
  50% {
    opacity: 1;
    transform: translateY(-20px); /* Small bounce */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Settle at the final position */
  }
}

/* Left-in animation */
@keyframes left-in {
  0% {
    opacity: 0;
    transform: translateX(-100px); /* Start off-screen (left) */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* Settle at the final position */
  }
}

/* Container */
.tcontainer {
  position: relative;
  /* width: 75%;  */
  height: 50%; 
  margin-top: 10rem;
}

/* Main images */
.figure_image {
  position: absolute;
  top: -33%;
  animation: bounce-bottom 1s ease-in-out;
}

.ellipse_3 {
  position: absolute;
  top: 100%;
  animation: bounce-bottom 1s ease-in-out 0.2s;
}

.main-image {
  /* width: 100%;
  height: auto; */
  border-radius: 10px;
  animation: bounce-bottom 1s ease-in-out 0.4s;
}

/* Left-in transition for report */
.chart {
  position: absolute;
  top: 0%;
  left: -18%;
  height: auto;
  /* transform: translateX(-50%); */
  animation: bounce-bottom 1s ease-in-out 0.4s; /* Left-in animation */
}

/* Left-in transition for card */
.cardimg {
  position: absolute;
  top: 40%;
  left: -27%;
  height: auto;
  /* transform: translateX(-50%); */
  animation: bounce-bottom  1s ease-in-out 0.8s; /* Left-in animation */
}

/* Calibration tool notification */
/* .notification {
  position: absolute;
  bottom: 30px;
  left: 20px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  animation: bounce-bottom 1s ease-in-out 1s;
} */

/* Bottom icons */
.bottom-icons {
  gap: 15px;
}

.bottom-icons img {
  border-radius: 50%;
  padding: 8px;
}

.cal {
  position: absolute;
  top: 100%;
  right: 0%;
  animation: bounce-bottom 1s ease-in-out 1.2s;
}

.blue-tool {
  position: absolute;
  top: 120%;
  right: 10%;
  animation: bounce-bottom 1s ease-in-out 1.4s;
}

.bell {
  position: absolute;
  top: 120%;
  right: -6%;
  animation: bounce-bottom 1s ease-in-out 1.6s;
}
.rotated-arrow{
  transform: rotate(25deg) translateX(0px);
}
.blue-shadow{
  box-shadow: 0px 0px 20px 0px rgba(40, 109, 186, 0.3)!important;
}




/* SCROLL */

/* .scoll-body {
  display: flex;
  justify-content: center;
  
}

.scroll-container {
  display: flex;
  align-items: center;
  position: relative;
}

.scontainer {
  display: flex;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap;
  padding: 20px;
  border-radius: 10px;
  width: 100%; 
  max-width: 1445px; 
  scrollbar-width: none;
  -ms-overflow-style: none; 
  margin-left: 185px;
}

.scontainer::-webkit-scrollbar {
  display: none;
} */

.scard {
  flex: 0 0 auto;
  width: 390px;
  margin-right: 20px;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  overflow: hidden;
}
.scard p {
  font-size: 14px;
  /* color: #555; */
  margin: 0;
  max-height: 4.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  -webkit-box-orient: vertical;
}

.scard:hover {
  transform: scale(1.05);
}


.scard:hover {
  transform: scale(1.05);
}

.scarousel {
  width: 100%; /* Set to the width you want the visible area to be */
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.scarousel-track {
  display: flex;
}

.mcarousel {
  width: 100%; /* Set to the width you want the visible area to be */
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.mcarousel-track {
  display: flex;
}
.mcard {
  flex: 0 0 auto;
  width: 360px;
  margin-right: 20px;
  padding: 10px;
  border-radius: 16px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  overflow: hidden;
}
.mcard p {
  font-size: 14px;
  /* color: #555; */
  margin: 0;
  max-height: 5.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Number of lines to show */
  -webkit-box-orient: vertical;
}

.mcard:hover {
  transform: scale(1.05);
}


.mcard:hover {
  transform: scale(1.05);
}

.hero-heading{
  font-size:44px;
  font-weight: 600;
  line-height: 3.25rem;
  color: rgba(11, 73, 142, 1);
}
.hero-heading-light{
  font-size:44px;
  font-weight: 400;
  line-height: 3.25rem;
  color: rgba(11, 73, 142, 1);
}

.m-hero-heading{
  font-size:30px;
  font-weight: 600;
  line-height: 3.25rem;
  color: rgba(11, 73, 142, 1);
}
.m-hero-heading-light{
  font-size:30px;
  font-weight: 400;
  line-height: 36px;
  color: rgba(11, 73, 142, 1);
}

.highlighted-text{
  font-size: 30px;
  color: rgba(11, 73, 142, 1);
  font-weight: 600;
  line-height: 44px;
}
.highlighted-light{
  font-size: 36px;
  color: #ffffff;
  /* font-weight: 500; */
  line-height: 44px;
}

.base-color{
  color: rgba(11, 73, 142, 1);
  font-size: 22px;
  font-weight: 500;
  line-height: 36px;
}
.hero-sub-text{
  font-size:20px;
  font-weight: 400;
  line-height: 28px;
  /* color: rgba(11, 73, 142, 1); */
}
.para-text{
  font-size: 24px;
  /* font-weight: 500 !important; */
  line-height: 32px;
  text-align: center;
}
.font-port{
  font-family: Pacifico;
  font-weight: 400;
  font-size: 24px;
}
.main-color{
  color:rgba(11, 73, 142, 1)
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.card-wrapper{
  display: flex;
  justify-content: space-around;
}
.kcard{
  width: 100%;
  height: 250px;
  /* border-radius: 15px;
  padding: 1.5rem;
  background: white; */
  position: relative;
  /* display: flex; */
  align-items: flex-end;
  transition: 0.4s ease-out;
  /* box-shadow: 0px 7px 10px rgba(black, 0.5); */
}

.kcard:before{
   opacity: 1;
}

.kcard:hover .info1 {
  transform: translateY(20px); 
}
.kcard:hover .info2 {
  opacity: 1;
  transform: translateY(40px); 
}
.kcard:hover img {
  transform: scale(1.25);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
.kcard img{
  height: 60px!important ;
}

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

.info1{
  position: relative;
  z-index: 3;
  color: white;
  opacity: 1;
  transform: translateY(80px);
  transition: 0.5s;
}
.info2{
  position: relative;
  z-index: 3;
  color: white;
  opacity: 0;
  transform: translateY(0px);
  transition: 0.5s;
}
  
.kcard:hover{
  /* background: dodgerblue; */
  color: white;
}
.key-benifit-card{
  /* background-image:
  linear-gradient(0deg, #0B498E, #0B498E),linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url(/background-vector.svg); */
  background-image: url(/background-vector.svg);
  background: linear-gradient(0deg, #0B498E, #0B498E),linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.25);
}
.btn-keybenifit{
  color: #ffffff;
  background: linear-gradient(0deg, #0B498E, #0B498E),linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  border-radius: 12px;
  border: 1px solid #ffffff;
}
.h-65vh{
  height: 65vh;
}
.h-auto{
  height: auto !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */