/* ==========================================================
   CodeCradle Solutions
   Premium Hero Section
   Production Version
========================================================== */


/* ===============================
   HERO SECTION
================================ */

.hero{

    min-height:78vh;

    display:flex;

    align-items:flex-start;

    position:relative;

    overflow:hidden;

    padding:55px 0 70px;


    background:

    radial-gradient(
        circle at top right,
        rgba(232,178,76,.22),
        transparent 35%
    ),

    linear-gradient(
        135deg,
        #FFFDF8,
        #F8F4EC
    );

}




/* ===============================
   HERO GRID
================================ */


.hero-grid{


    display:grid;


    grid-template-columns:

    1.05fr .95fr;


    align-items:center;


    gap:35px;


}




/* ===============================
   HERO CONTENT
================================ */


.hero-badge{


    display:inline-flex;


    align-items:center;


    padding:8px 22px;


    border-radius:50px;


    background:


    rgba(232,178,76,.18);


    color:#0B2D5C;


    font-weight:700;


    font-size:14px;


    margin-bottom:22px;


}






.hero h1{


    font-size:58px;


    font-weight:800;


    color:#0B2D5C;


    line-height:1.12;


    margin-bottom:22px;


    letter-spacing:-1px;


}





.hero h1 span{


    color:#E8B24C;


}






.hero p{

    font-size:18px;

    line-height:1.8;

    color:#1F2937;

    max-width:560px;

    margin-bottom:32px;

}








/* ===============================
   BUTTON GROUP
================================ */


.hero-buttons{


    display:flex;


    gap:18px;


    flex-wrap:wrap;


}






/* ===============================
   HERO IMAGE
================================ */


.hero-image{


    position:relative;


    display:flex;


    justify-content:center;


    align-items:center;


}






.hero-image img{


    width:100%;


    max-width:520px;


    height:auto;


    object-fit:contain;


    display:block;


    animation:

    heroFloat 6s ease-in-out infinite;



    filter:


    drop-shadow(

        0 25px 45px rgba(11,45,92,.18)

    );


}




@keyframes heroFloat{


0%,
100%{


    transform:translateY(0);


}



50%{


    transform:translateY(-15px);


}


}
/* ===============================
   FLOATING CARDS
================================ */


.hero-card{


    position:absolute;


    display:flex;


    align-items:center;


    gap:10px;


    background:#ffffff;


    padding:16px 24px;


    border-radius:18px;


    box-shadow:


    0 15px 35px rgba(0,0,0,.12);



    font-weight:700;


    color:#0B2D5C;


    white-space:nowrap;


    z-index:2;


}






.hero-card i{


    color:#E8B24C;


}






.hero-card.one{


    top:18%;


    right:-10px;


}






.hero-card.two{


    bottom:18%;


    left:-10px;


}









/* ===============================
   BACKGROUND SHAPES
================================ */



.hero::before{


    content:"";


    position:absolute;


    width:280px;


    height:280px;


    background:


    rgba(232,178,76,.12);



    border-radius:50%;


    top:-120px;


    left:-120px;


}







.hero::after{


    content:"";


    position:absolute;


    width:180px;


    height:180px;


    background:


    rgba(11,45,92,.05);



    border-radius:50%;


    bottom:-80px;


    right:-50px;


}








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


@media(max-width:1100px){



.hero{


    min-height:0;


}




.hero-grid{


    grid-template-columns:1fr;


    text-align:center;


}




.hero h1{


    font-size:48px;


}





.hero p{


    margin-left:auto;


    margin-right:auto;


}




.hero-buttons{


    justify-content:center;


}




.hero-image{


    margin-top:40px;


}




.hero-card{


    display:none;


}



}




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


@media(max-width:900px){



.hero{


    min-height:0;


    padding:70px 0 50px;


    background:


    linear-gradient(

        135deg,

        #FFFDF8,

        #F8F4EC

    );


}




.hero-grid{


    display:flex;


    flex-direction:column;


    gap:35px;


    text-align:center;


}




.hero h1{


    font-size:38px;


    line-height:1.15;


}





.hero p{


    font-size:17px;


    line-height:1.7;


}





.hero-buttons{


    flex-direction:column;


    width:100%;


}




.hero-buttons .btn{


    width:100%;


    justify-content:center;


}




.hero-image{


    width:100%;


    display:flex;


    justify-content:center;


    order:2;


}




.hero-image img{


    width:85%;


    max-width:300px;


    margin:auto;


}




.hero-card{


    display:none;


}



}
/* ===============================
   SMALL MOBILE DEVICES
================================ */


@media(max-width:576px){



.hero{


    padding:60px 0 45px;


}




.hero h1{


    font-size:32px;


    letter-spacing:-0.5px;


}





.hero p{


    font-size:16px;


    line-height:1.6;


}





.hero-badge{


    font-size:13px;


    padding:7px 18px;


}




.hero-buttons{


    gap:14px;


}





.hero-image img{


    width:90%;


    max-width:280px;


}





}





/* ===============================
   EXTRA SMALL DEVICES
================================ */


@media(max-width:360px){



.hero{


    padding:50px 0 40px;


}




.hero h1{


    font-size:28px;


}




.hero p{


    font-size:15px;


}




.hero-image img{


    max-width:240px;


}



}