/* ==========================
   WHY CHOOSE WITRIX
========================== */


.why-choose{


    padding:100px 0;

    background:#19272B;

    position:relative;

    overflow:hidden;

}



/* Background Glow */


.why-choose::before{


    content:"";

    position:absolute;


    width:450px;

    height:450px;


    right:-200px;

    top:20%;


    background:

    radial-gradient(

        circle,

        rgba(0,229,255,.12),

        transparent 70%

    );


    pointer-events:none;


}





/* ==========================
   Heading
========================== */


.choose-heading{


    max-width:750px;

    margin:0 auto 70px;

    text-align:center;


}



.choose-subtitle{


    color:#4F8CFF;

    font-size:14px;

    font-weight:600;

    letter-spacing:2px;


}



.choose-heading h2{


    color:#fff;

    font-size:48px;

    line-height:1.2;

    margin:18px 0;


}



.choose-heading p{


    color:#B8C7CC;

    font-size:18px;

    line-height:1.8;


}





/* ==========================
   Cards Grid
========================== */


.choose-grid{


   max-width:1280;

    margin:auto;


    display:grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:25px;


}






/* Card */


.choose-card{


    position:relative;


    background:

    rgba(36,49,53,.8);


    border:

    1px solid rgba(255,255,255,.08);


    padding:35px 28px;


    border-radius:24px;


    transition:.4s ease;


    overflow:hidden;


}





.choose-card::before{


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

    135deg,

    rgba(0,229,255,.15),

    transparent 50%

    );


    opacity:0;


    transition:.4s;


}






.choose-card:hover{


    transform:

    translateY(-10px);


    border-color:#00E5FF;


    box-shadow:


    0 25px 60px rgba(0,0,0,.35);


}




.choose-card:hover::before{


    opacity:1;


}





/* Number */


.choose-number{


    width:55px;

    height:55px;


    display:flex;


    align-items:center;

    justify-content:center;


    border-radius:50%;


    background:#243135;


    border:1px solid #4F8CFF;


    color:#00E5FF;


    font-weight:700;


    margin-bottom:25px;


    position:relative;


    z-index:2;
    
     transition:.35s ease;



}


.choose-card:hover .choose-number{

    background:#00E5FF;

    color:#19272B;

    box-shadow:
    0 0 30px rgba(0,229,255,.6);

    transform:scale(1.1);

}



.choose-card h3{


    color:#fff;


    font-size:23px;


    margin-bottom:15px;


    position:relative;

    z-index:2;


}




.choose-card p{


    color:#B8C7CC;


    line-height:1.7;


    position:relative;

    z-index:2;


}





/* ==========================
   Responsive
========================== */


@media(max-width:992px){


.choose-grid{


    grid-template-columns:

    repeat(2,1fr);


}



}



@media(max-width:768px){



.why-choose{


    padding:70px 0;


}



.choose-heading{


    padding:0 20px;


}



.choose-heading h2{


    font-size:34px;


}



.choose-heading p{


    font-size:15px;


}



.choose-grid{


    grid-template-columns:1fr;


    padding:0 20px;


}



.choose-card{


    padding:30px;


}



}