/* about skin — CSS VERBATIM from contact-us.html comp, scoped under body.galv-about. */



/* ===== CSS VARIABLES ===== */
body.galv-about {
    --bg-navy:       #13217c;
    --primary-blue:  #3b5bff;
    --cta-magenta:   #cc00cc;
    --accent-blue:   #e6ebff;
    --text-white:    #fffdfe;
    --text-dark:     #333;
    --text-gray:     #808080;
    --font-heading:  'Poppins', sans-serif;
    --font-body:     'Inter', sans-serif;
    --container-width: 1280px;
}

body.galv-about *{ margin: 0; padding: 0; box-sizing: border-box; }

body.galv-about .container{
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

body.galv-about .text-center{ text-align: center; }

body.galv-about h1, body.galv-about h2, body.galv-about h3, body.galv-about h4, body.galv-about h5, body.galv-about h6{
    font-family: var(--font-heading);
    font-weight: 600;
}

/* ===== BUTTONS ===== */
body.galv-about .btn{
    display: inline-block;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
    border: none;
    font-family: var(--font-heading);
    line-height: 1.5;
}

body.galv-about .btn-primary{
    background-color: var(--cta-magenta);
    color: var(--text-white);
}
body.galv-about .btn-primary:hover{ background-color: #a600a6; }

body.galv-about .btn-secondary{
    background-color: #3b5bff;
    color: var(--text-white);
    text-align: center;
}
body.galv-about .btn-secondary:hover{ background-color: #13217c; }
}


/* ===== SECTION HEADER ===== */
body.galv-about .section-header h2{
    font-size: 36px;
    color: #3b5bff;
    margin-bottom: 15px;
    line-height: 1.3;
}
body.galv-about .section-header p{
    font-size: 18px;
    color: var(--text-dark);
    line-height: 1.6;
    font-family: var(--font-body);
}

/* =========================================
   CONTACT HERO — navy bg
   ========================================= */
body.galv-about .contact-hero{
    background-color: var(--bg-navy);
    color: var(--text-white);
    padding: 80px 0 100px;
    text-align: center;
}

body.galv-about .contact-hero-content{
    max-width: 800px;
    margin: 0 auto;
}

body.galv-about .contact-hero-content h1{
    font-size: 42px;
    line-height: 56px
    margin-bottom: 20px;
    color: var(--text-white);
    overflow-wrap: break-word;
}

body.galv-about .contact-hero-content p{
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 30px;
    color: var(--text-white);
    font-family: var(--font-body);
}

body.galv-about .contact-hero-actions{
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;   /* ← centers buttons */
    margin-top: 30px;
}


/* =========================================
   CONTACT INTRO — white bg
   ========================================= */
body.galv-about .contact-intro{
    background-color: var(--text-white);
    padding: 60px 0;
}
body.galv-about .contact-intro .section-header p{
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 500;
    color: var(--text-dark);
    max-width: 800px;
    margin: 0 auto;
}

/* =========================================
   WHY CONTACT US — accent-blue bg
   ========================================= */
body.galv-about .why-contact-us{
    background-color: var(--accent-blue);
    padding: 60px 0;
}
body.galv-about .why-contact-us .section-header{
    margin-bottom: 40px;
}

body.galv-about .why-contact-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

body.galv-about .why-contact-card{
    background: var(--text-white);
    border-radius: 20px;
    padding: 40px 30px;
    transition: all .2s ease;
    border: 2px solid transparent;
}
body.galv-about .why-contact-card:hover{ border-color: #a0aeff; }

body.galv-about .why-contact-card h3{
    font-size: 20px;
    color: var(--primary-blue);
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.3;
}
body.galv-about .why-contact-card p{
    font-size: 18px;
    color: var(--text-dark);
    line-height: 1.6;
    font-family: var(--font-body);
}

/* =========================================
   CONTACT FORM — exact from USA page
   Navy bg, image left + Zoho iframe right
   ========================================= */
body.galv-about .contact-form{
    padding: 60px 0;
    background-color: var(--bg-navy);
}

body.galv-about .contact-form-wrapper{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

body.galv-about .contact-form-left{
    display: flex;
    align-items: center;
    justify-content: center;
}

body.galv-about .contact-form-left img{
    width: 100%;
    height: auto;
    border-radius: 20px;
}

body.galv-about .contact-form-right{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* =========================================
   CONTACT INFO CARDS — white bg
   Below the form, 3 cards in a row
   ========================================= */
body.galv-about .contact-details{
    background-color: var(--text-white);
    padding: 60px 0;
}

body.galv-about .contact-details .section-header{
    margin-bottom: 40px;
}

body.galv-about .contact-info-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 380px));
    gap: 24px;
    justify-content: center;
}

body.galv-about .contact-info-card{
    background: var(--accent-blue);
    border-radius: 20px;
    padding: 30px;
    border: 2px solid transparent;
    transition: border-color .2s ease;
}
body.galv-about .contact-info-card:hover{ border-color: #a0aeff; }

body.galv-about .contact-info-card h3{
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 16px;
    line-height: 1.3;
}

body.galv-about .contact-info-list{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
body.galv-about .contact-info-list li{
    font-size: 16px;
    color: var(--text-dark);
    font-family: var(--font-body);
    line-height: 1.5;
}
body.galv-about .contact-info-list li strong{
    font-weight: 600;
    margin-right: 6px;
}
body.galv-about .contact-info-list a{
    color: var(--primary-blue);
    text-decoration: none;
    transition: color .3s ease;
}
body.galv-about .contact-info-list a:hover{ color: #13217c; text-decoration: underline; }

/* Office hours */
body.galv-about .office-hours-list{
    list-style: none;
    margin-bottom: 12px;
}
body.galv-about .office-hours-list li{
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    color: var(--text-dark);
    font-family: var(--font-body);
    padding: 10px 0;
    border-bottom: 1px solid rgba(59, 91, 255, .15);
}
body.galv-about .office-hours-list li:last-child{ border-bottom: none; }

body.galv-about .office-hours-note{
    font-size: 13px;
    color: var(--text-gray);
    font-style: italic;
    font-family: var(--font-body);
}

/* CTA card — navy */
body.galv-about .contact-info-card.cta-card{
    background: #e6ebff;
    border-color: transparent;
}
body.galv-about .contact-info-card.cta-card:hover{ border-color: #a0aeff; }
body.galv-about .contact-info-card.cta-card h3{ color: #3b5bff; }
body.galv-about .contact-info-card.cta-card p{
    font-size: 16px;
    color: #333333;
    margin-bottom: 20px;
    line-height: 26px;
    font-family: var(--font-body);
}

body.galv-about .contact-info-actions{
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* =========================================
   CONTACT CLOSING — navy bg
   ========================================= */
body.galv-about .contact-closing{
    background-color: var(--bg-navy);
    padding: 60px 0;
}
body.galv-about .closing-content h2{
    font-size: 36px;
    color: var(--text-white);
    margin-bottom: 16px;
    line-height: 1.3;
}
body.galv-about .closing-content p{
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 500;
    color: #fffdfe;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    body.galv-about .why-contact-grid{ grid-template-columns: repeat(2, 1fr); }
    body.galv-about .contact-form-wrapper{ grid-template-columns: 1fr; }
    body.galv-about .contact-info-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    body.galv-about .contact-hero{ padding: 60px 0 80px; }
    body.galv-about .contact-hero-content h1{ font-size: 32px; }
    body.galv-about .contact-hero-content p{ font-size: 16px; }
    body.galv-about .contact-hero-actions{
        flex-direction: column;
        align-items: center;
    }
    body.galv-about .section-header h2, body.galv-about .closing-content h2{ font-size: 28px; }
    body.galv-about .contact-intro .section-header p{ font-size: 18px; }
}

@media (max-width: 640px) {
    body.galv-about .why-contact-grid{ grid-template-columns: 1fr; }
    body.galv-about .contact-info-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    body.galv-about .contact-hero-content h1{ font-size: 28px; }
    body.galv-about .section-header h2, body.galv-about .closing-content h2{ font-size: 24px; font-weight: 600; }
    body.galv-about .closing-content p{ font-size: 18px; }
    body.galv-about .contact-intro .section-header p{ font-size: 18px; }
    body.galv-about .btn{ padding: 10px 20px; font-size: 14px; }
}

@media (max-width: 320px) {
    body.galv-about .contact-hero-content h1{ font-size: 20px; }
}

/* Global h2 color */
body.galv-about h2{
    color: var(--primary-blue);
    margin-bottom: 15px;
    font-size: 36px;
}

/* Override for dark sections */
body.galv-about .contact-hero h1, body.galv-about .contact-closing h2{
    color: var(--text-white);
}