.navbar-nav .nav-link {
  color: var(--white); /* Use white color for the text */
}

/* Custom CSS for Holokai Brand */
:root {
  --holokai-blue: #5abbea;
  --holokai-orange: #ff6700;
  --deep-ocean-blue: #003553;
  --black: #231f20;
  --white: #ffffff;
  --blue: #E8F8FF;
  --deep-light-blue: #004368;
  --light-black: #242424;
}

/* Fonts in Holokai file */
@font-face {
  font-family: "Urbanist-SemiBold";
  src: url("/Urbanist-SemiBold.ttf") format("truetype");
}

@font-face {
  font-family: "Urbanist-ExtraBold";
  src: url("/Urbanist-ExtraBold.ttf") format("truetype");
}

@font-face {
  font-family: "Objective-Black-Italic";
  src: url("/Objective-Black-Italic.otf") format("opentype");
}

@font-face {
  font-family: "Objective-Medium";
  src: url("/Objective-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Objective-Regular";
  src: url("/Objective-Regular.otf") format("opentype");
}

@font-face {
  font-family: "Objective-ExtraBold";
  src: url("/Objective-ExtraBold.otf") format("opentype");
}

@font-face {
  font-family: "Objective-Bold";
  src: url("/Objective-Bold.otf") format("opentype");
}

.objective-extrabold{
  font-family: "Objective-ExtraBold" !important;
}

.fixed-top.navbar .menu-bar > .navbar-nav > li > a {
    color: white !important;
    font-family: "Objective-Medium";
    font-size: 15px !important;
    font-weight: 500 !important;
}
/* Navbar section  */
.navbar {
  background-color: var(--deep-ocean-blue) !important;
}

.navabar-brand-custom {
  max-height: 40px;
}

.login-icon {
  font-size: 1.2rem;
  margin-right: 8px;
  color: var(--holokai-orange);
}

.nav-link-gap {
  gap: 65px;
}
.nav-btn{
  margin-left: 15px; 
  padding: 5px 8px;
}
.navbar{
  --bs-navbar-toggler-focus-width: none !important;
}
/* Navbar section ends */
/* Hero section css  */

.hero-sec-bg {
  background-image: url("/Rectangle 30.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-section-image{
  border-radius: 20px;
}
.hero-h1{
  font-size: 55px;
  font-size: "Urbanist-SemiBold";
}
.hero-gradient-div{
  padding: 15px;
  z-index: 1;
}
.hero-gradient-bg-1{
  position: absolute;
  width: 190px;
  height: 170px;
  z-index: -1;
  top: 0;    
  left: 0;  
  background: linear-gradient(180deg, rgba(90, 187, 234, 0.5) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 22px 0px 0px 0px;
}
.hero-gradient-bg-2{
  position: absolute;
  width: 148px;
  height: 135px;
  z-index: -1; 
  bottom: 0;    
  right: 0;  
  background: linear-gradient(360deg, rgba(90, 187, 234, 0.6) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 0px 0px 22px 0px;
  margin-bottom: 44px;
}
.mt-header{
  margin-top: 80px;
}
/* Hero section css ends */
.btn-primary {
  background-color: var(--holokai-orange) !important;
  border-color: var(--holokai-orange) !important;
  color: var(--white) !important;
  font-family: "Objective-ExtraBold" !important;
  font-size: 15px;
  text-align: center;
  border-radius: 0px;
  width: 200px;
  height: 45px;
}

.btn-primary:hover {
  background-color: var(--holokai-blue);
  border-color: var(--holokai-blue);
}
.btn-primary:disabled {
  background-color: var(--deep-ocean-blue);
  border-color: var(--deep-ocean-blue);
  opacity: 0.65;
}
h1 {
  color: var(--white);
  font-family: "Urbanist-SemiBold";
}

.custom-toggler {
  background-color: transparent; /* Remove default background */
}

.custom-toggler .navbar-toggler-icon {
  background-color: white; /* Set background color of the icon */
  width: 30px; /* Adjust width */
  height: 30px; /* Adjust height */
}
.navbar-toggler{
  border: none !important;
}
/* Section 2 Transforming.... */


.txt{
  font-family: "Urbanist-SemiBold";
  color: var(--deep-ocean-blue);
  font-size: 46px;
  line-height: 60px;
}

.my-text{
  font-family: "Objective-Regular";
  font-size: 18px;
  line-height: 35px;
}

.bg-image{
  width: auto; height: 300px; object-fit: cover
}
.transform-gradient-bg{
  padding: 20px;
  max-width: 420px;
}
.gradient-bg-1{
  position: absolute;
  width: 210px;
  height: 270px;
  z-index: -1;
  top: 0;    
  left: 0;  
  background: linear-gradient(180deg, rgba(90, 187, 234, 0.2) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 22px 0px 0px 0px;
}
.gradient-bg-2{
  position: absolute;
  width: 190px;
  height: 290px;
  z-index: -1; 
  bottom: 0;    
  right: 0;  
  background: linear-gradient(360deg, rgba(90, 187, 234, 0.2) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 0px 0px 22px 0px;
}

/* How It Works Section Css */
.bg-custom{
  background-color: var(--blue);
}
.custom-card{
  border-radius: 22px;
}
.hiw-heading{
  font-family: "Urbanist-SemiBold";
  font-size: 65px;
  line-height: 71px;
  color: var(--deep-ocean-blue);
}
.card-img{
  width: 65px;
  height: 65px;
}

.card-title{
  color:var(--holokai-blue);
  font-family: "Urbanist-ExtraBold";
  font-size: 26px;
  line-height: 30px;
}

.card-subtitle-1{
  font-family: "Urbanist-ExtraBold";
  color: var(--deep-ocean-blue);
  font-size: 25px;
  line-height: 30px;
}

.card-subtitle-2{
  font-family: "Objective-Regular";
  font-size: 19px;
  line-height: 25px;
}


.card-bottom-left-gradient{
  width: 209px;
  height: 187px;
  z-index: -1;
  bottom: 0;    
  left: 0;  
  background: linear-gradient(68deg, rgba(90, 187, 234, 0.1) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 0px 0px 0px 22px;
}
.card-top-right-gradient{
  width: 383px;
  height: 270px;
  z-index: -1;
  top: 0;    
  right: 0;  
  background: linear-gradient(180deg, rgba(90, 187, 234, 0.1) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 0px 22px 0px 0px;
  margin: -5px;
}
.card-row{
  z-index: 1;
  padding: 15px;
}
/* General Styles for Gradient Containers */
.gradient-bottom-left{
  position: absolute;
  width: 160px; 
  height: 190px;
  z-index: -1; 
  border-radius: 0px 0px 0px 22px;
  pointer-events: none; /* Prevent interference with user interactions */
  bottom: -5%; 
  left: -6%;   
  background: linear-gradient(135deg, rgba(90, 187, 234, 0.2) 0%, rgba(90, 187, 234, 0) 100%);
}

.gradient-top-right{
position: absolute;
  width: 290px;
  height: 290px;
  z-index: -1; 
  pointer-events: none; 
  top: -5%;    
  right: -7%;  
  background: linear-gradient(180deg, rgba(90, 187, 234, 0.2) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 0px 22px 0px 0px;

}

/* How it works section Css ends */



/* Schedule a demo  */

.schd-demo-bg {
  background-image: url('/Rectangle98.svg'); /* Replace with your background image URL */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 829px; 
}
.card-title-1{
  font-family: "Urbanist-SemiBold";
  color: var(--white);
  font-size: 65px;
}
.card-custom {
  border-radius: 30px;
  width: 100%;
  max-width: 630px; 
  background: linear-gradient(125.98deg, #015482 1.74%, #003553 105.95%);
}
.card-text-schd-demo{
  font-size: 20px;
  font-family: "Objective-Regular";
  line-height: 32px;
}
/* Schedule a demo ends here */


/* Meet our Leadership Team Section */

.molt-heading{
  font-family: "Urbanist-SemiBold";
  color: var(--deep-ocean-blue);
  font-size: 65px;
}
.person-name{
  font-family: "Urbanist-SemiBold";
  color: var(--light-black);
  font-size: 26px;
}
.person-designation{
  font-family: "Objective-Medium";
  color: var(--deep-ocean-blue);
  font-size: 15px;
}
.bg-img-custom{
  background-color: rgba(90, 187, 234, 0.1);
  border-radius: 19px;
}


.text-img-div{
  width: 220px;
}
/* Meet our Leadership Team section ends here */

/* meet our partners section */
.meet-partner{
  padding-bottom: 109px;
  z-index: 1;
}
.mop-heading{
  font-family: "Urbanist-SemiBold";
  font-size: 65px;
  line-height: 71px;
  color: var(--deep-ocean-blue);
}
.mop-p-text{
  font-family: "Urbanist-SemiBold";
  font-size: 26px;
  line-height: 31px;
  color: var(--light-black);
}
.image-item {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.image-item:hover {
  transform: scale(1.05);
}

.divider {
  height: 66px;
  width: 1px;
  background-color: #ddd;
}
.dynamic-txt{
  font-family: "Objective-Medium";
  font-size: 18px;
  line-height: 30px;
}
/* .image-item:hover + .image-hover-box {
  display: block;
} */
.bg-partner{
  background-color: var(--blue);
}
.rectangular-box{
  display: none !important;
}
.leaderrectangular-box{
  display: none !important;
}
.bg-rectangle{
  background: linear-gradient(106.4deg, #015482 0%, #003553 100%);
  height: 275px;
  border-radius: 30px;
}
.bg-rectangleleader{
  background: linear-gradient(106.4deg, #015482 0%, #003553 100%);
  height: 275px;
  border-radius: 30px;
}
.partner-right-bottom-img{
  width: 463px;
  z-index: -1;
}
.partner-img-radius{
  border-radius: 20px;
}
.partner-fhr-bitlink-radius{
  border-radius: 20px;
}
.accordion-bg-color{
  background-color: var(--deep-ocean-blue) !important;
  
}
.accordion-img-wh{
  width: 200px; height: auto;
}
.accordion-button:focus{
  border-color: var(--white) !important;
  box-shadow: none !important;
}
.triangle-icon {
  width: 30px; /* Adjust size as needed */
  height: auto;
  transition: left 0.3s ease, top 0.3s ease; /* Smooth transitions */
}

/* Center aligned for the first image */
.triangle-left {
  left: calc(25% - 87px);
  top: -4%;
  transform: translate(-50%, -50%);
  width: 50px;
}

/* Center aligned for the second image */
.triangle-center {
  left: 50%;
  top: -4%; /* Center vertically */
  transform: translate(-50%, -50%);
  width: 50px;
}

/* Center aligned for the third image */
.triangle-right {
  left: calc(75% + 78px);
  top: -4%;
  transform: translate(-50%, -50%);
  width: 50px;
}
/*  Meet our Partners Section ends here.. */

.triangle-john {
  left: calc(25% - 200px);
  top: -4%;
  transform: translate(-50%, -50%);
  width: 50px;
}

.triangle-nathan {
  left: calc(25% - -42px);
  top: -4%;
  transform: translate(-50%, -50%);
  width: 50px;
}

.triangle-mark {
  left: 50%;
  top: -4%;
  transform: translate(-50%, -50%);
  width: 50px;
}

.triangle-dane {
  left: calc(75% + -55px);
  top: -4%;
  transform: translate(-50%, -50%);
  width: 50px;
}

.triangle-brian {
  left: calc(75% + 190px);
  top: -4%;
  transform: translate(-50%, -50%);
  width: 50px;
}

/* About us Section */
.bg-about{
  background-color: var(--deep-ocean-blue)
}
.about-holokai{
  font-family: "Urbanist-SemiBold";
  font-size: 65px;
}
.about-h3{
  font-family: "Objective-ExtraBold";
  font-size: 24px;
  color: var(--white);
}
.about-p{
  font-family: "Objective-Regular" ;
  color: var(--white);
  font-size: 18px;
  line-height: 26px;
}

.about-img{
  z-index: 1;
    position: relative;
}
.about-gradient-bg-1{
  position: absolute;
  width: 290px;
  height: 300px;
  top: 0;    
  left: 0;  
  background: linear-gradient(180deg, rgba(90, 187, 234, 0.2) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 22px 0px 0px 0px;
}
.about-gradient-bg-2{
  position: absolute;
  width: 310px;
  height: 290px;
  bottom: 0;
  right: 0; 
  background: linear-gradient(360deg, rgba(90, 187, 234, 0.2) 0%, rgba(90, 187, 234, 0) 100%);
  border-radius: 0px 0px 22px 0px;
}
.right-img-gradients{
  padding: 24px;
}
/* About us section ends */


/* our mission begin */
.ocv{
  font-family: "Urbanist-SemiBold";
  color: var(--deep-ocean-blue);
  font-size: 65px;
  line-height: 71px;
}
.our-mission{
  font-family: "Urbanist-SemiBold";
  font-size: 65px;
  line-height: 71px;
}
.color-span{
  color: var(--holokai-blue);
  font-family: "Objective-Bold";
}
.mission-bg{
  background-color: var(--blue);
  border-radius: 33px;
}

.mission{
margin-top: 80px;
margin-bottom: 80px;
}
.p-mission-text{
  font-family: "Objective-Regular";
  font-size: 18px;
  line-height: 25px;
}
.mission-right-heading{
  color: var(--deep-ocean-blue);
  font-family: "Urbanist-SemiBold";
  font-size: 26px;
  line-height: 31px;
}
.mission-right-bottom-img{
    width: auto; height: 250px; object-fit: cover
}
/* our mission ends */

/* Footer section */
.footer-bg-1{
  background-color: var(--deep-ocean-blue);
}
.footer-bg-2{
  background-color: var(--deep-light-blue);
}
.footer-links{
  font-family: "Objective-Medium";
  font-size: 15px;
  line-height: 18px;
}
.footer-demo-btn-div{
  z-index:1;
}
.footer-login{
  list-style: none !important;
  font-family:"Objective-ExtraBold" !important;
  font-size: 15px;
  line-height: 18px;
}
.footer-logo{
  width: auto;
  height: 35px;
}
/* footer section ends */
@media (max-width: 768px) {
  .schd-demo-bg {
      background-image: url('/Rectangle98.svg'); /* Background image */
      background-size: 190% auto; /* Set background size, increase width to crop from the right */
      background-position: right bottom; /* Position background to crop from the right */
      height: 1090px; /* Adjust height if needed */
      flex-direction: column; /* Ensure children are stacked vertically */
      justify-content: flex-start; /* Align children to the top */
  }
  .schd-demo-mobile-gradient{
    background: linear-gradient(180deg, #003553 0%, rgba(0, 53, 83, 0.74) 30%, rgba(0, 53, 83, 0) 100%);

  }
  .card-custom{
    margin-top: 70px;
  }
  .footer-left-img{
   top: 50% !important;
   height: 50% !important;
  }

}
.private-mode-banner{
  display: none;
}
.nav-account {
  margin-top: 100px !important;
}

html[dir=ltr] .crmEntityFormView .cell input[type=text],
html[dir=ltr] .crmEntityFormView .cell select,
html[dir=ltr] .crmEntityFormView .cell textarea,
html[dir=ltr] .crmEntityFormView .cell input.form-control:focus,
html[dir=ltr] .crmEntityFormView .cell select.form-control:focus,
html[dir=ltr] .crmEntityFormView .cell textarea.form-control:focus {
  border: 1px solid #949494 !important;
}

/* Hide the element between 991px and 1400px screen width */
@media (min-width: 991px) and (max-width: 1400px) {
  .custom-displaysize {
    display: none !important;
  }
}
@media (min-width: 1401px){
  .custom-hidesize {
    display: none !important;
  }
}