/*==================================================
            SPEED METER SECTION
==================================================*/

.speed-section{

    padding:120px 0;

    background:
    linear-gradient(
    135deg,
    #03111F,
    #081B32,
    #04101E);

    overflow:hidden;

}

.speed-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

/*==================================================
LEFT
==================================================*/

.section-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:#0f2b4a;

    color:#49a2ff;

    font-weight:600;

    margin-bottom:25px;

}

.speed-left h2{

    font-size:56px;

    color:#fff;

    line-height:1.2;

    margin-bottom:25px;

}

.speed-left h2 span{

    color:#FFD23F;

}

.speed-left p{

    color:#b8c6d8;

    line-height:1.9;

    font-size:18px;

}

/*==================================================
RIGHT
==================================================*/

.speed-right{

    display:flex;

    justify-content:center;

}

.speedometer{

    width:420px;

    height:420px;

    position:relative;

}

/*==================================================
SVG
==================================================*/

.meter-svg{

    width:100%;

    height:100%;

    transform:rotate(-135deg);

}

/*==================================================
BACKGROUND RING
==================================================*/

.meter-bg{

    fill:none;

    stroke:#143353;

    stroke-width:18;

}

/*==================================================
PROGRESS RING
==================================================*/

.meter-progress{

    fill:none;

    stroke:#25A9FF;

    stroke-width:18;

    stroke-linecap:round;

    stroke-dasharray:942;

    stroke-dashoffset:942;

    filter:drop-shadow(0 0 15px #1da7ff);

    transition:1s;

}

/*==================================================
NEEDLE
==================================================*/

#needle{

    transform-origin:200px 200px;

    transform:rotate(-135deg);

}

.needle{

    stroke:#FFD23F;

    stroke-width:7;

    stroke-linecap:round;

}

.needle-center{

    fill:#FFD23F;

}

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

.speed-number{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.speed-number h1{

    color:white;

    font-size:80px;

    line-height:1;

    margin:0;

}

.speed-number span{

    color:#7ea0c8;

    font-size:22px;

    letter-spacing:2px;

}

/*==================================================
GLOW
==================================================*/

.speedometer::before{

    content:"";

    position:absolute;

    inset:45px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(37,169,255,.25),

        transparent 70%

    );

    filter:blur(25px);

    z-index:-1;

}

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

@media(max-width:992px){

.speed-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.speed-right{

margin-top:50px;

}

}

@media(max-width:600px){

.speedometer{

width:320px;

height:320px;

}

.speed-left h2{

font-size:38px;

}

.speed-number h1{

font-size:56px;

}

}