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

   UNICORNER HOMEPAGE

   home.css

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





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

   FRONT PORCH

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



.front-porch{

    background:#faf7f2;

    padding:95px 20px 80px;

    text-align:center;

}



.front-porch .wrap{

    max-width:700px;

    margin:0 auto;

}



.front-porch h2,

.corner-section h2,

.closing-section h2{

    font-family:Georgia,"Times New Roman",serif;

    font-size:2.75rem;

    color:#3d3228;

    margin-bottom:34px;

    line-height:1.2;

}



.front-porch p{

    font-size:1.18rem;

    line-height:2;

    color:#4f4f4f;

    margin:0 0 1.6rem;

}



.welcome-close{

    font-size:1.28rem;

    color:#3d3228;

    margin-top:2.3rem;

}





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

   GOLD HEART DIVIDER

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



.porch-divider,

.closing-divider{



    display:flex;

    align-items:center;

    justify-content:center;

    gap:20px;



    max-width:520px;

    margin:70px auto;



}



.porch-divider span:first-child,

.porch-divider span:last-child,

.closing-divider span:first-child,

.closing-divider span:last-child{



    flex:1;

    height:1px;

    background:#c9a227;



}



.heart{



    color:#c9a227;

    font-size:1.35rem;



}







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

   EXPLORE OUR CORNERS

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



.corner-section{



    background:#faf7f2;

    padding:20px 20px 100px;



}



.corner-section .wrap{



    max-width:1280px;

    margin:0 auto;



}



.corner-intro{



    max-width:720px;

    margin:0 auto 60px;



    text-align:center;



    color:#666;

    font-size:1.15rem;

    line-height:1.8;



}



.corner-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:2.5rem;

}







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

   CARD

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



.corner-card{



    background:#fffdf9;



    border-radius:26px;



    overflow:hidden;



    display:flex;

    flex-direction:column;



    box-shadow:0 14px 34px rgba(0,0,0,.08);



    transition:

        transform .35s ease,

        box-shadow .35s ease;



}



.corner-card:hover{



    transform:translateY(-10px);



    box-shadow:0 22px 48px rgba(0,0,0,.14);



}



.corner-card img{



    width:100%;



    height:340px;



    object-fit:cover;



    transition:transform .65s ease;



}



.corner-card:hover img{



    transform:scale(1.05);



}







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

   CARD CONTENT

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



.corner-content{



    display:flex;

    flex-direction:column;



    flex:1;



    padding:30px;



}



.corner-card h3{



    font-family:Georgia,"Times New Roman",serif;



    font-size:1.95rem;



    color:#3d3228;



    margin:0 0 16px;



}



.corner-card p{



    color:#555;



    font-size:1.06rem;



    line-height:1.8;



    margin:0 0 20px;



    flex-grow:1;



}







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

   BUTTONS

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



.corner-button{



    display:flex;

    justify-content:center;

    align-items:center;



    width:260px;

    min-height:52px;



    margin-top:auto;



    padding:14px 22px;



    background:#c9a227;

    color:#fff !important;



    border-radius:999px;



    font-weight:600;

    text-decoration:none;

    text-align:center;



    transition:

        background .25s ease,

        transform .25s ease,

        box-shadow .25s ease;



    box-sizing:border-box;

}



.corner-button:hover{



    background:#b38d18;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 10px 20px rgba(0,0,0,.18);



}







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

   HERO BUTTON

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



.hero-button{



    transition:

        background .25s ease,

        color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;



}



.hero-button:hover{



    background:#b38d18;



    color:#ffffff;



    transform:translateY(-3px);



    box-shadow:0 10px 24px rgba(0,0,0,.18);



}







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

   UNTIL NEXT TIME

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



.closing-section{



    background:#f6f1e8;



    padding:85px 20px 95px;



    text-align:center;



}



.closing-section .wrap{



    max-width:760px;



    margin:0 auto;



}



.closing-section p{



    color:#555;



    font-size:1.16rem;



    line-height:2;



    margin-bottom:1.6rem;



}



.closing-highlight{



    margin-top:35px;



    font-size:1.3rem;



    color:#3d3228;



}







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

   RESPONSIVE

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



@media (max-width:950px){



    .corner-grid{



        grid-template-columns:1fr;



    }



    .corner-card img{



        height:300px;



    }



}





@media (max-width:650px){



    .front-porch{



        padding:70px 18px 60px;



    }



    .corner-section{



        padding:10px 18px 70px;



    }



    .closing-section{



        padding:70px 18px;



    }



    .front-porch h2,

    .corner-section h2,

    .closing-section h2{



        font-size:2.2rem;



    }



    .front-porch p,

    .corner-intro,

    .closing-section p{



        font-size:1rem;



    }



    .corner-card img{



        height:250px;



    }



    .corner-button{



        width:100%;



    }



}