/*====================================
            CONTACT PAGE
=====================================*/

.contact-page{

    width:90%;

    max-width:1200px;

    margin:70px auto;

}

.contact-page h1{

    text-align:center;

    font-size:48px;

    color:#333;

    margin-bottom:18px;

}

.contact-intro{

    text-align:center;

    max-width:650px;

    margin:0 auto 60px;

    color:#666;

    font-size:20px;

    line-height:1.9;

}


/*====================================
        CONTACT GRID
=====================================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}


/*====================================
        CONTACT CARD
=====================================*/

.contact-item{

    background:white;

    border-radius:22px;

    padding:35px 30px;

    text-align:center;

    box-shadow:0 10px 30px rgba(255,79,135,.12);

    transition:.35s;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:320px;

}

.contact-item:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(255,79,135,.18);

}

.contact-item i{

    font-size:56px;

    color:#ff4f87;

    margin-bottom:20px;

}

.contact-item h3{

    font-size:28px;

    color:#333;

    margin-bottom:15px;

}

.contact-item p{

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

    flex:1;

}


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

.contact-btn{

    display:inline-block;

    background:#ff4f87;

    color:white;

    padding:14px 28px;

    border-radius:12px;

    font-weight:bold;

    transition:.3s;

    margin-top:auto;

}

.contact-btn:hover{

    background:#ff2d70;

    color:white;

}

.contact-note{

    display:block;

    margin-top:20px;

    color:#888;

    font-size:15px;

    font-weight:500;

}


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

@media(max-width:768px){

    .contact-page{

        width:95%;

        margin:50px auto;

    }

    .contact-page h1{

        font-size:38px;

    }

    .contact-intro{

        font-size:17px;

        margin-bottom:40px;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .contact-item{

        min-height:auto;

    }

    .contact-btn{

        width:100%;

    }

}