/*
====================================================
ULEZ MAP PRO

File:
cards.css

Purpose:
Homepage Tool Cards Design

====================================================
*/





/* ==============================
Tool Grid
============================== */


.ulez-tool-grid{


    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;


}






/* ==============================
Tool Card
============================== */


.ulez-tool-card{


    background:#ffffff;


    padding:40px 35px;


    border-radius:22px;


    border:1px solid #e5e7eb;


    box-shadow:


    0 10px 35px rgba(0,0,0,0.08);


    transition:


    all 0.3s ease;


    position:relative;


    overflow:hidden;


}







/*
Top Color Line
*/


.ulez-tool-card::before{


    content:"";


    position:absolute;


    top:0;


    left:0;


    width:100%;


    height:5px;


    background:#0066ff;


}








/* Hover */


.ulez-tool-card:hover{


    transform:translateY(-10px);


    box-shadow:


    0 20px 45px rgba(0,0,0,0.15);


}








/* ==============================
Icon
============================== */


.tool-icon{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#eff6ff;


    border-radius:20px;


    font-size:38px;


    margin-bottom:25px;


}








/* ==============================
Title
============================== */


.ulez-tool-card h3{


    font-size:26px;


    margin-bottom:15px;


    color:#111827;


}








/* ==============================
Description
============================== */


.ulez-tool-card p{


    color:#6b7280;


    font-size:16px;


    line-height:1.7;


    min-height:110px;


}








/* ==============================
Card Button
============================== */


.ulez-card-button{


    display:inline-flex;


    align-items:center;


    gap:8px;


    margin-top:20px;


    padding:12px 22px;


    background:#0066ff;


    color:white !important;


    border-radius:10px;


    font-weight:600;


    text-decoration:none !important;


    transition:all .3s ease;


}






.ulez-card-button:hover{


    background:#004ecc;


    transform:translateX(5px);


}









/* ==============================
Different Card Colors
============================== */


/*
Map
*/


.ulez-tool-card:nth-child(1)::before{


    background:#0066ff;


}



/*
Camera
*/


.ulez-tool-card:nth-child(2)::before{


    background:#16a34a;


}



.ulez-tool-card:nth-child(2) .tool-icon{


    background:#dcfce7;


}






/*
Vehicle
*/


.ulez-tool-card:nth-child(3)::before{


    background:#f97316;


}



.ulez-tool-card:nth-child(3) .tool-icon{


    background:#ffedd5;


}










/* ==============================
Feature Cards
============================== */



.ulez-feature h3{


    font-size:22px;


    margin-bottom:12px;


}





.ulez-feature p{


    color:#6b7280;


    line-height:1.6;


}










/* ==============================
Highlight Boxes
============================== */


.highlight-content{


    max-width:800px;


}



.highlight-content p{


    line-height:1.7;


    margin-bottom:25px;


}










/* ==============================
Mobile
============================== */


@media(max-width:900px){



    .ulez-tool-grid{


        grid-template-columns:1fr;


    }



    .ulez-tool-card{


        padding:30px;


    }



}