:root {
    --bg-color: #1C1B2B;
    --components-gradient-text-1: #5a8cff;
    --components-gradient-text-2: #43d6ff;
    --components-gradient-text-3: #8f3fff;
    --gradient-point: 0.55;
}
.header-logo{
    max-width: 176px;
}

.section-title h1 span, .section-title h2 span {
    font-weight: 700;
    background: linear-gradient(90deg, var(--components-gradient-text-1) 0%, var(--components-gradient-text-2) 50%, var(--components-gradient-text-3) 100%) !important;
    background-position: left center !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    transition: all 0.4s ease-in-out !important;
}


.btn-default {
    position: relative;
    display: inline-block;
    background: linear-gradient(96deg, var(--components-gradient-text-1) 0%, var(--components-gradient-text-2) calc(100% * var(--gradient-point)), var(--components-gradient-text-3) 99.6%);
    background-size: 200% auto;
    background-position: left center;
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 500;
    padding: 16px 30px;
    border: none;
    border-radius: 100px;
    overflow: hidden;
    z-index: 0;
    transition: background-position 0.4s ease-in-out;
}

.btn-default:hover {
    background-position: right center;
}

.btn-default.btn-highlighted{
    background: linear-gradient(var(--bg-color), var(--bg-color)) padding-box, linear-gradient(to left, var(--components-gradient-text-1), var(--components-gradient-text-3)) border-box !important;
    border: 1px solid transparent !important;
}

.service-btn .readmore-btn::before {
    background: linear-gradient(to left, var(--components-gradient-text-2) 0%, var(--components-gradient-text-3) 100%) !important;
}

.section-title h3 {
    background: #FFFFFF0A !important;
    padding-left: 20px !important;
    border-left: 1px solid #5a8cff !important;
    border-right: 1px solid #8f3fff !important;
}

.features-item::before {
    background: linear-gradient(90deg, var(--components-gradient-text-2) 0.03%, var(--components-gradient-text-3) 100%) !important;
}

.service-item-content h3 a:hover {
    color: var(--components-gradient-text-3) !important;
}
.company-logo{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.company-logo img{
    width: 40px !important;
    border-radius: 50%;
}
.company-logo div{
    font-size: 14px;
    text-align: left;
}
.main-menu ul li a {
    text-transform: none !important;
}
.hero{
    padding-top: 200px !important;
}

@media(max-width: 768px){
    .hero {
        padding-top: 150px !important;
    }
}

.hero-content .section-title h3{
    margin-bottom: 60px !important;
}

.header-btn{
    width: 176px !important;
    display: flex;
    justify-content: right;
}

.main-menu .nav-menu-wrapper .navbar-nav{
    padding: 0 40px !important;
}

.cta-box-content .section-title{
    max-width: 600px !important;
}

.features-item-content p, .service-item-content p{
    margin-bottom: 12px !important;
}
.our-services.benefits::before{
    right: -70px !important;
    left: auto !important;
    background: url(../images/section-bg-shape-1.png) no-repeat !important;
}

@media(max-width: 768px){
    .main-footer{
        text-align: center !important;
    }

    .footer-contact-content{
        width: 205px !important;
        text-align: left !important;
    }

    .footer-contact-item{
        justify-content: center !important;
    }
  
}