.homeHero {
    background-image: url(../images/best\ software\ company_2.webp);
    background-size: 85%;
    background-position: center;
    padding: 60px 0px;
    background-repeat: no-repeat;
}

.homeHero h1 {
    font-family: "Outfit-Semibold";
    width: 75% ;
}

.homeHero h1 span {
    font-family: "Outfit-Thin";
}

.homeHero p {
    width: 60%;
}

.homeBox {
    border-radius: 11.322px;
    border: 1px solid var(--Grey-15, #262626);
    background: rgba(36, 36, 36, 0.20);
    backdrop-filter: blur(5.660976409912109px);
    padding: 25px 40px;
    color: #98989A;
       font-family: "Inter-Regular";
}

.homeBox span {
    border-radius: 7.548px;
    background: var(--Grey-15, #262626);
    padding: 12px 15px;
  font-family: "Inter-Regular";
    font-weight: 400;
}

.homeBtns .serBtn,.homeBtns .contactBtn
 {
    padding: 16px 35px;
    font-size: 18px;
    border-radius: 12.837px;
    cursor: pointer;

}

.homeBtns .serBtn {
    border: 1px solid #333;
    background-color: #1A1A1A;
    /* box-shadow: 0px 0px 17.843px 0px rgba(0, 204, 101, 0.25); */
    backdrop-filter: blur(7.702117919921875px);
    transition: all 0.5s ease;
}

.contactBtn {
     transition: all 0.5s ease;
    border-radius: 12.837px;
    border: 1px solid #333;
    background: #00CC65;
    /* box-shadow: 0px 0px 17.843px 0px rgba(0, 204, 101, 0.25); */
    backdrop-filter: blur(7.702117919921875px);
}


  /* Hover effects */
.homeBtns .serBtn:hover {
    background-color: #00CC65; /* Green */
  }
  
  .homeBtns .serBtn:hover + .contactBtn {
    background-color: #1A1A1A; /* Black */
  }
  
  .homeBtns .contactBtn:hover {
    background-color: #00CC65; /* Green */
  }
  
  .homeBtns .contactBtn:hover ~ .serBtn {
    background-color: #1A1A1A; /* Black */
  }
  
/* bar */

.heroTag{
  width: max-content;
  border-radius: 100px;
  padding: 12px 25px;
  background-color:#1A1A1A;
  border: 1px solid #262626;
}

.homeBar {
    border-right: 1px solid var(--Grey-15, #262626);
    border-bottom: 1px solid var(--Grey-15, #262626);
    border-left: 1px solid var(--Grey-15, #262626);
    background: rgba(36, 36, 36, 0.20);
    position: relative;
}
.heroTag{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,-50%);

}

.marquee-wrapper {
  overflow: hidden;
  width: 100%;
}

.marquee {
  display: flex;
  animation: scroll 30s linear infinite;
  width: max-content;
}

.marquee-item {
  flex: 0 0 auto;
  padding: 0 0px; /* Adds spacing between items */
}

.marquee-item img {
  
  height: 60px;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.aboutBg {

    border: 1px solid var(--Grey-15, #262626);
    border-bottom: none;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/best\ software\ company_3.webp);
    background-position: center;
    background-size: cover;
    padding: 0px 70px ;
}



/* .abtVideo{
  width: 35%;
}

.aboutUs{
  width: 65%;
} */

.video {
    height: 300px;
    width: 100%;
}

.video video {
    display: block;
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 18px;
}

.videoCard {
  padding: 11px;
    border-radius: 18px;
    background: #363636;
}

.videoContent h5{
  font-size: 18px;
  width: 75%;
  margin-left: 12.5%;
}

.videoWrapper {
  position: relative;
}

/* Play Button Base Style */
.playButton {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Initial visible state (before video plays) */
.playButton.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Show play button when hovering over videoWrapper */
.videoWrapper:hover .playButton {
  opacity: 1;
  pointer-events: auto;
}

.testVideo {
  position: relative;
}

/* Play Button base styles */
.custom-play-button {
  position: absolute;
 
  opacity: 1;  /* Initially visible */
  pointer-events: auto; /* Allow interaction */
  transition: opacity 0.3s ease;
}

/* When the video is playing, hide the play button */
.custom-play-button.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Show the play button on hover only if the video is not playing */
.testVideo:hover .custom-play-button {
  opacity: 1;
  pointer-events: auto;
}

.bookBtn {
    padding: 15px 60px;
    font-size: 18px;
}

.bookBtn{
    border-radius: 100px;
    border: 1.284px solid #333;
    background-color: rgba(36, 36, 36, 0.2);
    font-size: 18px;
    padding: 15px 60px;
}

.booksBtn {
    border-radius: 100px;
    border: 1.284px solid #333;
    background-color: rgba(36, 36, 36, 0.2);
    font-size: 18px;
    padding: 10px 10px 10px 55px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: border 0.3s ease, transform 0.3s ease;
  }
  
  .booksBtn .phn {
    background-color: #00CC65;
    padding: 12px;
    border-radius: 50%;
    opacity: 0;
    
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  .booksBtn:hover {
    border: 1.284px solid #00CC65;
   
  }

  .booksBtn span{
    transform: translateX(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .booksBtn:hover span{
    transform: translateX(-5px);
  }
  
  .booksBtn:hover .phn {
    opacity: 1;
    transform: translateX(0);
  }
  

.whatSec {
    border-top: none;
    border: 1px solid rgba(38, 38, 38, .6);
    border-bottom: none;
}

.icon {
    padding: 15px;
    border-radius: 10px 10px 0px 0px;
    width: max-content;
   border: 1px solid rgba(38, 38, 38, .6);
    border-bottom: none;
    background: linear-gradient(229deg, rgba(158, 255, 0, 0.20) -68.25%, rgba(158, 255, 0, 0.00) 32.16%), linear-gradient(180deg, #242424 0%, rgba(36, 36, 36, 0.00) 100%);
}

.whatCard {
    border: 1px solid rgba(38, 38, 38, .6);
    border-left: none;
}

.learnBtn {
    width: 100%;
    border-radius: 8px;
    background: #262626;
    padding: 10px;
    border: none;
}

.whatCard p,
.whatCard2 p {
    min-height: 200px;
}

.end {
    border-right: none !important;
}

.whatCard,.whatCard2{
  transition: fill 5s ease;
}

.whatCard2:hover svg path,.whatCard:hover svg path {
    fill: #FFF;
}
.whatCard2 {
    border-bottom: 1px solid  rgba(38, 38, 38, .6);
    border-right: 1px solid  rgba(38, 38, 38, .6);

}

.arw{
 height: 50px;
    width: 50px;
       display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: none;
    background-color: #2B2B2B;
    position: absolute;
}

.arw:hover{
  background-color: grey;
}

.arw:hover i{
  opacity: 1;
}

.rightOne,
.leftOne {
   
    top: 50%;
    z-index: 100;
    transform: translateY(-50%);
}

.right,.left{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: none;
    background-color: #2B2B2B;
}

.arw i,
.arw i,.left i,.right i {
    color: #00CC65;
    opacity: 50%;
  font-size: 22px;
}

.caroRow {
    position: relative;
}

.rightOne {
    right: 12%;
}

.leftOne {
    left: 12%;
}

.serviceSec .allBtn {
    background-color: transparent;
    border-radius: 12px;
    border: 1px solid #00CC65;
    padding: 12px 80px;
    font-size: 18px;
}

.allBtn:hover ,.whatCard button:hover,.whatCard2 button:hover{
    background-color: #00CC65;
    box-shadow: 1px 1px 10px #00CC65;
   
}

/* Add this for smooth transition */
.allBtn,
.whatCard button,
.whatCard2 button {
    transition: background-color 0.3s ease-in, box-shadow 0.3s ease-in;
}
.softHead,.testHead,.newsHead{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}
.softHead p{
    width: 75%;
}
.softCard{
    display: flex;
    align-items: center;
    gap: 10px;
}

.softCard img{
  width:50px;

}

.softCard .icon{
    padding: 15px 20px;
}
.testHead{
    width: 30%;
}
/* testimonial */

/* .carousel-item { */
  /* height: 430px; */
  /* display: flex;
  justify-content: center;
  align-items: center;
} */
.testContent{
padding-left: 60px;

}
.testimonial .carousel-item,.caro_item{
    background-color: #242424;

}
.testVideo ,.testimonial .carousel-item,.caro_item {
    border-radius: 40px;

}
  
  .testVideo{
    height: 430px;
  }
/* .carousel-item .row {
    display: flex;
  } */




 /* .single .carousel-item{
  height: auto !important;
 }
   */
  /* .testVideo, */
  .testVideo video {
    height: 100%;
    border-radius: 40px;
    object-fit: cover /* Makes sure the video fills the box neatly */
  }

  
  
  .testContainer{
    width: 60%;
  }

  .testContent h4{
    font-size: 22px;
  }

  .direc,.direc span{
    color: rgba(255, 255, 255, 0.80);
  }

  .direc{
    font-family: "Outfit-ExtraLight";

  }

  .carousel-control-prev,.carousel-control-next{
    top: 50%;
    transform: translateY(-50%);
     opacity: 1 !important;
  }

  .carousel-control-next{
    right: -10%;
  }

   .carousel-control-prev{
    left: -10%;
  }
  .owlCard{
    border: 1px solid #00CC65;
    border-radius: 15px;
    /* background-color: #242424; */
    overflow: hidden;
  }

  .owlCard h5{
font-size: 18px;
  }

  
  #carouselTwo .owl-item img{
    width: 150px ;
    /* margin: 1px; */
  }



  .owlCard p{
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: #ABABB2;
    font-family: "Outfit-Light";
  }
 .news .owl-carousel,
.news .owl-stage-outer {
padding-bottom: 30px;
}
/* carousel */

.carousel-wrapper {
    position: relative;
    padding: 20px;
  }
  
 .caroRow .owl-carousel .carousel-card {
    /* background:transparent !important; */
    border-radius: 20px;
   overflow: visible !important;
   display: block;
    /* overflow: hidden; */
    transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); */
    width: auto;
    height: auto; 
    /* opacity: 0.4; */
    transform: scale(0.9);
    margin: 0 auto; /* Center the cards */
  }

  .carousel-wrapper,
.owl-stage-outer {
  overflow: visible;
}
  
  .caroRow .owl-carousel .owl-item.center .carousel-card {
    transform: scale(1.05);
    z-index: 3;
    opacity: 1;
    border-radius: 25px;
    
    /* box-shadow: 0 15px 40px rgba(0, 255, 153, 0.4); */
  }
  
  .caroRow .owl-carousel .owl-stage-outer {
padding: 20px 0px;
}
  
  .caroRow .owl-carousel .carousel-card img {
    display: block !;
    width: 100%;
    height: 100%; /* stretch to fill the card */
    /* object-fit: contain;  */
    border-radius: 25px;
  }
  
  /* video button */

  
  .playButton {
    position: absolute;
   
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    z-index: 10;
  }

  #customPlayButton,.custom-play-button{
    top: 50%;
    left: 50%;
  }

  
  .playButton:hover {
    /* background: rgba(255, 255, 255, 1); */
  }
  
  .playButton i {
    font-size: 24px;
    color: #000;
  }
  
  .playing .playButton {
    opacity: 0;
    pointer-events: none;
  }
  
  .playing:hover .playButton {
    opacity: 1;
    pointer-events: auto;
  }

  /* faq */

  .faqHead{
    border-bottom: 1px solid #2E2E2E;
    border-top: 1px solid #2E2E2E;
    height: 250px;
    background-image: url(../images/best_software_company_faq.webp);
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
  }
  .faqHead p{
    width: 75%;
    margin-left: 12.5%;
  }

  .faq-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px;
   
    margin: auto;
    position: relative;
  }
  
  .faq-container::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background-color: #2a2a2a;
    transform: translateX(-50%);
  }
  
  .faq-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* gap: 24px; */
    min-width: 300px;
  }
  
  .faq-item {
    border-top: 1px solid  rgba(38, 38, 38, .6);;
    padding-top: 25px;
    padding-bottom: 25px;
  }
  
  .faq-item:last-child {
    border-bottom: 1px solid  rgba(38, 38, 38, .6);
  }
  
  .faq-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    cursor: pointer;
    gap: 16px;
  }
  
  .faq-number {
    /* background: linear-gradient(180deg, #1d1d1d, #000); */
    
    padding: 16px;
    font-weight: bold;
    border-radius: 12px;
    font-size: 18px;
    /* width: 60px; */
    text-align: center;
    flex-shrink: 0;
  }
  
  .faq-item.active .faq-number {
    color: #00ff85;
  }
  
  .faq-question-container {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .faq-question {
    font-size: 18px;
    transition: color 0.3s ease;

    
    
  }
  
  .faq-item.active .faq-question {
    color: #00ff85;
  }
  
  .faq-toggle {
    font-size: 24px;
    color: #00ff85;
    margin-top: 4px;
  }
  
  .faq-answer {
   margin-left: 70px;
    font-size: 16px;
    color: #bbb;
    /* display: none; */
    line-height: 1.6;
  }
  
  /* .faq-item.active .faq-answer {
    display: block;
  } */
  
  .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
  margin-top: 0;
}

.faq-item.active .faq-answer {

  opacity: 1;
  margin-top: 8px;
}


  /* PROJECT */

  .line{
    background-color: #2D2D2D;
    height: 1px;
    width: 100px;
  }
   
  .flow h6{
    color: #FFF;
    font-size: 17px;
      font-family: 'Outfit-ExtraLight';
  }
  
  .flow h6 span{
color: #8F8F8F;
font-size: 17px;
  }

  .first{
    text-indent: 100px;
  }

  .projectSec{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .headBtn2 {
  align-self: flex-start;
  }
  .projectSec .content{
    width: 70%;
    text-align: center;
  }
  /* tab */
  .tabBox{
    border-radius: 23.03px;
background: #222;
padding: 18px 15px;
width: max-content;
display: flex;
 flex-wrap: nowrap; 
gap: 20px;
  }

  .tabBox .tab{
    border: none;
    background-color: transparent;
    padding: 10px 12px;
  }


 .tabBox .tab {
  position: relative;
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  color: white;
  transition: color 0.3s ease;
}

.tabBox .tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #00CC65;
  transition: width 0.4s ease;
}

.tabBox .tab:hover::after,
.tabBox .tab.active::after {
  width: 100%;
}

/* If you want to add active tab style other than underline */
/* .tabBox .tab.active {
  font-weight: bold;
} */



/* === alternate way === */
/* 
.tabBox .tab {
  position: relative;
  background: none;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  color: #000;
  transition: color 0.3s ease;
}

.tabBox .tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0;
  background-color: #00CC65;
  transition: width 0.3s ease;
  pointer-events: none;
}


.tabBox:hover .tab.active::after {
  width: 0;
}

.tabBox .tab:hover::after {
  width: 100%; 
}


.tabBox:not(:hover) .tab.active::after {
  width: 100%;
} */

  
  .tab-contents.active {
  display: block;
}

.tab-contents {
  display: none;
}


.proCard{
  border-radius: 28.715px;



}
.proCard1{
  background: #301E5E;
  border: 3px solid #9C72E9;
}
.proCard2{
  background: #6B0004;
  border: 3px solid #EB1F25;
}
.proCard3{
  background: #7D5F0D;
  border: 3px solid #EBC664;
}
.proCard4{
  background: #2B0C1F;
  border: 3px solid #9F2D74;
}
.proCard5{
  background: #520D11;
  border: 3px solid #C42129;
}
.proCard6{
  background: #2A690F;
  border: 3px solid #8ECC75;
}
.proCard7{
  background: #5E2503;
  border: 3px solid #C69964;
}
.proCard8{
  background: #650C40;
  border: 3px solid #9D5E8D;
}
.proCard9{
  background: #BB6100;
  border: 3px solid #FFC17E;
}
.proCard10{
  background: #075D67;
  border: 3px solid #ADD8DD;
}
.proCard11{
  background: #2A6207;
  border: 3px solid #D6FEBF;
}

.proCard h4{
  color: #FFF;
}

.proCard p{
  color: rgba(255, 255, 255, 0.60);
  font-size: 14px;
}

.tags{
  border-radius: 5px;
background: rgba(245, 245, 245, 0.80);
color: #000;
width: max-content;
padding: 4px 6px;
font-size: 11px;
}

.proContent button{
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
  width: max-content;
}

.proContent button img{
  width: 15% !important;
}

.faqSec,.webHead{
  width: 30%;
  text-align: center;
}

/* faq */

.faqBox p{
 margin-left: 95px;
 margin-right: 90px;
 margin-bottom: 0;
}

.faqBox{
  background-color: #232323;
cursor: pointer;
  display: flex;
justify-content: center;
flex-direction: column;
text-align: start;
padding:20px 40px;
border-radius: 30px;
}

.ques{
  gap: 40px;
}

.question h5{
  font-size: 18px;
}

.faqBox .answer {
 max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  margin-bottom: 0;
}

.faqBox.active .answer {
   max-height: 500px; /* A value large enough to fit your tallest content */
  padding-top: 1rem;
  padding-bottom: 1rem;
  opacity: 1
}

.faqBox .question {
  cursor: pointer;
  /* padding: 10px 0; */
  transition: all 0.3s ease;
}

.faqBox.active .question .text {
  color: #00cc65; /* Green text */
}

.faqBox .icons {
  transition: transform 0.3s ease;
}

.faqBox.active .icons {
  transform: rotate(45deg);
  color: #00cc65;
}

.faqBox.active .question h5{
  color: #00CC65;
}

/* PROJECT DETAIL */

.proDetailSec .appImg{
  width: 80%;
}

/* .proDetailSec h1{
  width: 78%;
} */

/* .detailHead{
  width: 80%;
} */

.mediaBox{
  padding: 10px;
  border-radius: 10px;
  /* width: 100% !important; */
}

.mediaBox img{
 height: 38px;
  /* background:transparent; */
    /* box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3); */
}

.mediaBox h5{
  font-size: 18px;
  padding-top: 15px;
}

.mediaBox h6{
  font-size: 10px;
}

.open{
background-color:rgba(255,255,255,.4);
  width: max-content;
  border-radius: 20px;
  font-size: 12px;
  padding: 2px 8px;
}

.mediaBox {
  height: 110px;
   padding: 10px;
  border-radius: 10px;
  width: 120px ;
 display: flex;
 justify-content: space-between;
 flex-direction: column;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mediaBox img {
  /* font-size: 28px;
  color: white;
  margin-top: 20px; */
  transition: transform 0.6s ease;
}

.mediaBox .linked {
  color: white;

  transition: opacity 0.3s ease;
}

.mediaBox .open {

  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  display: none;
  transition: opacity 0.3s ease;
}

.mediaBox:hover .linked {
  display: none;
}

.mediaBox:hover .open {
  display: block;
}

.mediaBox:hover img {
  transform: translate(30px, 25px) scale(1.2);
}

.media1{
 background: linear-gradient(146deg, #3C75C6 4.59%, #144589 78.97%);
}

.media2{
 background: linear-gradient(200deg, #962fbf, #d62976,#feda75 );
}

.media3{
  background: linear-gradient(180deg, #302F34 0%, #1A191C 95.33%);

}
.media4{
  background: linear-gradient(146deg, #FF0000 4.59%, #B80000 78.97%);

}
.mediafb{
 background: linear-gradient(146deg, #1877F2 4.59%, #0E52B2 78.97%);
}
.mediawa{
 background: linear-gradient(146deg, #25D366 4.59%, #128C7E 78.97%);
}
.projectDiv{
  width: 85%;
}

.proBar{
  border-radius: 16px 0px 0px 16px;
background: #353535;
width: 100%;
}

.proBar img{
  width: 80px;
}
.proBar p{
  color: #BABABA;
  font-size: 15px;
  font-weight: 400;
}
.getBtn{
  background-color: #000;
  border-radius: 50px;
  border: none;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}
.getBtn img{
  width: 23px;
}



.goal{
  background: #353535;
  border-radius:10px
}

.goal h3{
  font-size: 38px;
  line-height: 48px;
  font-family: "Outfit-SemiBold";
}

.goal h5{
  font-size: 15px;
  letter-spacing: 1px;
}

.goal h6{
  font-size: 12px;
  letter-spacing: 1px;
color: #7C7C7C;
}

.scroll{
  position: relative;
  max-height: 145px;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scroll::-webkit-scrollbar {
  display: none;
}

.scroll::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(180deg, rgba(53, 53, 53, 0.00) 0%, #353535 100%);
  pointer-events: none;
  transition: opacity 0.1s ease;
  opacity: 1;
}

.scroll.hide-fade::after {
  opacity: 0;
}

.approach{
  background-color: #FFF;
  border-radius: 10px;
  width: 35%;
}

.goal{
  width: 62%;
}

.approach img{
  width: 100px;
}

.appContent{
  border-radius: 12px;
background: #F7F7F8;
padding:10px;
position:relative;
}

.pointOne{
  background-color: #FFF;
  border-radius: 12px;
}


.pointOne h6,.pointOne i,.pointOne p{
  color: #000;
}
.pointOne button{
  border: 1px solid #E9EAEC;

}

.pointOne p{
  font-size:  14px;
  line-height: 22px;
  margin: 0;
  width: 85%;
}

.pointOne h6{
  font-size: 15px;
}

.appContent {
  max-height: 310px;
  overflow-y:scroll ;
  position: relative;
}

.appContent::-webkit-scrollbar {
  display: none;
}

.pointOne button{
  background-color: transparent;
height: 30px;
width: 30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #E9EAEC;
}

.pointOne i{
  transform: rotate(30deg);
}

.appContent::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
background: linear-gradient(180deg, rgba(247, 247, 248, 0.00) 0%, #F7F7F8 100%);
  pointer-events: none;
  transition: opacity 0.1s ease;
  opacity: 1;
}

.appContent.hide-fade::after {
  opacity: 0;
}

.webContent{
  padding-top: 120px;
  padding-bottom: 120px;
  background-image: url(../images/best_software_development_e.webp);
  background-position: center;
  background-size: 80%;
  background-repeat: no-repeat;
}

.triangle{
  width: 100px;
}

.web{
  padding: 30px;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.arr{
  background-color: #2B2B2B;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .5;

}
.arr i{
  color: #00CC65;
  font-size: 20px;
}
.arr:hover{
  opacity: 1;
}

.arr{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.leftBtn{
  left: -5%;
}

.rightBtn{
  right: -5%;
}

.startSec {
  width: 60%;
}





/* PROJECT WEB */

.proDetailSec ,.webContent{
  position: relative;
}

.webImg{
  position: absolute;
  top: 10%;
  right: 0;
  width: 75% ;
  z-index: -2;
}

.path1,.path2{
  position: absolute;
  width: 27%;
}

.path2{
    top: 30%;
  left: 19.5%;
}


.path1{
  top: 35%;
  right: 20%;
}


/* SERVICE */
.serHero{
  /* margin-top: 100px; */
  background-image: url(../images/bg1.webp);
  height: 450px;
  background-position: center;
  background-size:100%;
  background-repeat: no-repeat;
  position: relative;
}
.man{
  height:89%;
  position: absolute;
  top: -15%;
}

.home{
  padding-bottom: 80px;
}

.serContent{
  padding: 0px 35px 0px 50px;

}


.serCaro{
  width: 75%;
 
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
height: 100px;
  text-align: center; /* Optional: Helps if there's any text */
}

.item img {
  max-width: 100%;
  height:auto;
  display: block;
  opacity: 40%;
}


.serButton{
  width: 20%;
}

.service{
  padding-top: 70px;
}

.doCard .icon{
  width: max-content;
}
.doCard .doImg{
  width: 35px;
}
.doCard{
  overflow: hidden;
  background: #222;
  border-radius: 50px;
  transition: all 0.4s ease;
}

/* .doCard .icon {
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.doCard:hover .icon {
  transform: translateY(-100%);
  opacity: 0;
} */



 .doCard {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  height: 300px;
}

/* Top image */
.icon {
  position: relative;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.doImg {
  /* max-width: 100px; */
  display: block;
  margin: 0 auto;
}

/* Hidden bottom image */
.doHidden {
  /* padding-top: 60px; */
height: 40px;
  position: relative;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
  /* display: block;
  margin: 0 auto; */
}

/* Content */
.doContent {
  transform: translateY(15%);
  /* opacity: 0; */
  transition: transform 0.6s ease, opacity 0.6s ease;
}

/* SERVICE DETAIL */
.serDetail{
  width: 70%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}




/* Hover effect */
.doCard:hover .icon {
  transform: translateY(-100%);
  opacity: 0;
}

.doCard:hover .doContent {
  transform: translateY(-30%);
}

.doCard:hover .doHidden {
  transform: translateY(-100%);
  opacity: 1;
}

.doCard:hover{
  border: 1px solid #00CC65;
}

.doCard p{
  margin-bottom: 0;
}

.serLine .line{
  width: 300px;
  height: .3px;
  background-color:#423f3f;

}


.detailImg,.serviceBar{
  width: 80%;
}

/* .greyBg{
  border-radius: 30px;
  border: 13.278px solid #222;
} */

.lineA,.lineB,.lineC,.lineD,.lineE,.lineF,.line1,.line2{
  position: absolute;
  z-index: -1;
  height: .3px;
  background-color:#423f3f;
}

.lineA,.lineB,.lineD,.lineE,.line1,.line2{
width: 200px;

}

.lineC,.lineF{
  width: 100px;
}

.lineA,.lineB,.lineC,.line1{
  left: 0;
}

.lineD,.lineE,.lineF,.line2{
  right: 0;
}

.line1,.line2{
  top: 100px;
}

.lineA,.lineD{
  /* background-color: #00cc65; */
  top:200px;
}

.lineB,.lineE{
  top: 300px;
}

.lineC,.lineF{
  top:400px;
}

.counting{
  display: flex;
  justify-content: center;
  align-items: center;
 
}
.serviceBar{
border-radius: 21px;
background: #222;
}

.serviceBar h3{
  font-size: 40px;
  font-family: "Outfit-SemiBold";
}

.serviceBar h6{
  color: #8A8A8A;
  font-family: "Outfit-Medium"
}

.serWhat h2{
  width: 60%;
  margin-left: 20%;
}

.userCard{
  border-radius: 48px;
background: #222;
padding: 30px;
transition: transform 0.4s ease, box-shadow 0.4s ease;

}

.userCard h5{
  font-family: "Outfit-SemiBold";
}

.userCard p,.userCard h5{
  text-align: center;
}

.userCard h5{
  font-size: 22px;
}

.userCard p,.useBtm{
  color: #737373;
}

.userCard p{
  min-height: 150px;
}

.useBtm{
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom: 0.935px solid #383737;
  font-family: "Outfit-Light";
  font-size: 18px;
}


.userCarousel .owl-stage{
  padding-top: 50px;
}

.owl-item.center .userCard {
  transform: scale(1.05) translateY(-30px);
  /* box-shadow: 0 8px 30px rgba(0, 204, 101, 0.3); */
}

.boxContainer{
  width: 80%;
}

/*  */

.feature{
  background-color: #222;
  padding: 60px 70px;
  border-radius: 25px;
}

.proNameCard{
  cursor: pointer;
  border-radius: 22px;
background: #191919;
padding: 30px 40px;
    transition: background-color 0.3s ease-in, box-shadow 0.3s ease-in;
}

.proNameCard h3{
  font-size:32px;
  text-align: center;
  font-family: "Outfit-Medium";
}

.proNameCard img{
  margin-top: 30px;
  width: 100%;
}

.proNameCard:hover{
  box-shadow: 1px 1px 10px #32b372;
}


.careerHero{
  width: max-content;
  text-align: end;
}
.career{
  width: 80%;
}

.design,.design2{
     
      border-top: 1px solid #2E2E2E;
     
}

.design{
  border-bottom: 1px solid #2E2E2E;
}

.rightBorder{
  border-right: 1px solid #2E2E2E;
}

.design h6{
 font-family: 'Outfit-ExtraLight';
  font-size: 15px;
  line-height: 26px;
}

.design h5{
  font-family: 'Outfit-Medium';
}

.design button{
  border-radius: 8px;
border: 1px solid  #262626;
background:  #1A1A1A; 
padding: 10px 20px;
color: #98989A;
font-family: "Outfit-Light";
}

.design button i{
  margin-left: 5px;
  color: #00CC65;
  transform: rotate(40deg);
}

.green{
  width: 15%;
}

.design h3,.design2 h3{
  font-size: 50px;
    line-height: 60px;
}

.careerForm .careerInp input,.careerForm textarea,.dropdown .selected{
    border-radius: 8px;
border: 1px solid  #262626;
background:  #1A1A1A;
width: 100%;
padding: 10px;
}

.careerForm .careerInp label{
  padding-bottom: 10px;
}

.careerInp input::placeholder,.careerInp textarea::placeholder{
  font-size: 14px;
  opacity: .6;
}

.careerInp{
  margin-bottom: 40px;
}
.careerForm textarea{
  resize: none;
  height: 130px;
}
.dropdown {
  height: 100%;
  width: 100%;
  position: relative;
  user-select: none;
  
}

.selected {
 background: #222;
  padding: 12px 15px;
  
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selected-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
 background: #222;

  border-top: none;
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.3s ease;
  z-index: 10;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.options::-webkit-scrollbar {
  display: none;
}

.dropdown.active .options {
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.option {
  padding: 10px 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

.option:hover {
 background: #171616;
}

.option img,.selected-content img {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 3px;
}

.careerForm button{
  background-color: #00CC65;
  color: #000;
  border: none;
  padding: 10px 40px;
  font-family: "Outfit-Medium";
  letter-spacing: .6px;
}

.design2 .content,.bloglast_sec .content{
  color: #7E7E81;

}




    .accordion-item {
  background-color: #222;
      border-radius: 8px;
      padding: 10px;
      border: none;
      margin-bottom: 20px;
      border: 1px solid #2c2727;
    }

    .accordion-button {
     
      color: #ffffff;
      box-shadow: none;
      border-radius: 8px;
      position: relative;
       background-color: #222;
  padding: 10px;
  border-radius: 10px;
    }

  
    .accordion-button::after {
      display: none;
    }

    
    .accordion-button::before {
      content: '+';
      color: #00c853;
      font-size: 20px;
      font-weight: bold;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }

    .accordion-button[aria-expanded="true"]::before {
      content: '–';
      color: #FFF;
     
    }

    .accordion-body {
     margin-right: 60px;
  color: #7E7E81;
      border-top: 1px solid #2e2e2e;
      margin-top: 10px;
      padding-top: 15px;
    }
    
.accordion-button:not(.collapsed) {
    background-color: inherit !important;
    box-shadow: none !important;
    color: #FFF !important;
   
}

.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

.design,.design2,.careers{
   background:  #141414;
}


/* .bloglast_sec{
 background:  #141414;
} */

.part{
  border-radius: 4px;
background:  #333;
padding: 10px 12px;
width: max-content;
}
.last_sec{
  border-radius: 12px;
border: 1px solid  #262626;
  background-color: #1A1A1A;
padding: 25px 20px;
}

.last_container{
  padding:25px ;
  border-radius: 12px;
border: 1px solid  #262626;
background:  #141414;
}



.arrow{
  flex-shrink: 0;
  background: #00CC65;
  display: flex;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  margin-left: 5px;
align-items:center;
justify-content: center;
gap: 9.646px;

}
.arrow i{
  color: #000;
  transform: rotate(50deg);
  font-size: 20px;
}
  
.question .icon{
  padding: 20px !important;
}

.question{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tech{
  width: 50px;

}
  .proImg {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.proImg::before {
   position: absolute;
    top: 0;
    left: -100%;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.proCard:hover .proImg::before {
    -webkit-animation: hoverShine 1.2s;
    animation: hoverShine 1.2s;
}


@keyframes hoverShine {
  0% {
    left: -75%;
  }
  100% {
    left: 125%;
  }
}

.proImg img {
  display: block;
  width: 100%;
  height: auto;
}
/* Make sure all cards have the same height */
.proCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.proCard .proContent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1; /* Ensures the content takes up the remaining space */
}

/* Ensure all cards maintain the same height in all screen sizes */
/* .col-lg-4, .col-md-6, .col-12 {
  display: flex;
  flex-direction: column;
} */

.col-lg-4 .proCard, .col-md-6 .proCard, .col-12 .proCard {
  height: 100%;
}


.owl-carousel .proCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 380px; /* Optional: set a min-height for uniformity */
}