/*=========================================================
    CCT PAGLINGAP FOUNDATION
    CONTACT SECTION
    Photoshop Edition Version 1
==========================================================*/

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

.contact-section{

    position:relative;

    overflow:hidden;

    padding:110px 0;

    background-image:url("../../images/Paglingap_web bg6.jpg");

    background-repeat:no-repeat;

    background-position:left center;

    background-size:cover;

    border-bottom:6px solid #FFD400;

}

/*=========================================================
    BLUE OVERLAY
==========================================================*/

.contact-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(0,0,0,0) 0%,

        rgba(0,126,199,.15) 38%,

        rgba(0,145,220,.55) 58%,

        rgba(0,155,220,.88) 100%

    );

}

/*=========================================================
    LEFT CONTENT
==========================================================*/
.contact-content{

    color:#fff;

    max-width:520px;

    margin-left:auto;

    padding-right:40px;

}


.contact-content h2{

    font-size:56px;

    font-weight:800;

    color:#FFD400;

    margin-bottom:20px;

}


.contact-intro{

    font-size:18px;

    line-height:1.8;

    margin-bottom:40px;

}


.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:30px;

}


.contact-item i{

    color:#FFD400;

    font-size:26px;

    margin-top:5px;

}


.contact-item h5{

    margin-bottom:6px;

    color:#fff;

    font-size:20px;

    font-weight:700;

}


.contact-item p{

    margin:0;

    line-height:1.8;

    font-size:16px;

}


/*=========================================================
    CONTACT CARD
==========================================================*/
.contact-card{

    background:#fff;

    border-radius:28px;

    padding:45px;

    max-width:520px;

    margin-left:auto;

    box-shadow:

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

        0 35px 70px rgba(0,0,0,.10);

}


.contact-card h2{

    text-align:center;

    font-size:42px;

    font-weight:800;

    color:#333;

    margin-bottom:8px;

}


.contact-card p{

    text-align:center;

    color:#888;

    margin-bottom:35px;

}


/*=========================================================
    FORM
==========================================================*/

.contact-card .form-control{

    height:58px;

    border-radius:18px;

    border:1px solid #ddd;

    padding:15px;

    font-size:15px;

    box-shadow:none;

    transition:.30s;

}


.contact-card textarea.form-control{

    height:190px;

    resize:none;

}


.contact-card .form-control:focus{

    border-color:#1AAE55;

    box-shadow:0 0 12px rgba(26,174,85,.20);

}


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

.btn-send{

    background:#25A944;

    color:#fff;

    font-weight:700;

    padding:14px 35px;

    border-radius:10px;

    border:none;

    transition:.30s;

    display:block;

    margin:auto;

}


.btn-send:hover{

    background:#198D37;

    color:#fff;

    transform:translateY(-3px);

}


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

@media(max-width:1200px){

.contact-content{

padding-right:20px;

}

.contact-card{

padding:35px;

}

}


@media(max-width:992px){

.contact-section{

text-align:center;

}

.contact-content{

padding-right:0;

margin-bottom:50px;

}

.contact-item{

justify-content:center;

text-align:left;

}

}


@media(max-width:768px){

.contact-section{

padding:70px 0;

}

.contact-content h2{

font-size:38px;

}

.contact-card{

padding:30px;

}

.contact-card h2{

font-size:34px;

}

}


@media(max-width:576px){

.contact-content h2{

font-size:30px;

}

.contact-intro{

font-size:15px;

}

.contact-card{

padding:25px;

}

.contact-card h2{

font-size:28px;

}

.contact-card .form-control{

height:50px;

}

.contact-card textarea.form-control{

height:150px;

}

}

.contact-card{

    animation:floatCard 4s ease-in-out infinite;

}

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}