/* =====================================================
   CONTACT.CSS — Auxton Pharmaceuticals
   Works alongside style.css (header/footer handled there)
   ===================================================== */

/* ── HERO IMAGE ── */
.con {
  width: 100%;
  overflow: hidden;
}
.con img {
  width: 100%;
  height: auto;
  display: block;
}



/* ── BREADCRUMB ── */
.breadcrumb {
  font-size: 13px;
  color: #888;
}
.breadcrumb a {
  color: #888;
  text-decoration: none;
}
.breadcrumb a:hover { color: #555; }
.breadcrumb span { margin: 0 5px; }

.contact-map-section{
    padding: 80px 20px;
    background: #f8f9fb;
}

.contact-container{
    max-width: 1200px;
    margin: auto;
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* Left Form */
.contact-form{
    flex: 1;
    background: #fff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.contact-form h2{
    font-size: 32px;
    color: #003366;
    margin-bottom: 25px;
}

.contact-form form{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form input,
.contact-form textarea{
    width: 100%;
    padding: 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    font-size: 15px;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color: #0056b3;
}

.contact-form button{
    background: #0056b3;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
}

.contact-form button:hover{
    background: #003d80;
}

/* Right Map */
.contact-map{
    flex: 1;
    min-height: 500px;
}

.contact-map iframe{
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

/* Responsive */
@media(max-width:768px){

    .contact-container{
        flex-direction: column;
    }

    .contact-map{
        min-height: 120px;
    }

    .contact-form h2{
        font-size: 26px;
    }
}