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

File:
home.css

Purpose:
Enterprise Homepage Design

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


/* ==============================
Main Container
============================== */


.ulez-home{

    width:100%;

    overflow:hidden;

}




/* ==============================
Section Common
============================== */


.ulez-section-title{

    text-align:center;

    max-width:800px;

    margin:0 auto 50px;

}



.ulez-section-title h2{

    font-size:36px;

    line-height:1.2;

    margin-bottom:15px;

    color:#111827;

}



.ulez-section-title p{

    font-size:18px;

    color:#6b7280;

}




/* ==============================
Hero Section
============================== */


.ulez-hero{


    background:

    linear-gradient(

        135deg,

        #eff6ff,

        #ffffff

    );


    padding:90px 20px;


}



.ulez-hero-container{


    max-width:1200px;

    margin:auto;

    display:flex;

    align-items:center;

    gap:60px;


}





.ulez-hero-content{


    flex:1;

}




.ulez-badge{


    display:inline-block;

    background:#dbeafe;

    color:#0066ff;

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;


}





.ulez-hero h1{


    font-size:52px;

    line-height:1.1;

    color:#111827;

    margin-bottom:25px;


}





.ulez-hero p{


    font-size:20px;

    line-height:1.6;

    color:#4b5563;

    margin-bottom:35px;


}




/* ==============================
Hero Buttons
============================== */


.ulez-hero-buttons{


    display:flex;

    gap:15px;

    flex-wrap:wrap;


}





/* ==============================
Trust Stats
============================== */


.ulez-trust{


    display:flex;

    gap:35px;

    margin-top:45px;

}



.ulez-trust div{


    display:flex;

    flex-direction:column;


}



.ulez-trust strong{


    font-size:28px;

    color:#111827;


}



.ulez-trust span{


    color:#6b7280;

    font-size:14px;


}





/* ==============================
Hero Map Illustration
============================== */


.ulez-hero-image{


    flex:1;

    display:flex;

    justify-content:center;


}




.ulez-map-card{


    width:420px;

    height:420px;

    background:white;

    border-radius:25px;

    padding:20px;

    box-shadow:

    0 25px 60px rgba(0,0,0,0.15);


}





.map-card-header{


    font-size:18px;

    font-weight:700;

    padding-bottom:15px;

}





.map-preview{


    height:330px;

    background:

    linear-gradient(

        135deg,

        #e0f2fe,

        #dbeafe

    );


    border-radius:20px;

    position:relative;

    overflow:hidden;


}





.map-circle{


    position:absolute;

    width:230px;

    height:230px;

    border-radius:50%;

    background:

    rgba(0,102,255,0.20);


    top:50%;

    left:50%;

    transform:

    translate(-50%,-50%);


    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    font-weight:bold;

    color:#0066ff;


}





.camera-dot{


    position:absolute;

    width:18px;

    height:18px;

    background:#ef4444;

    border-radius:50%;

}



.dot1{

    top:60px;

    left:90px;

}


.dot2{

    top:170px;

    right:80px;

}


.dot3{

    bottom:70px;

    left:180px;

}





/* ==============================
Tools Section
============================== */


.ulez-tools{


    padding:90px 20px;

    background:#ffffff;


}






/* ==============================
Why Section
============================== */


.ulez-why{


    padding:90px 20px;

    background:#f8fafc;


}






.ulez-feature-grid{


    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;


}



.ulez-feature{


    background:white;

    padding:35px;

    border-radius:20px;

    text-align:center;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.06);


}



.feature-icon{


    width:60px;

    height:60px;

    margin:auto auto 20px;

    background:#dbeafe;

    color:#0066ff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;


}






/* ==============================
Highlights
============================== */


.ulez-highlights{


    max-width:1200px;

    margin:auto;

    padding:90px 20px;


}



.highlight-box{


    background:

    linear-gradient(

        135deg,

        #0066ff,

        #2563eb

    );


    color:white;

    padding:50px;

    margin-bottom:30px;

    border-radius:25px;


}





.highlight-box h2{


    color:white;

    font-size:32px;


}



.highlight-box p{


    font-size:18px;

    max-width:700px;


}






/* ==============================
SEO Content
============================== */


.ulez-seo-content{


    background:white;

    padding:80px 20px;


}




.seo-container{


    max-width:900px;

    margin:auto;

}



.seo-container p{


    font-size:18px;

    line-height:1.8;

    color:#4b5563;


}






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


.ulez-faq{


    background:#f8fafc;

    padding:80px 20px;


}




.faq-grid{


    max-width:1000px;

    margin:auto;

    display:grid;

    gap:20px;


}



.faq-item{


    background:white;

    padding:25px;

    border-radius:15px;


}



.faq-item h3{


    margin-top:0;

    color:#111827;


}





/* ==============================
CTA
============================== */


.ulez-final-cta{


    padding:80px 20px;

    text-align:center;

    background:#111827;

    color:white;


}




.ulez-final-cta h2{


    color:white;

    font-size:40px;


}





.ulez-final-cta p{


    font-size:18px;

    margin-bottom:30px;


}






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


@media(max-width:900px){


    .ulez-hero-container{


        flex-direction:column;

        text-align:center;


    }



    .ulez-hero h1{


        font-size:38px;


    }



    .ulez-trust{


        justify-content:center;


    }



    .ulez-map-card{


        width:320px;

        height:320px;


    }



    .map-preview{

        height:240px;

    }




    .ulez-feature-grid{


        grid-template-columns:1fr;


    }



}