/* ==========================================
   CONTACT PAGE
   contact.css
========================================== */

.contact-page {

    padding: 60px 20px;

    background: linear-gradient(
        180deg,
        #f9f9f9,
        #ffffff
    );

}

.contact-container {

    max-width: 1100px;

    margin: auto;

}

/* ==========================================
   PAGE TITLE
========================================== */

.contact-page h1 {

    text-align: center;

    font-size: 46px;

    color: #d46a00;

    margin-bottom: 25px;

}

.contact-intro {

    max-width: 850px;

    margin: 0 auto 50px;

    text-align: center;

    font-size: 20px;

    line-height: 1.8;

    color: #555;

}

/* ==========================================
   MAIN CARD
========================================== */

.contact-card {

    display: flex;

    gap: 50px;

    align-items: flex-start;

    background: #ffffff;

    border-radius: 20px;

    padding: 40px;

    box-shadow: 0 10px 30px rgba(0,0,0,.08);

}

/* ==========================================
   PHOTO
========================================== */

.contact-photo {

    flex: 0 0 320px;

    text-align: center;

}

.contact-photo img {

    width: 100%;

    max-width: 320px;

    border-radius: 50%;

    border: 8px solid #f4f4f4;

    box-shadow: 0 8px 20px rgba(0,0,0,.15);

}

/* ==========================================
   DETAILS
========================================== */

.contact-details {

    flex: 1;

}

.contact-details h2 {

    font-size: 38px;

    color: #222;

    margin-bottom: 10px;

}

.designation {

    font-size: 20px;

    color: #777;

    margin-bottom: 35px;

    font-style: italic;

}

/* ==========================================
   CONTACT BLOCK
========================================== */

.contact-block {

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 1px solid #eeeeee;

}

.contact-block:last-child {

    border-bottom: none;

}

.contact-block h3 {

    color: #d46a00;

    font-size: 24px;

    margin-bottom: 12px;

}

.contact-block p {

    font-size: 18px;

    line-height: 1.8;

    color: #444;

}

.contact-block a {

    color: #0066cc;

    text-decoration: none;

    font-weight: 600;

    transition: .3s;

}

.contact-block a:hover {

    color: #d46a00;

}

/* ==========================================
   FOOTER NOTE
========================================== */

.contact-note {

    margin-top: 40px;

    text-align: center;

    background: #fff8ef;

    border-left: 5px solid #d46a00;

    border-radius: 10px;

    padding: 25px;

}

.contact-note p {

    margin: 0;

    font-size: 20px;

    color: #444;

    line-height: 1.8;

}

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

.map-button {

    display: inline-block;

    margin-top: 10px;

    padding: 12px 24px;

    background: #d46a00;

    color: #ffffff !important;

    border-radius: 8px;

    text-decoration: none;

    transition: .3s;

}

.map-button:hover {

    background: #b55400;

}

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

@media (max-width: 768px) {

    .contact-page {

        padding: 40px 15px;

    }

    .contact-page h1 {

        font-size: 34px;

    }

    .contact-intro {

        font-size: 17px;

        margin-bottom: 30px;

    }

    .contact-card {

        flex-direction: column;

        padding: 25px;

        gap: 30px;

    }

    .contact-photo {

        flex: none;

        width: 100%;

    }

    .contact-photo img {

        max-width: 220px;

    }

    .contact-details h2 {

        font-size: 28px;

        text-align: center;

    }

    .designation {

        font-size: 17px;

        text-align: center;

    }

    .contact-block h3 {

        font-size: 22px;

    }

    .contact-block p {

        font-size: 17px;

    }

    .contact-note p {

        font-size: 17px;

    }

}