:root {
  --primary-color: #ff0896; /* A blue color for primary actions */
  --secondary-color: #E6397D; /* A gray color for secondary elements */
  --text-color: #000000;     /* A dark color for text */
  --background-color: #F7F8F7; /* A white color for the background */
}
.text-D1{
  color: #072f85;
}
.BannerTitle{
  font-size: clamp(2rem, 1.6rem + 2vw, 3.44rem);
}
.BannerDescription{
  font-size: clamp(1rem, 1rem + 2vw, 1rem);
}
.Getbutton{
  font-size: clamp(1.1rem, 1rem + 2vw, 1.1rem);
  background: var(--primary-color);
  width: 275px;
  height:70px;
  color: #fff;
}
.Getbutton .arrow{
  background: url(Images/arrow1.png);
  width: 42px;
  height: 15px;
}
.bannerSliderContainer{
  background-image:url(Images/office-chair.jpg);
  background-size: cover;  
  position: relative;
}
.bannerSliderContainer::after {
    background-color: #8e1bb56b;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 20px
}
 .item{
  color: #fff;
  padding: 20px 0px;
  border-bottom: 1px solid #fff;
 }
 .slider{
  z-index: 9999;
 }
.slider-details .title{
  font-size: clamp(1.3rem, .5rem + 2vw, 1rem);
}
.slider-details .discription{
   font-size: clamp(.9rem, .5rem + 2vw, 1rem);
}

.slider-wrapper {
    position: relative;
}

.arrows-container{
    position: absolute;
    bottom: -15px;
    right: 0;
    display: flex;
}

/* Reset Slick's default absolute positioning for arrows inside this container */
.arrows-container .slick-arrow {
    position: static;
    transform: none;
}
.slick-prev, .slick-next{
  background: url(Images/cercle-arrow.png) !important;
  width: 42px !important;
  height: 42px !important;
  background-size: cover !important;
}
.slick-prev:before, .slick-next:before{
  display: none;
}
.slick-prev{
  transform: scaleX(-1) !important;
}
.slide-count{
  color: var(--secondary-color);
  font-size: 18px;
}
.officeitems {
  display: flex;
  flex-wrap: wrap; /* Allows stacking on smaller screens */
}

.officeitemdetails, 
.officeitemimage {
  flex: 1 1 70%; /* Grow: 1, Shrink: 1, Basis: 50% */
  box-sizing: border-box; /* Ensures padding/borders don't break the layout */
  border-radius: 10px;
  overflow: hidden;
}
.officeitemdetails{
  background: #fff;
  padding: 15px;
}

/* Optional: Make the image responsive within its 50% container */
.officeitemimage img {
  width: 100%;
  height: auto;
  display: block;
}
.number{
  font-size: 50px;;
  color: #fff;
    -webkit-text-stroke-width: 1px; /* Outline width */
  -webkit-text-stroke-color: #C3C3C3; /* Outline color */
  -webkit-text-stroke: 1px #C3C3C3;
}
.officetitle{
  font-size: 22px;
}
.officeitemdetails .description{
  font-size: 18px;
}
#walkthrough{
  background: url(Images/walkthrough-image.png);
}
.walkthrough-Title{
  /* font-size: 80px; */
   font-size: clamp(2.5rem, .5rem + 2vw, 1rem);
  text-align: center;
  color: #fff;
  line-height: 80px;;
}


.button {
  display: inline-block;
  position: relative;
}
.button.is-play {
  background-color: #fff;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.button.is-play .button-outer-circle {
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
}
.button.is-play .button-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}
.button.is-play .button-icon .triangle {
  -webkit-animation: fadeIn 7s ease;
          animation: fadeIn 7s ease;
}
.button.is-play .button-icon .path {
  stroke-dasharray: 90;
  stroke-dashoffset: 0;
  -webkit-animation: triangleStroke 3s;
          animation: triangleStroke 3s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.has-scale-animation {
  -webkit-animation: smallScale 3s infinite;
          animation: smallScale 3s infinite;
}
.has-delay-short {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes triangleStroke {
  from {
    stroke-dashoffset: 90;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes triangleStroke {
  from {
    stroke-dashoffset: 90;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes smallScale {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}
@keyframes smallScale {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

#workspaces{
 background: url(Images/Color-BG.png); 
 background-size: cover;
}
.Workspace-Title{
  color: #fff;
  font-size: clamp(2rem, 1.6rem + 2vw, 3.44rem);
}
#workspaces p{
    color: #fff;
  font-size: 20px;;
}
.workspace-title{
  font-size: 20px;
  text-transform: uppercase;
}
.SectionTitle{
   font-size: clamp(2rem, 1.6rem + 2vw, 3.44rem);
}
.CallActionButton{
  width: fit-content;
  background: var(--primary-color);
  border-radius: 0px 15px 0px 15px;
 min-width: 185px;
  height: 55px;
  color: #fff;
  text-transform: uppercase;
}
.insidearrow{
  background: #fff;
  border-radius: 0px 15px 0px 15px;
  width: 44px;
  height: 44px;
}
.IndustryItems{
  border-radius: 10px;
  overflow: hidden;
  height: 363px;
  position: relative;
}
.IndustryItems::after{
 content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    left: 0px;
    top: 0px;
    display: block;
    position: absolute;
}
.IndustryItemsTitle{
  position: absolute;
  z-index: 9;
  bottom: 20px;
  left: 15px;
  color: #fff;
  text-transform: capitalize;
  font-size: 22px;
}
.WorkingTeamcontent{
  border-left: 1px dotted #000000;
}
.WorkingTeamcontenticon{
  width: 82px;
  display: block ruby;
}
.mobileappdownload{
  border-radius: 15px;
  min-height: 430px;
}
.mobileimage{
 position: absolute;
  bottom: 0px;
  right: 50px;

}
#footerlogosection{
  background: #0B1B3D;
  border-radius: 30px 30px 0 0;
  border: 1px solid #0B1B3D;
  color: #fff !important;
}
.contactText{
  color: #fff;
  font-size: 22px;
}
#footermenuarea{
  background: linear-gradient(90deg,rgba(122, 18, 157, 1) 0%, rgba(90, 10, 105, 1) 100%);
}
#footercopyright{
    background: linear-gradient(90deg,rgba(243, 214, 13) 0%, rgba(245, 215, 10) 100%);
      border-radius: 0px 0px 30px 30px;
}
.footermenu{
  color: #fff;
}

.tab-link{
  background: #000000;
  color: #fff;
  border-radius: 0px 15px 0px 15px;
  height: 65px;
  font-size: 21px;
  text-transform: uppercase;
}
.ActiveTab{
    background:var(--primary-color);
}
.Solutions2Colum{
  position: relative;

}
.SolutionTitle{
  position: absolute;
  width: 90%;
  background: #000000bd;
  bottom: 20px;
  padding: 10px;
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
    border-radius: 0px 5px 5px 0px;
}


@media screen and (max-width: 600px) {
.BannerTitle, .SectionTitle, .walkthrough-Title, .Workspace-Title{
      line-height: 35px;
}
.slide-count{
  bottom: -30px;
}
.arrows-container{
  bottom: -40px;
}
.mobileappdownload {
  border-radius: 15px;
  /* min-height: 700px; */
}
.footerlogo img{
margin: 0px auto;
}
.contactText {
  color: #ffff;
  font-size: 18px;
  /* margin-top: 30px; */
}
.mobileimage{
  position: relative;
}
}


.BannerTitle.style-1, 
.Workspace-Title,
.SectionTitle{
  overflow: hidden; /* Clips the letters as they slide up */
  display: block;
}

.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%); /* Hidden below the baseline */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;
}

/* Triggered by the scroll observer */
.BannerTitle.active .char,
.Workspace-Title.active .char,
.SectionTitle.active .char{
  opacity: 1;
  transform: translateY(0);
}
.solutionsslider .slick-track,
.Industry-solutionsSlider .slick-track {
  display: flex !important;
  gap: 20px;
}
 .arrows-container1,  .arrows-container2 {
   position: absolute;
    bottom: -15px;
    right: 0;
    display: flex;
    width: 90px;

}
.arrows-container1 .slick-prev, .arrows-container1 .slick-next,
.arrows-container2 .slick-prev, .arrows-container2 .slick-next{
  position: relative;
  top: 0px;
  margin: 0px;
  left: 0px;
  bottom: 0px;
}
.arrows-container1 .slick-next,
.arrows-container2 .slick-next{
  top: 20px;
}

.NavItem{
  font-size: 20px;
  color: #fff;
  text-transform: uppercase;
}
@media (max-width: 1024px) {
  .BannerTitle{
    font-size: 35px;
  }
   .SectionTitle {
    font-size: 30px;
  }
  .CallActionButton{
    min-width: 190px;
    font-size: 13px;
  }
  .mobileimage{
    width: 30vw;
  }
.tab-link {
    background: #000000;
    color: #fff;
    border-radius: 0px 15px 0px 15px;
    height: 65px;
    font-size: 18px;
    text-transform: uppercase;
}

}
@media (max-width: 768px) {
  .contactText{
      font-size: 13px;
  }
  .workspace-title{
    font-size: 15px;
  }
  .arrows-container1, .arrows-container2{
    bottom: -40px;
  }
}
.virtualwalkthroughTitle{
  font-size: 20px;
  text-transform: capitalize;
  text-align: center;
  font-weight: bold;
}
.virtualwalkthroughItems{
  border: 1px solid #C3C3C3;
  padding-bottom: 20px;
  text-align: center;
}
.virtualwalkthroughItems p{
  padding: 0px 10px;
}
.virtualwalkthroughItems .CallActionButton{
  margin: 0px auto;
}
.ResourcesItems.overlay{
    border-radius: 10px;
    overflow: hidden;
    height: 363px;
    position: relative;
}
.ResourcesItems.overlay::after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.438) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 5;
    left: 0px;
    top: 0px;
    display: block;
    position: absolute;
}
.ResourcesItems.overlay .ResourcesItemsTitle{
  position: absolute;
    z-index: 9;
    bottom: 50px;
    left: 15px;
    color: #fff;
    text-transform: capitalize;
    font-size: 22px;
}
.ResourcesItems.overlay .ResourcesItemsdiscription{
  position: absolute;
    z-index: 9;
    bottom: 20px;
    left: 15px;
    color: #fff;
    text-transform: capitalize;
    font-size: 15px;
}
.resorselink{
  color: #8E1BB5;
  background: url(Images/arrow2.png) no-repeat right center;
}