.banner-content .title h1 {
    font-size: 30px;
  }

  .about-content .title h2 {
    font-size: 30px;
  }

  .single-contact-info .contact-call .icon:hover{
    background-color: #ff8408 ;
    color: white;
  }

  .projects-box-info {
    .main-box {
        padding:0;
        display: flex;
    
        .box {
            background: {
                image: url(../images/index/index-card5.png);
                position: center center;
                repeat: no-repeat;
                size: cover;
            };
            z-index: 1;
            width: 172px;
            height: 350px;
            -o-transition: 0.8s;
            position: relative;
            overflow: hidden;
            list-style: none;
            margin-right: 25px;
            webkit-transition: 0.8s;
            border-radius: 0px 30px;
            transition: var(--transition);
            
            &.bg-1 {
                background-image: url(../images/index/index-card1.png);
            }
            &.bg-2 {
                background-image: url(../images/index/index-card2.png);
            }
            &.bg-3 {
                background-image: url(../images/index/index-card3.png);
            }
            &.bg-4 {
                background-image: url(../images/index/index-card4.png);
            }
            
            .detail {
                right: 0;
                top:0;
                opacity: 0;
                padding:30px;
                width: 100%;
                height: 100%;
                position: absolute;
                -o-transition: 0.8s;
                box-sizing:border-box;
                webkit-transition: 0.8s;
                transform: translateY(100%);
                transition: var(--transition);
                -webkit-transform: translateY(100%);
                
                .content {
                    padding-top: 158px;

                    h3 {
                        font-size: 20px;

                        a {
                            color: var(--whiteColor);

                            &:hover {
                                color: var(--secondaryColor);
                            }
                        }
                    }
                    p {
                        color: #dae0f5;
                    }
                    .read-more {
                        position: relative;
                        color: var(--whiteColor);
                        transition: var(--transition);
                        font-family: var(--heading-font-family);
                        font:  {
                            size: 15px;
                            weight: 500;
                        }
                
                        i {
                            top: 1px;
                            font-size: 17px;
                            line-height: 1;
                            position: relative;
                            display: inline-block;
                            transform: rotate(304deg);
                            color: var(--whiteColor);
                            transition: var(--transition);
                        }
                        &:hover {
                            color: var(--secondaryColor);
                
                            i {
                                transform: unset;
                                color: var(--secondaryColor);
                                
                            } 
                            &::before {
                                width: 100%;
                            }
                        }
                    }
                }
            }
            span {
                font-size: 20px;
                height: 100%;
                align-items: center;
                justify-content: center;
                color: #fff;
                text-transform: uppercase;
                letter-spacing: 4px;
                width: 172px;
                transform: rotate(180deg);
                font-weight: 400;
                cursor: pointer;
                
                img {
                    border-radius: 0px 30px;
                }
            }
            &.active {
                width: 70% !important;
    
                .detail {
                    opacity: 1;
                    -webkit-transition-delay: 0.2s;
                    -moz-transition-delay: 0.2s;
                    -o-transition-delay: 0.2s;
                    transition-delay: 0.2s;
                    transform: none;
                }
                span {
                    display: none;
                }
            }
            &:last-child {
                margin-right: 0;
            }
            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                border-radius: 0px 30px;
                background: linear-gradient(180deg, rgba(46, 50, 65, 0.00) 0%, rgba(12, 11, 11, 0.85) 56.29%);
            }
        }
    }
}


.projects-box-info {
  & .main-box {
    & .box {
      & .detail {
        & .content {
          & h3 {
            
              color: var(--whiteColor);
            
          }
        }
      }
    }
  }
}


.pb-19{
  padding-bottom: 19px !important;
}

.pb-19{
  margin-bottom: -19px !important;
}

.pt-25{
  padding-top: 20px !important;
}


.single-services-info:hover {
  border-radius: 0px 30px;
  box-shadow: #ff8408 !important;
}

.footer-info-area {
 
  padding-bottom: 7px !important;
  
}

.text-justify{
    text-align: justify;
}

.pl-28{
    padding-left: 28px;
}

.single-footer-info ul li a:hover {
    color: #ff8f00;
  }



  .page-title-area {
    background-image: url(assets/images/app-img/app-cover.png) !important;
    background-repeat: no-repeat;
    };

    .pt-50{
        padding-top: 50px;
    }
   
    .text-justify{
        
        text-align: center;
    }

    .tb{
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .just{
        text-align: justify !important;
    }

    .single-footer-info h3 {
        font-size: 20px;
        margin-bottom: 31px;
        color: var(--whiteColor);
      }