/*==============================================================
SERVICES HERO
==============================================================*/

.services-hero{

    position:relative;

    min-height:60vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    url("../../images/services/services-banner.jpg")
    center center/cover no-repeat;

}

.services-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(7,24,39,.88),

        rgba(7,24,39,.74)

    );

}

.services-hero .container{

    position:relative;

    z-index:2;

}

.min-vh-60{

    min-height:60vh;

}


/*==============================================================
HERO TAG
==============================================================*/

.services-hero .hero-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    margin-bottom:25px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

}


/*==============================================================
TEXT
==============================================================*/

.services-hero h1{

    color:#fff;

    font-size:clamp(3rem,5vw,5rem);

    line-height:1.15;

    margin-bottom:25px;

}

.services-hero p{

    max-width:720px;

    color:#d5d5d5;

    font-size:18px;

    line-height:1.9;

}


/*==============================================================
BUTTONS
==============================================================*/

.services-hero .hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.services-hero .btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 36px;

    border:2px solid var(--primary);

    border-radius:50px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.services-hero .btn-outline:hover{

    background:var(--primary);

    color:#111;

    transform:translateY(-5px);

}


/*==============================================================
BREADCRUMB
==============================================================*/

.services-hero .hero-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    color:#cfcfcf;

}

.services-hero .hero-breadcrumb a{

    color:var(--primary);

    text-decoration:none;

}

.services-hero .hero-breadcrumb span{

    color:#777;

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.services-hero{

    text-align:center;

}

.services-hero .hero-buttons{

    justify-content:center;

}

.services-hero .hero-breadcrumb{

    justify-content:center;

}

}

@media(max-width:767px){

.services-hero{

    min-height:70vh;

}

.services-hero h1{

    font-size:2.5rem;

}

.services-hero p{

    font-size:16px;

}

.services-hero .btn-gold,

.services-hero .btn-outline{

    width:100%;

}

}
/*==============================================================
SERVICES GRID
==============================================================*/

.services-grid{

    background:var(--dark);

    position:relative;

    overflow:hidden;

}

.services-grid::before{

    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(55px);

}

.services-grid .section-title{

    margin-bottom:60px;

}

.services-grid h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.services-grid h2{

    color:#fff;

    margin-bottom:20px;

}

.services-grid .section-title p{

    max-width:760px;

    margin:auto;

    color:#cfcfcf;

    line-height:1.9;

}


/*==============================================================
SERVICE CARD
==============================================================*/

.service-card{

    background:#0d2336;

    padding:40px 30px;

    border-radius:22px;

    height:100%;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.service-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.service-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
ICON
==============================================================*/

.service-icon{

    width:80px;

    height:80px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    transition:.35s;

}

.service-icon i{

    font-size:32px;

    color:var(--primary);

}

.service-card:hover .service-icon{

    background:var(--primary);

    transform:rotate(10deg);

}

.service-card:hover .service-icon i{

    color:#111;

}


/*==============================================================
TEXT
==============================================================*/

.service-card h4{

    color:#fff;

    margin-bottom:18px;

}

.service-card p{

    color:#cfcfcf;

    line-height:1.8;

    margin-bottom:25px;

}

.service-card a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.service-card a i{

    margin-left:8px;

    transition:.3s;

}

.service-card:hover a i{

    transform:translateX(6px);

}
/*==============================================================
OUR PROCESS
==============================================================*/

.service-process{

    position:relative;

    background:#081c2d;

    overflow:hidden;

}

.service-process::before{

    content:"";

    position:absolute;

    left:-200px;

    bottom:-200px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(60px);

}

.service-process .section-title{

    margin-bottom:60px;

}

.service-process h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.service-process h2{

    color:#fff;

    margin-bottom:20px;

}

.service-process .section-title p{

    color:#cfcfcf;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}


/*==============================================================
PROCESS CARD
==============================================================*/

.process-card{

    position:relative;

    background:#0d2336;

    border-radius:24px;

    padding:45px 30px;

    text-align:center;

    height:100%;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

    overflow:hidden;

}

.process-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.process-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
STEP NUMBER
==============================================================*/

.process-number{

    position:absolute;

    top:20px;

    right:25px;

    font-size:3rem;

    font-weight:800;

    color:rgba(255,255,255,.05);

}


/*==============================================================
ICON
==============================================================*/

.process-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.process-icon i{

    font-size:36px;

    color:var(--primary);

}

.process-card:hover .process-icon{

    background:var(--primary);

    transform:rotate(10deg);

}

.process-card:hover .process-icon i{

    color:#111;

}


/*==============================================================
TEXT
==============================================================*/

.process-card h4{

    color:#fff;

    margin-bottom:18px;

}

.process-card p{

    color:#cfcfcf;

    line-height:1.9;

    margin:0;

}
/*==============================================================
INDUSTRIES
==============================================================*/

.industries{

    position:relative;

    background:var(--dark);

    overflow:hidden;

}

.industries::before{

    content:"";

    position:absolute;

    right:-180px;

    top:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(60px);

}

.industries .section-title{

    margin-bottom:60px;

}

.industries h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.industries h2{

    color:#fff;

    margin-bottom:20px;

}

.industries .section-title p{

    color:#cfcfcf;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}


/*==============================================================
INDUSTRY CARD
==============================================================*/

.industry-card{

    background:#0d2336;

    border-radius:22px;

    padding:40px 35px;

    height:100%;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.industry-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:left;

    transition:.35s;

}

.industry-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.industry-card:hover::before{

    transform:scaleX(1);

}


/*==============================================================
ICON
==============================================================*/

.industry-icon{

    width:85px;

    height:85px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    transition:.35s;

}

.industry-icon i{

    font-size:34px;

    color:var(--primary);

}

.industry-card:hover .industry-icon{

    background:var(--primary);

    transform:rotate(10deg);

}

.industry-card:hover .industry-icon i{

    color:#111;

}


/*==============================================================
TEXT
==============================================================*/

.industry-card h4{

    color:#fff;

    margin-bottom:18px;

}

.industry-card p{

    color:#cfcfcf;

    line-height:1.9;

    margin:0;

}
/*==============================================================
WHY CHOOSE US
==============================================================*/

.services-why{

    position:relative;

    background:#081c2d;

    overflow:hidden;

}

.services-why::before{

    content:"";

    position:absolute;

    left:-220px;

    top:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(70px);

}


/*==============================================================
IMAGE
==============================================================*/

.services-why-image{

    position:relative;

}

.services-why-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}


/*==============================================================
EXPERIENCE BOX
==============================================================*/

.experience-box{

    position:absolute;

    bottom:40px;

    left:-30px;

    background:#0d2336;

    border-left:5px solid var(--primary);

    padding:30px;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

}

.experience-box h2{

    color:var(--primary);

    font-size:3rem;

    margin-bottom:5px;

}

.experience-box span{

    color:#fff;

}


/*==============================================================
TEXT
==============================================================*/

.services-why h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:20px;

}

.services-why h2{

    color:#fff;

    margin-bottom:25px;

}

.services-why p{

    color:#cfcfcf;

    line-height:1.9;

}


/*==============================================================
FEATURES
==============================================================*/

.why-features{

    margin-top:35px;

}

.feature-item{

    display:flex;

    gap:18px;

    margin-bottom:28px;

}

.feature-item i{

    width:52px;

    height:52px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.35s;

}

.feature-item:hover i{

    background:var(--primary);

    color:#111;

    transform:rotate(10deg);

}

.feature-item h5{

    color:#fff;

    margin-bottom:8px;

}

.feature-item p{

    margin:0;

}


/*==============================================================
STATISTICS
==============================================================*/

.stats-row{

    text-align:center;

}

.stat-box{

    background:#0d2336;

    padding:30px 15px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.35);

}

.stat-box h3{

    color:var(--primary);

    font-size:2.4rem;

    margin-bottom:8px;

}

.stat-box span{

    color:#d5d5d5;

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.services-why-image{

    margin-bottom:50px;

}

.services-why-image img{

    height:500px;

}

.experience-box{

    left:20px;

}

}

@media(max-width:767px){

.services-why-image img{

    height:400px;

}

.experience-box{

    position:relative;

    left:0;

    bottom:0;

    margin-top:20px;

}

.stats-row .col-4{

    margin-bottom:20px;

}

}
/*==============================================================
TECHNOLOGY
==============================================================*/

.technology-section{

    position:relative;

    background:var(--dark);

    overflow:hidden;

}

.technology-section::before{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-200px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(70px);

}


/*==============================================================
TEXT
==============================================================*/

.technology-section h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:20px;

}

.technology-section h2{

    color:#fff;

    margin-bottom:25px;

}

.technology-section p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:40px;

}


/*==============================================================
TECH GRID
==============================================================*/

.technology-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.tech-item{

    background:#0d2336;

    border:1px solid rgba(255,255,255,.05);

    border-radius:16px;

    padding:18px 22px;

    color:#fff;

    display:flex;

    align-items:center;

    gap:15px;

    transition:.35s;

}

.tech-item:hover{

    transform:translateY(-6px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 20px 45px rgba(0,0,0,.3);

}

.tech-item i{

    color:var(--primary);

    font-size:22px;

}


/*==============================================================
IMAGE
==============================================================*/

.technology-image{

    position:relative;

}

.technology-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}


/*==============================================================
FLOATING CARD
==============================================================*/

.tech-floating-card{

    position:absolute;

    right:-25px;

    bottom:40px;

    background:#0d2336;

    border-left:5px solid var(--primary);

    border-radius:20px;

    padding:25px 30px;

    display:flex;

    align-items:center;

    gap:20px;

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.tech-floating-card i{

    width:65px;

    height:65px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    font-size:26px;

}

.tech-floating-card h4{

    color:#fff;

    margin-bottom:5px;

}

.tech-floating-card span{

    color:#cfcfcf;

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.technology-image{

    margin-top:50px;

}

.tech-floating-card{

    right:20px;

}

}

@media(max-width:767px){

.technology-list{

    grid-template-columns:1fr;

}

.technology-image img{

    height:420px;

}

.tech-floating-card{

    position:relative;

    right:auto;

    bottom:auto;

    margin-top:20px;

}

}
/*==============================================================
FAQ
==============================================================*/

.services-faq{

    background:#081c2d;

    position:relative;

    overflow:hidden;

}

.services-faq::before{

    content:"";

    position:absolute;

    left:-180px;

    top:-180px;

    width:450px;

    height:450px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(60px);

}

.services-faq .section-title{

    margin-bottom:60px;

}

.services-faq h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.services-faq h2{

    color:#fff;

    margin-bottom:20px;

}

.services-faq .section-title p{

    color:#cfcfcf;

    max-width:720px;

    margin:auto;

    line-height:1.9;

}


/*==============================================================
ACCORDION
==============================================================*/

.custom-accordion .accordion-item{

    background:#0d2336;

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    margin-bottom:18px;

    overflow:hidden;

}

.custom-accordion .accordion-button{

    background:#0d2336;

    color:#fff;

    padding:24px 28px;

    font-weight:600;

    font-size:18px;

    box-shadow:none;

}

.custom-accordion .accordion-button:not(.collapsed){

    background:#10283d;

    color:var(--primary);

}

.custom-accordion .accordion-button:focus{

    box-shadow:none;

    border:none;

}

.custom-accordion .accordion-button::after{

    filter:invert(1);

}

.custom-accordion .accordion-body{

    background:#10283d;

    color:#d5d5d5;

    line-height:1.9;

    padding:25px 30px;

}
/*==============================================================
SERVICES CTA
==============================================================*/

.services-cta{

    position:relative;

    padding:140px 0;

    background:
    url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

    overflow:hidden;

}

.services-cta-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(7,24,39,.92),

        rgba(7,24,39,.82)

    );

}

.services-cta .container{

    position:relative;

    z-index:2;

}

.services-cta .cta-tag{

    display:inline-block;

    padding:10px 26px;

    border-radius:50px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:28px;

}

.services-cta h2{

    color:#fff;

    font-size:clamp(2.5rem,5vw,4.3rem);

    line-height:1.2;

    margin-bottom:28px;

}

.services-cta p{

    max-width:760px;

    margin:0 auto 45px;

    color:#d5d5d5;

    line-height:1.9;

    font-size:18px;

}

.services-cta .cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}


/*==============================================================
BUTTON
==============================================================*/

.services-cta .btn-outline-light{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 38px;

    border:2px solid rgba(255,255,255,.35);

    border-radius:50px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.services-cta .btn-outline-light:hover{

    background:#fff;

    color:#111;

    transform:translateY(-5px);

}


/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:767px){

.services-cta{

    padding:90px 0;

}

.services-cta h2{

    font-size:2.3rem;

}

.services-cta p{

    font-size:16px;

}

.services-cta .cta-buttons{

    flex-direction:column;

}

.services-cta .btn-gold,

.services-cta .btn-outline-light{

    width:100%;

}

}