/*pop up*/

  .popup-button {
    position: fixed;
    top: 50%; 
    right: -2%; 
    padding: 10px 20px;
    transform: rotate(270deg);
    background-color: #FF5A00; 
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 1000; 
  }
  
    .no-scroll {
        overflow: hidden;
    }

.popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            overflow: auto;
            z-index:9999;
        }

        .popup-content {
            position: relative;
            margin: auto;
            /* padding: 20px; */
            width: 100%;
            height:100%;
            /* max-width: 600px; */
            background: white;
            /* border-radius: 8px; */
            text-align: center;
            align-content: center;
        }

        .close-btns {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btns img{
          width:30px;
        }

        .close-btns:hover,
        .close-btns:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .pop-up {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    width:80%;
    margin:auto;
    /* gap: 10px; */
  }

  .popup-box {
    border: 1px solid #ccc;
    /*padding: 20px;*/
    align-content:center;
    text-align: center;
  }

  .popup-box img {
    max-width: 100%;
    height: auto;
  }
  
    .popup-box-right{
       background-color:#021E53;
  }
  
    .popup-box-left{
       background-color:#ffffff;
  }

  /* Styles for Mobile */
  @media (max-width: 768px) {
    .pop-up {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
    }
    
  }
  
  /*end popup*/






 @media (max-width: 767px) {
     .mobile-hide{
         display:none;
     }
 }



.rc-left{
    padding-left:10px;
}
.brand__item {
  margin-bottom: 45px;
  text-align: center;
  }
  /*contact us*/
  .features__content-left p {
  margin-bottom: 35px;
  line-height: 30px;
  color: white;
  }
  .rc-text {
  align-content: center;
  font-size: 16px;
  }
  .rc-text h6 {
  color: white;
  }
  .text-orange {
  color: #FF5A00;
  }
  .text-orange:hover {
  color: #ffffff;
  }
  
    .text-orange-blue {
  color: #FF5A00;
  }
  .text-orange-blue:hover {
  color: #000e29;
  }
  
  
  /*end contact Us*/
  
  
  
  /*client*/
  .logo {
  width: 100%;
  height: auto;
  transition: filter 0.3s ease;
  }
  .grayscale {
  filter: grayscale(100%);
  }
  .logo-container:hover .logo {
  filter: grayscale(0%);
  }
  .logo-container{
  padding-top: 30px;
  }
  /* Additional styles for mobile responsiveness */
  @media (max-width: 767px) {
  .logo-container {
  padding-top: 0;
  padding-bottom: 10px;
  flex: 0 0 50%; /* Two logos per row */
  max-width: 50%;
  white-space: nowrap; /* Prevent wrapping to new lines */
  display: inline-flex; /* Ensure horizontal arrangement */
  }
  .logo-container img {
  margin-right: 10px; /* Add space between logos */
  }
  }
  /* Additional styles for mobile responsiveness */
  @media (max-width: 767px) {
  .client-row {
  display: flex;
  overflow-x: auto; /* Horizontal scroll */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  flex-wrap: nowrap; /* Prevent wrapping to new lines */
  }
  .logo-container {
  flex: 0 0 33.333%; /* Three logos per row */
  max-width: 33.333%;
  }
  }
  /*end of client*/
  /*team*/
  .image-border {
  border: 5px solid #fff; /* Basic border */
  /* Or, you can use border-image for an image border */
  /* border-image: url('border-image.png') 30 round; */
  }
  /*end team*/
  
  
  /*banner*/
  .black-layer {
  position: relative; /* Ensure positioning context for the pseudo-element */
  }
  .black-layer::after {
  content: ""; /* Required for the pseudo-element */
  position: absolute; /* Position the layer relative to the targeted div */
  top: 0; /* Position from the top */
  left: 0; /* Position from the left */
  width: 100%; /* Cover the entire width of the targeted div */
  height: 100%; /* Cover the entire height of the targeted div */
  background-color: rgba(0, 14, 41, 0.8); /* Black color with 50% opacity */
  z-index: 1; /* Ensure the layer is above other content within the div */
  }
  .black-layer > * {
  position: relative;
  z-index: 2;
  }
  .banner-home{
  padding-top:120px;
  }
  .slider__height {
  min-height: 0px; 
  }
  .changingText{
  color:#FF5A00
  }
  /*end banner*/
  .white-box {
  background-color: white;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 20px;
  align-content:center;
  }
  .orange-text {
  color: #FF5A00;
  Padding-right:10px;
  }
  .kpi-text{
  align-content:center;
  }
  
  
  /*our process*/
  .box-work {
  border: 1px groove;
  border-radius: 15px;
  padding: 20px 20px 20px 40px;
  margin-bottom: 20px;
  position: relative;
  }
  .circle-work {
  position: absolute;
  top: 50%;
  left: -25px;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  /*border: 1px solid #000;*/
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  .circle-work-1 {
  background-color:#4285f4;
  }
  .circle-work-2 {
  background-color:#0445bf;
  }
  .circle-work-3 {
  background-color:#03338f;
  }
  .circle-work-4 {
  background-color:#021E53;
  }
  /*our process*/
  
  
  /*technology we use*/
  .nav-item {
  margin: 0 10px; /* Add space between tabs */
  }
  .nav-tabs .nav-item {
  border: none; /* Remove borders from the tabs */
  }
  .nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid transparent; /* Add a transparent border initially */
  color: #333; /* Set tab text color */
  }
  .nav-tabs .nav-link.active {
  border-bottom: 3px solid #FF5A00;
  }
  .tab-content {
  margin-top: 20px;
  }
  .box-tech-tab {
  /* border: 1px solid #ccc; */
  padding: 40px 20px 40px 20px;
  margin-bottom: 20px;
  text-align: center;
  background-color: #ECF1F3;
  border-radius: 3%;
  }
  .box-tech-tab p {
  margin-bottom:0px;
  font-size:16px;
  }
  .box-tech-tab img {
  transition: transform 0.3s ease;
  height: 50px;
  padding-bottom: 10px;
  }
  .box-tech-tab:hover img {
  transform: scale(1.2);
  }
  .tech-nav-home{
  border-bottom:none;
  }
  .nav-tabs {
  /*overflow-x: auto;*/
  -webkit-overflow-scrolling: touch; 
  scroll-snap-type: x mandatory; 
  display: flex;
  flex-wrap: nowrap;
  }
  
  .nav-tabs-center {
      justify-content: center;
  }
  /*why choose*/
  .text-pf-1{
  border-left: 3px solid #FF5A00;
  padding-left:20px;
  }
  .text-pf-2{
  border-left: 3px solid #FF5A00;
  padding-left:20px;
  }
  .text-pf-3{
  border-left: 3px solid #FF5A00;
  padding-left:20px;
  }
  .text-pf-4{
  border-left: 3px solid #FF5A00;
  padding-left:20px;
  }

/*portfolio*/
  
  
    .port-tab-port-container {
display: flex;
flex-direction: row;
gap: 10px;
}
.port-tab {
flex: 1;
cursor: pointer;
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.port-main-content {
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 10px;
}
.port-container {
position: relative;
overflow: hidden;
width: 100%;
/* max-width: 600px;  */
margin: 0 auto;
}
.port-slides {
display: flex;
transition: transform 0.5s ease;
}
.port-slide {
flex: 0 0 100%;
display: flex;
align-items: center;
justify-content: space-between;
height:400px;
}
.port-slide img {
width: 50%;
/*height: auto;*/
}
.port-text-slide {
width: 50%;
padding: 0 20px; /* Adjust padding as needed */
}
.port-controls {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.arrow {
cursor: pointer;
padding: 5px;
background-color: rgba(255, 255, 255, 0.7);
/*border-radius: 50%;*/
border: 1px solid #ccc;
}



.icon-port-container {
text-align: center;
}

.icon-port-container .icon {
font-size: 24px; /* Adjust the size as needed */
}

.icon-port-container .port-tab-text {
font-size: 14px; /* Adjust the size as needed */
}
  
  
  /*end portfolio*/
  
  
  /*Resource*/
  
   .resource-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: auto;
/*width: 80%;*/
}

.resource-box {
position: relative;
width: 18%;
/* height: 120px; */
background-color: #ffffff;
border-radius: 10px;
margin: 10px;
text-align: left;
padding-bottom: 10px;
padding-top: 30px;
padding-left: 15px;
padding-right: 15px;
border: 2px solid #FF5A00;

}
.resource-box h4{
text-align:center;
}

.resource-circle {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #000e29;
/*border: 2px solid #000;*/
display: flex;
justify-content: center;
align-items: center;

}

/*.fa {*/
/*color: #fff;*/
/*}*/

@media (max-width: 768px) {
.resource-container {
flex-direction: column;
align-items: center;
}
.resource-box {
 width: 100%;
 margin-bottom: 40px;
 padding-top: 30px;
 padding-bottom: 30px;
}
}
  
  /*end Resource*/
  
 
 
 
          /*How we work*/
         
         .howwe-work{
                         display: flex;
            justify-content: center;
            /*align-items: center;*/
            margin: 0;
         }
         
                 .howwe-container {
            position: relative;
            /*width: 80%;*/
            /*max-width: 600px;*/
            /*aspect-ratio: 1 / 1; */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .howwe-circle {
            position: absolute;
            width: 300px;
            height: 300px;
            background: #FF5A00;
            opacity: 0.1;
            border-radius: 50%;
            z-index: -1;
        }

        .howwe-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            row-gap: 60px;
            column-gap: 80px;
            /*padding: 20px;*/
            box-sizing: border-box;
        }

        .howwe-box {
            /*background: white;*/
            padding-right:25px;
            padding-left:25px;
            padding-top:15px;
            padding-bottom:15px;
            
            border: 1px solid #000;
            border-radius:10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }

        .howwe-box .howwe-number-right {
            /*font-size: 24px;*/
            /*font-weight: bold;*/
            width: 50px;
            height: 50px;
            padding-right: 20px;
            padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            /*background: #000;*/
            color:#fff;
            border-radius: 50%;
            
            position: absolute;
            top: 50%;
            left: -25px;
            transform: translateY(-50%);
             border-radius: 50%;
        }
        
        
                .howwe-box .howwe-number-left {
            /*font-size: 24px;*/
            /*font-weight: bold;*/
            width: 50px;
            height: 50px;
            padding-right: 20px;
            padding-left: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            /*background: #000;*/
            color:#fff;
            border-radius: 50%;
            
            position: absolute;
            top: 50%;
            right: -25px;
            transform: translateY(-50%);
             border-radius: 50%;
        }
        
        @media (max-width:768px){
            .howwe-number{
                position: absolute;
            top: 50%;
            right: 25px;
            }
            
            .howwe-box .howwe-number-left {
            /*font-size: 24px;*/
            /*font-weight: bold;*/
            display: flex;
            align-items: center;
            justify-content: center;
            /*background: #000;*/
            color:#fff;
            border-radius: 50%;
            
            position: absolute;
            top: 50%;
            left: -25px;
            transform: translateY(-50%);
             border-radius: 50%;
        }
        }
        
        
        .howwe-content-right{
            text-align:right;
        }

        .howwe-box:nth-child(odd) .howwe-number {
            order: 2;
        }

        .howwe-box:nth-child(even) .howwe-number {
            order: -1;
        }

        .howwe-content {
            padding: 10px;
        }

        .howwe-content h2 {
            margin: 0;
            font-size: 18px;
        }

        .howwe-content p {
            margin: 5px 0 0;
        }
        @media (max-width: 768px) {
            .howwe-container {
                aspect-ratio: auto; /* Remove aspect ratio */
            }

            .howwe-circle {
                display: none; /* Hide the howwe-circle */
            }

            .howwe-grid {
                grid-template-columns: 1fr; /* Single column layout */
                gap: 10px; /* Reduce gap for mobile */
                padding: 10px; /* Reduce padding for mobile */
            }

            .howwe-box {
                flex-direction: row; /* Ensure flex direction is row */
                justify-content: flex-start; /* Align items at the start */
                padding: 10px; /* Reduce padding for mobile */
            }

            .howwe-box .howwe-number {
                order: 0; /* Numbering howwe-circles always on the left */
                margin-right: 10px; /* Space between number and content */
            }
                    .howwe-content-right{
            text-align:left;
            
            
                
            }
            .howwe-content h2{
                padding-left:20px;
            }
            .howwe-content p{
                padding-left:20px;
            }
        }
        
        
        
        /*end how we work*/
        
        
        
            /*Marketing Experts*/
    
      .markexp-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    /* gap: 10px; */
  }

  .markexp-box {
    /*border: 1px solid #ccc;*/
    /*padding: 20px;*/
    text-align: center;
    align-content: center;
  }
  
  .markexp-box div{
      padding: 20px;
      align-content:center;
  }

  .markexp-box img {
    max-width: 100%;
    height: auto;
  }

  /* Styles for Mobile */
  @media (max-width: 768px) {
    .markexp-container {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
    }
  }
  .devexp-box{
      border: 2px solid black;
  }
  
  /*end Marketing experts*/
  
  
  
  /*Talant*/


    .tal-container {
        display: flex;
        flex-wrap: wrap;
    }
    .tal-box {
        flex: 1 0 calc(33.33% - 20px);
        border: 2px solid transparent;
        padding: 20px;
        margin: 10px;
        box-sizing: border-box;
    }
    .tal-box i{
        font-size:14px;
    }
    
    .tal-box h4 {
      color: #021E53; 
      transition: color 0.3s ease; 
      cursor: pointer; 
    }

    .tal-box:hover h4{
      color: #FF5A00;
    }

    .tal-box:hover i {
      transform: translateX(3px);
    }
    
    .tal-box:hover {
     border: 2px solid #FF5A00;
      transition: transform 0.3s ease;
      /*background-image: url('assets/img/cta/cta.webp');*/
      /*background-size: cover;*/
      /*background-position: center;*/
      
    }

    /* Responsive design for mobile */
    @media only screen and (max-width: 600px) {
        .tal-box {
            flex-basis: calc(100% - 20px);
        }
    }
    
    
    /*end talant*/
    
    
    
            /*Expert Tools*/
         .tools-wrapper {
  max-width: 1400px;
  width: 100%;
  position: relative;
  /* background-image: url('4.png'); */
}


.tools-wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.tools-wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.tools-wrapper i:first-child{
  left: -22px;
}
.tools-wrapper i:last-child{
  right: -22px;
}
.tools-wrapper .tools-carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 4));
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  justify-items: center;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.tools-carousel::-webkit-scrollbar {
  display: none;
}
.tools-carousel.no-transition {
  scroll-behavior: auto;
}
.tools-carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.tools-carousel.dragging .tools-card {
  cursor: grab;
  user-select: none;
}
.tools-carousel :where(.tools-card,) {
  display: flex;
  justify-content: end;
  align-items: left;
  padding-left:20px;
}
.tools-carousel .tools-card {
  scroll-snap-align: start;
  /* height: 600px; */
  list-style: none;
  background:transparent;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  /* border-radius: 8px; */
}
.tools-carousel .tools-card .tools-img {
  background: #ccc;
  height: 148px;
  width: 148px;
  border-radius: 50%;
}
.tools-card .tools-img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
}
.tools-carousel .tools-card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}
.tools-carousel .tools-card span {
  color: #6A6D78;
  font-size: 1.31rem;
}
  .tools-wrapper:hover .background {
        filter: blur(8px); /* Initial blur */
    }

@media screen and (max-width: 900px) {
  .tools-wrapper .tools-carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}

@media screen and (max-width: 600px) {
  .tools-wrapper .tools-carousel {
    grid-auto-columns: 100%;
  }
}
         /*end Expert Tools*/
         
         
         
         
/*why choos*/

    .scroll-container {
        display: flex;
        overflow: hidden; /* Hide overflowing content */
    }
    .left-box, .right-box {
        /*height: 300px;*/
        width: 50%;
        /*border: 1px solid black;*/
        overflow-y: hidden; /* Enable vertical scrolling */
    }
    .right-content {
        display:flex;
        flex-direction:column;
        gap:20px;
        height: 550px; 
        /*margin-bottom: 20px;*/
    }
    .scroll-box {
        /*margin:5px;*/
        padding:10px;
        border: 2px solid #FF5A00;
        border-radius:2px;
/*height:200px;*/
    }
    .left-box{
        padding:10px;
    }
    
    
    @media (max-width:768px){
        .right-content {
           height: max-content;
        }
        
            .left-box, .right-box {
        /*height: 300px;*/
        width: 100%;
        /*border: 1px solid black;*/
        overflow-y: hidden; /* Enable vertical scrolling */
    }
        .scroll-container {
            flex-direction: column;
    }
    }

/*end why choose*/


/*team*/
        .team-container {
            /* max-width: 960px; */
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        .team-card {
            width: 20%;
            background-color: #fff;
            margin: 20px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align:center;
        }
        .team-card img {
            width: 60%;
            border-radius: 50%;
            margin-bottom: 15px;
        }
        .team-card h3 {
            font-size: 18px;
            /*margin-bottom: 10px;*/
        }
        .team-card p {
            font-size: 14px;
            color: #FF5A00;
        }
        .team-card  li{
            text-align:left;
        }
        .team-card  li:before {
        content: "\2713"; /* Unicode character for tick symbol */
        color: #FF5A00; /* Color of the tick symbol */
        margin-right: 10px; /* Adjust spacing between tick symbol and text */
    }
    
     @media (max-width: 767px){
         .team-card {
             width:100%;
         }
     }


/*end team*/





/*team*/
        .team-containers {
            /* max-width: 960px; */
            margin: 20px auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .team-cards {
            width: 25%;
            background-color: #fff;
            margin: 20px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align:center;
        }
        .team-cards img {
            width: 40%;
            border-radius: 50%;
            margin-bottom: 15px;
        }
        .team-cards h3 {
            font-size: 18px;
            /*margin-bottom: 10px;*/
        }
        .team-cards p {
            font-size: 14px;
            color: #FF5A00;
        }
        .team-cards  li{
            text-align:left;
            font-size:14px;
            padding:5px;
            border:1px solid grey;
            border-radius:5px;
            background-color:rgb(4, 29, 83, 0.1);
        }
        
        .team-disc {
            /*text-align:left;*/
            margin-top:10px;
            font-size: 15px;
        }

.team-name{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.team-img{
     display:flex;
     justify-content: center;
     gap: 15px;

}
.team-name p{
    text-align:left;
}

.team-skill{
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:5px;
}


.team-cardsbg {
  background-image: linear-gradient(to bottom right, #021E53, #FF5A00);
  display:flex;
  flex-direction:column;
  justify-content: center;
  gap:30px;
  width: 25%;
            margin: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            text-align:left;
}


.team-cardsbg a{
    width:100%;
    height:100%;
    padding: 20px;
    align-content: center;
}


     @media (max-width: 767px){
         .team-cards, .team-cardsbg {
             width:100%;
         }
     
     }
/*end team*/




















/*3 tab*/
.sec-container-3row {
    display:flux;
    margin: 0;
    justify-content: center;
    align-items: center;
}
        .container-3row {
            display: flex;
            gap: 3%;
            width: 100%;
            margin-left:40px;
            margin-right:40px;
            
        }
        .boxs-3row {
            position: relative;
            width: 33%;
            /* height: 100px; */
            background-color: rgb(4, 29, 83, 0.1);
            border: 1px solid #f7580d;
            border-radius: 4px;
            padding:20px 30px 20px 20px;
            /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
            display: flex;
            justify-content: left;
            align-items: left;
            flex-direction: column;
        }
        .circle-3row {
            position: absolute;
            top: 50%;
            right: -8%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            border: 1px solid #f7580d;
            align-items: center;
            color: #f7580d;
            font-size: 24px;
            z-index: 2;
        }

        @media (max-width: 600px) {
            .container-3row {
                flex-direction: row;
                flex-wrap: wrap;
                
            }
            .boxs-3row {
                width: 100%;
                margin: 10px;
            }
            .circle-3row {
                right: -5%;
            }
        }


/*enf 3 tab*/
  
  
  
  
  
  /*vertical tab*/
  
  
        .vertical-tabs {
            display: flex;
            gap:20px
        }

        .vertical-tab {
            display: flex;
            flex-direction: column;
            gap:10px;
            width: 30%;
            /* border-right: 1px solid #ccc; */
        }

        .vertical-tab button {
            background-color: inherit;
            border: 1px solid #ccc;
            outline: none;
            padding: 15px 20px;
            text-align: left;
            border-radius:10px;
            width: 100%;
            transition: 0.3s;
            font-size: 17px;
            cursor: pointer;
        }

        .vertical-tab button:hover {
            background-color: #ddd;
        }

        .vertical-tab button.active {
            background-color: #041d53;
            color:#fff;
            border-left: 3px solid #f7580d;
        }

        .vertical-tabcontent {
            display: none;
            /* background-color: #ccc; */
            /*align-content:center;*/
            border-radius:10px;
            padding: 20px;
            width: 80%;
            height:min-content;
            border: 1px solid #ccc;
            flex-grow: 1;
        }

        .vertical-tabcontent h3 {
            margin-top: 0;
        }
  
  
  /*end vertical tab*/
  
  
  


.tal-box button{
    text-align:left;
}
.hidden-button {
            display: none;
            /*position: absolute;*/
            /*top: 80%;*/
            /*left: 50%;*/
            /*transform: translate(-50%, -50%);*/
            /*padding: 10px 20px;*/
            /*background-color: #007bff;*/
            color: #FF5A00;
            font-weight: bold;
            /*border: none;*/
            /*cursor: pointer;*/
            /*font-size: 16px;*/
        }
        
.tal-box:hover .hidden-button {
            display: block;
        }
        
        .hidden-button i {
            padding-left:5px;
        }
        
@media (max-width: 768px){
    .hidden-button {
        display:inline;
    }
}
        
        
        
        
        
        .slider-box-sec {
            width:100%;
            display: flex;
            justify-content: center;
            align-items: center;
            /*height: 100vh;*/
            /* margin: 0; */
            font-family: Arial, sans-serif;
            background-color: #fff;
            margin-left: 20px;
        }

        .slider-box-container {
            width: 100%;
            position: relative;
        }

        .slider-box-wrapper {
            overflow: hidden;
        }

        .slider-box {
            display: flex;
            transition: transform 0.3s ease-in-out;
            gap:20px;
        }

        .slide-box {
            /* min-width: calc((100% / 3)+ 20px); */
            min-width: calc((100% / 3) - 20px);
            /* min-width: calc((100% / 3)); */
            box-sizing: border-box;
            padding: 20px;
            background-color: rgb(4, 29, 83, 0.1);
            border: 1px solid #f7580d;
            border-radius: 10px;
            font-size: 16px;
            /* text-align: center; */
        }
        
        
                @media (max-width: 768px) {
            .slide-box {
            min-width: calc((100%) - 20px);
      
        }
        }

        .slide-box h3 {
            font-size: 30px;
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .slider-buttons-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            margin-right: 20px;
        }
        
        .tick-mark{
            margin-bottom: 10px;
            text-align: left;
            padding-left:60px;
        }
        .tick-mark li {
            padding-right:20px;
        }
        .tick-mark li::before {
            /*padding-left:20px;*/
    content: '✓'; 
    /*position: absolute;*/
    margin-right: 10px;
    /*left: 0;*/
    color: #021E53; /* Adjust the color of the tick mark */
    font-size: 1em; /* Adjust the size of the tick mark */
}

        .tick-mark li::after {
            padding-left:20px;
}


        .slider-cta-button {
            background-color: #f7580d;
            color: #fff;
            border: none;
            padding: 15px 15px;
            cursor: pointer;
            border-radius:10px;
        }
        .slider-cta-button i{
            padding-left: 3px;
        }
        .slider-cta-button:hover {
            background-color: #041d53;
        }

        .slider-nav-button {
            background-color: #f7580d;
            color: #fff;
            /*border: 1px solid black;*/
            padding: 15px 20px 15px 20px;
            cursor: pointer;
            border-radius: 50%;
            margin-left: 10px;
        }
        .slider-nav-button:hover {
            background-color: #f7580d;
        }

        .slide-box-img {
            display: inline-flex;
            align-items: center;
            padding: 10px 10px 10px 10px;
            border-radius: 8px;
            justify-content: flex-start;
            /*border-radius: 50px;*/
            margin-bottom:10px;
            /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
        }
        .slide-box-img img {
            width: 50px;
            padding-right: 10px;
            /* margin-right: 20px; */
        }
        .slide-box-img h5 {
            margin: 0;
            font-size: 16px;
            padding-right: 10px;
        }
        .slide-box-img h4 {
            margin-top: 10px;
        }
        

.row-flux-center{
    justify-content: center;
}


/*popup*/

        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .popup {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            overflow: auto;
            z-index:9999;
        }

        .popup-content {
            position: relative;
            margin: auto;
            /* padding: 20px; */
            width: 100%;
            height:100%;
            /* max-width: 600px; */
            background: white;
            /* border-radius: 8px; */
            text-align: center;
            align-content: center;
        }

        .close-btns {
            position: absolute;
            top: 10px;
            right: 20px;
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-btns img{
          width:30px;
        }

        .close-btns:hover,
        .close-btns:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .pop-up {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    width:80%;
    margin:auto;
    /* gap: 10px; */
  }

  .popup-box {
    border: 1px solid #ccc;
    /*padding: 20px;*/
    text-align: center;
  }

  .popup-box img {
    max-width: 100%;
    height: auto;
  }

  /* Styles for Mobile */
  @media (max-width: 768px) {
    .pop-up {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, auto);
    }
    
  }

/*end popup*/