/* css/services.css */

:root{
    --services-blue:#1769e8;
    --services-blue-dark:#0d5dcc;
    --services-green:#83ce27;
    --services-dark:#071a38;
    --services-text:#61738c;
    --services-light:#f6f9fd;
    --services-border:#dfe8f2;
}

body{
    font-family:"Poppins",sans-serif;
}

.avyro-services-page,
.avyro-services-page *{
    font-family:"Poppins",sans-serif;
}

.avyro-services-page i{
    font-family:"Font Awesome 6 Free"!important;
    font-style:normal;
    font-weight:900;
}

.avyro-services-page i.fab,
.avyro-services-page i.fa-brands{
    font-family:"Font Awesome 6 Brands"!important;
    font-weight:400;
}

.avyro-services-container{
    width:min(1120px,calc(100% - 36px));
    margin:0 auto;
}

.avyro-services-hero{
    position:relative;
    overflow:hidden;
    padding:100px 0 70px;
    background:
        radial-gradient(circle at 84% 20%,rgba(23,105,232,.11),transparent 29%),
        radial-gradient(circle at 10% 85%,rgba(131,206,39,.08),transparent 25%),
        linear-gradient(135deg,#f8fbff,#fff 60%,#f5f9ff);
}

.avyro-services-hero-pattern{
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:
        linear-gradient(rgba(23,105,232,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(23,105,232,.035) 1px,transparent 1px);
    background-size:58px 58px;
    mask-image:linear-gradient(to right,transparent,black 28%,black 72%,transparent);
}

.avyro-services-hero .avyro-services-container{
    position:relative;
    z-index:2;
}

.avyro-services-hero-content{
    max-width:820px;
    margin:0 auto;
    text-align:center;
}

.avyro-services-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:17px;
    color:var(--services-blue);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.7px;
    text-transform:uppercase;
}

.avyro-services-eyebrow i{
    color:var(--services-green);
    font-size:12px;
}

.avyro-services-hero h1{
    margin:0;
    color:var(--services-dark);
    font-size:clamp(46px,6vw,72px);
    line-height:1.04;
    font-weight:700;
    letter-spacing:-2.8px;
}

.avyro-services-hero h1 span{
    color:var(--services-blue);
}

.avyro-services-hero-content>p{
    max-width:680px;
    margin:22px auto 0;
    color:var(--services-text);
    font-size:16px;
    line-height:1.8;
}

.avyro-services-hero-buttons{
    display:flex;
    justify-content:center;
    gap:11px;
    margin-top:28px;
}

.avyro-services-primary,
.avyro-services-secondary{
    min-height:48px;
    padding:0 21px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:9px;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    transition:.25s ease;
}

.avyro-services-primary{
    color:#fff;
    background:var(--services-blue);
    border:1px solid var(--services-blue);
    box-shadow:0 10px 25px rgba(23,105,232,.18);
}

.avyro-services-primary:hover{
    color:#fff;
    background:var(--services-blue-dark);
    border-color:var(--services-blue-dark);
    transform:translateY(-2px);
}

.avyro-services-secondary{
    color:var(--services-dark);
    background:#fff;
    border:1px solid var(--services-border);
}

.avyro-services-secondary:hover{
    color:var(--services-blue);
    border-color:rgba(23,105,232,.3);
    transform:translateY(-2px);
}

.avyro-services-stats{
    max-width:620px;
    margin:50px auto 0;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border-top:1px solid var(--services-border);
    border-bottom:1px solid var(--services-border);
}

.avyro-service-stat{
    padding:19px 15px;
    text-align:center;
    border-right:1px solid var(--services-border);
}

.avyro-service-stat:last-child{
    border-right:0;
}

.avyro-service-stat strong{
    display:block;
    color:var(--services-dark);
    font-size:25px;
    line-height:1;
    font-weight:700;
}

.avyro-service-stat span{
    display:block;
    margin-top:7px;
    color:#71829a;
    font-size:10px;
}

.avyro-services-main{
    padding:90px 0;
    background:#fff;
}

.avyro-services-heading{
    max-width:700px;
    margin:0 auto 43px;
    text-align:center;
}

.avyro-section-label{
    display:inline-block;
    color:var(--services-blue);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.7px;
}

.avyro-services-heading h2{
    margin:11px 0 14px;
    color:var(--services-dark);
    font-size:clamp(37px,4.4vw,54px);
    line-height:1.06;
    letter-spacing:-1.9px;
    font-weight:700;
}

.avyro-services-heading h2 em{
    color:var(--services-blue);
    font-style:normal;
}

.avyro-services-heading p{
    max-width:620px;
    margin:0 auto;
    color:var(--services-text);
    font-size:14px;
    line-height:1.75;
}

.avyro-services-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.avyro-service-card{
    position:relative;
    min-height:245px;
    padding:27px;
    background:#fff;
    border:1px solid var(--services-border);
    border-radius:16px;
    box-shadow:0 8px 24px rgba(7,26,56,.035);
    transition:.3s ease;
}

.avyro-service-card:hover{
    transform:translateY(-6px);
    border-color:rgba(23,105,232,.28);
    box-shadow:0 18px 40px rgba(7,26,56,.08);
}

.avyro-service-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
}

.avyro-service-card-top>span{
    color:#c5d1de;
    font-size:11px;
    font-weight:700;
}

.avyro-service-icon{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:var(--services-blue);
    background:#edf5ff;
    font-size:18px;
}

.avyro-service-icon.green{
    color:#69ae20;
    background:#f1fae8;
}

.avyro-service-card h3{
    margin:21px 0 9px;
    color:var(--services-dark);
    font-size:19px;
    font-weight:600;
}

.avyro-service-card p{
    margin:0;
    color:var(--services-text);
    font-size:13px;
    line-height:1.75;
}

.avyro-service-card a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:19px;
    color:var(--services-blue);
    text-decoration:none;
    font-size:11px;
    font-weight:600;
}

.avyro-service-card a i{
    font-size:10px;
    transition:.2s ease;
}

.avyro-service-card a:hover i{
    transform:translateX(4px);
}

.avyro-services-approach{
    padding:90px 0;
    background:var(--services-light);
}

.avyro-approach-grid{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:start;
}

.avyro-approach-content{
    position:sticky;
    top:30px;
}

.avyro-approach-content h2{
    margin:12px 0 17px;
    color:var(--services-dark);
    font-size:clamp(38px,4.4vw,54px);
    line-height:1.07;
    font-weight:700;
    letter-spacing:-1.8px;
}

.avyro-approach-content h2 span{
    display:block;
    color:var(--services-blue);
}

.avyro-approach-content p{
    max-width:500px;
    margin:0;
    color:var(--services-text);
    font-size:15px;
    line-height:1.8;
}

.avyro-approach-button{
    margin-top:25px;
    min-height:45px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:8px;
    color:#fff;
    background:var(--services-blue);
    text-decoration:none;
    font-size:12px;
    font-weight:600;
    transition:.25s ease;
}

.avyro-approach-button:hover{
    color:#fff;
    background:var(--services-dark);
    transform:translateY(-2px);
}

.avyro-approach-list{
    border-top:1px solid var(--services-border);
}

.avyro-approach-item{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:18px;
    padding:23px 0;
    border-bottom:1px solid var(--services-border);
}

.avyro-approach-item>span{
    color:var(--services-green);
    font-size:11px;
    font-weight:700;
}

.avyro-approach-item h3{
    margin:0 0 6px;
    color:var(--services-dark);
    font-size:18px;
    font-weight:600;
}

.avyro-approach-item p{
    margin:0;
    color:var(--services-text);
    font-size:13px;
    line-height:1.7;
}

.avyro-services-cta{
    padding:55px 0;
    background:#fff;
}

.avyro-services-cta-inner{
    padding:36px 40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:25px;
    border-radius:17px;
    background:
        radial-gradient(circle at 85% 0%,rgba(23,105,232,.33),transparent 28%),
        var(--services-dark);
}

.avyro-services-cta-inner>div:first-child>span{
    color:var(--services-green);
    font-size:10px;
    font-weight:700;
    letter-spacing:1.5px;
}

.avyro-services-cta-inner h2{
    max-width:650px;
    margin:7px 0 8px;
    color:#fff;
    font-size:clamp(27px,3vw,39px);
    line-height:1.15;
    font-weight:600;
    letter-spacing:-1px;
}

.avyro-services-cta-inner h2 em{
    color:var(--services-green);
    font-style:normal;
}

.avyro-services-cta-inner p{
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:13px;
    line-height:1.6;
}

.avyro-services-cta-buttons{
    display:flex;
    gap:9px;
    flex-shrink:0;
}

.avyro-cta-primary,
.avyro-cta-secondary{
    min-height:45px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:8px;
    text-decoration:none;
    font-size:12px;
    font-weight:600;
    transition:.25s ease;
}

.avyro-cta-primary{
    color:var(--services-dark);
    background:#fff;
}

.avyro-cta-primary:hover{
    color:var(--services-dark);
    background:var(--services-green);
    transform:translateY(-2px);
}

.avyro-cta-secondary{
    color:#fff;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.25);
}

.avyro-cta-secondary:hover{
    color:#fff;
    background:var(--services-blue);
    border-color:var(--services-blue);
    transform:translateY(-2px);
}

@media (max-width:950px){

    .avyro-services-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .avyro-approach-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .avyro-approach-content{
        position:relative;
        top:auto;
    }

    .avyro-services-cta-inner{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:650px){

    .avyro-services-container{
        width:calc(100% - 28px);
    }

    .avyro-services-hero{
        padding:70px 0 50px;
    }

    .avyro-services-eyebrow{
        font-size:9px;
        letter-spacing:1.2px;
    }

    .avyro-services-hero h1{
        font-size:39px;
        line-height:1.07;
        letter-spacing:-1.5px;
    }

    .avyro-services-hero-content>p{
        font-size:13px;
        line-height:1.7;
    }

    .avyro-services-hero-buttons{
        flex-direction:column;
        width:100%;
        max-width:300px;
        margin:22px auto 0;
    }

    .avyro-services-primary,
    .avyro-services-secondary{
        width:100%;
        box-sizing:border-box;
    }

    .avyro-services-stats{
        margin-top:38px;
    }

    .avyro-service-stat{
        padding:16px 8px;
    }

    .avyro-service-stat strong{
        font-size:20px;
    }

    .avyro-service-stat span{
        font-size:8px;
    }

    .avyro-services-main{
        padding:60px 0;
    }

    .avyro-services-heading{
        margin-bottom:30px;
    }

    .avyro-services-heading h2{
        font-size:33px;
        letter-spacing:-1.1px;
    }

    .avyro-services-heading p{
        font-size:13px;
    }

    .avyro-services-grid{
        grid-template-columns:1fr;
        gap:11px;
    }

    .avyro-service-card{
        min-height:auto;
        padding:23px;
    }

    .avyro-service-card h3{
        font-size:18px;
    }

    .avyro-service-card p{
        font-size:13px;
    }

    .avyro-services-approach{
        padding:60px 0;
    }

    .avyro-approach-content h2{
        font-size:34px;
        letter-spacing:-1.2px;
    }

    .avyro-approach-content p{
        font-size:13px;
    }

    .avyro-approach-item{
        grid-template-columns:40px 1fr;
        gap:13px;
        padding:19px 0;
    }

    .avyro-approach-item h3{
        font-size:16px;
    }

    .avyro-approach-item p{
        font-size:12px;
    }

    .avyro-services-cta{
        padding:35px 0;
    }

    .avyro-services-cta-inner{
        padding:28px 20px;
        border-radius:14px;
    }

    .avyro-services-cta-inner h2{
        font-size:26px;
    }

    .avyro-services-cta-inner p{
        font-size:12px;
    }

    .avyro-services-cta-buttons{
        width:100%;
        flex-direction:column;
    }

    .avyro-cta-primary,
    .avyro-cta-secondary{
        width:100%;
        box-sizing:border-box;
    }
}

@media (max-width:390px){

    .avyro-services-hero h1{
        font-size:35px;
    }

    .avyro-services-heading h2{
        font-size:30px;
    }

    .avyro-approach-content h2{
        font-size:31px;
    }

    .avyro-services-cta-inner h2{
        font-size:24px;
    }
}

@media (prefers-reduced-motion:reduce){

    .avyro-services-primary,
    .avyro-services-secondary,
    .avyro-service-card,
    .avyro-approach-button,
    .avyro-cta-primary,
    .avyro-cta-secondary{
        transition:none;
    }
}