/*
Theme Name: Makeba Theme
Theme URI: http://gassamamadiara.com
Author: Madiara Gassama<gassama.madiara@gmail.com>
Author URI: http://gassamamadiara.com
Description: Thème WordPress personnalisé pour Makeba.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: makeba-theme
*/

    /* ---------- Root / fonts / palette ---------- */
    :root{
      --color-bg: #ffffff;
      --color-text: #0F172A;
      --color-muted: #334155;
      --brand-500: #0093FB; /* primary used in original */
      --brand-600: #007BFF; /* fallback primary */
      --card-bg: #F8FAFC;
      --white: #ffffff;
      --shadow-1: 0 4px 40px rgba(0,0,0,0.05);
      --radius-lg: 16px;
    }

    /* Use Inter as primary; Benton kept as fallback name */
    html,body{height:100%;}
    body {
      margin:0;
      background:var(--color-bg);
      color:var(--color-text);
      font-family: "Inter", BentonSans, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      -webkit-text-size-adjust:100%;
    }

    a { text-decoration: none; color: inherit; }

    /* ---------- NAVBAR (pixel perfect) ---------- */
    
    .makeba-menu-btn {
      color: #E2E8F0;
      font-weight:500;
      margin-left: .5rem;
      padding:.35rem .75rem;
      border-radius:8px;
    }
    .makeba-menu-btn:hover { color:#fff; text-decoration:none; }

    .btn-lang {
      background: transparent;
      color: #E2E8F0;
      border: 1px solid #475569;
      padding: .35rem .6rem;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-weight:500;
    }
    .btn-lang img { height:18px; width:auto; }

    /* ---------- HEADER / FORM (pixel sizes preserved) ---------- */
    .contact-header-section {
      padding: 80px 16px;
      text-align: center;
    }

    .contact-title {
      font-size: 48px;
      line-height: 56px;
      font-weight: 500;
      color: var(--color-text);
      margin-bottom: 12px;
      font-family: "Inter", sans-serif;
    }

    .contact-subtitle {
      font-size: 30px;
      line-height: 36px;
      color: var(--color-muted);
      margin-bottom: 40px;
      font-weight:400;
    }

    /* Form container: mimic 836px max width */
    .contact-form-wrapper {
      max-width: 836px;
      margin: 0 auto;
      width:100%;
    }

    .contact-form {
      background: transparent;
      display:flex;
      flex-direction:column;
      gap:24px;
    }

    .form-label {
      font-size:18px;
      font-weight:500;
      color:#475569;
      margin-bottom:8px;
      display:block;
      text-align: left;
      padding-left: 1%;
    }

    .form-control-custom {
      background: var(--white);
      border: 2px solid #E2E8F0;
      border-radius: 16px;
      padding: 16px;
      font-size:18px;
      line-height:28px;
      color:var(--color-text);
      resize: vertical;
    }
    .form-control-custom::placeholder { color:#94A3B8; }

    .form-control-custom:focus {
      box-shadow: 0 0 0 4px rgba(0,147,251,0.12);
      border-color: var(--brand-500);
      outline: none;
    }
.btn-primary-large {
  background: var(--brand-500);
  padding: 20px;
  color: #fff;
  border: none;
  border-radius: 16px;
  font-size: 20px;
  font-weight: 500;
  width: 100%;
  cursor: pointer;
  transition: all .2s ease;
}

/* Our custom disabled state */
.btn-primary-large.is-disabled {
  background: #CBD5E1 !important;
  color: #64748B !important;
  cursor: not-allowed;
  opacity: 1;
}

/* Prevent hover effect */
.btn-primary-large.is-disabled:hover {
  background: #CBD5E1 !important;
}




    /* attach file row */
    .attach-file-row {
      display:flex;
      align-items:center;
      gap:12px;
      cursor:pointer;
      margin-top:-4px;
    }
    .icon-circle {
      width:40px;
      height:40px;
      border-radius:999px;
      background:transparent;
      display:flex;
      align-items:center;
      justify-content:center;
      border: 1px solid transparent;
    }
    .attach-text {
      color:#1E40AF;
      font-size:18px;
      font-weight:400;
    }
    /* hide actual file input */
    .input-file { display:none; }

    .agree-row {
      display:flex;
      gap:12px;
      align-items:center;
      font-size:14px;
      color:var(--color-muted);
    }

    /* ---------- CONTACT OPTIONS (cards) ---------- */
    .contact-options {
      margin-top: 56px;
      display:flex;
      gap:32px;
      justify-content:center;
      flex-wrap:wrap;
      padding: 85px 24px;
    }

    .contact-card {
      width: 548px;
      min-height: 360px;
      background: var(--white);
      border-radius: 20px;
      padding: 40px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:20px;
    }

    .icon-line {
      width:56px;
      height:56px;
      border-radius:999px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#fff;
    }

    .card-title {
      font-size:36px;
      font-weight:500;
      color:#334155;
      text-align:center;
      margin:0;
      font-family:"Inter",sans-serif;
    }

    .card-description {
      font-size:24px;
      line-height:32px;
      color:#334155;
      text-align:center;
      max-width:468px;
      margin:0;
      font-weight:400;
    }

    .btn-option {
      width:468px;
      max-width:100%;
      background: var(--brand-500);
      border-radius:16px;
      padding:18px;
      border:none;
      color:#fff;
      font-size:20px;
      font-weight:500;
      cursor:pointer;
    }

    /* phone input style inside card */
    .phone-input {
      width:468px;
      max-width:100%;
      height:66px;
      background:#fff;
      border:2px solid #E2E8F0;
      border-radius:16px;
      display:flex;
      align-items:center;
      padding:8px 16px;
    }
    .phone-flag { display:flex; align-items:center; gap:8px; }
    .phone-flag img { width:24px; height:auto; }

    .phone-input input {
      border:none;
      outline:none;
      flex:1;
      font-size:18px;
    }

    /* ---------- FAQ ---------- */
    .faq-section {
      padding: 80px 24px;
      text-align:center;
    }
    .faq-title {
      font-size:48px;
      font-weight:600;
      margin-bottom:32px;
      color:var(--color-text);
    }

    .faq-box {
      width:1128px;
      max-width:100%;
      margin:0 auto;
      background:#fff;
      padding:24px;
      border-radius:20px;
      border:1px solid rgba(0,0,0,0.06);
      display:flex;
      flex-direction:column;
      gap:16px;
    }

    /* Small tweak for bootstrap accordion buttons */
    .accordion-button {
      font-size:18px;
      font-weight:500;
      color:var(--color-text);
    }

    /* ---------- WEBSITE BANNER ---------- */

    /* ---------- FOOTER ---------- */

    /* ---------- Responsive adjustments (mobile-first then breakpoints) ---------- */
    @media (max-width: 991.98px) {
      .contact-title { font-size:40px; line-height:48px; }
      .contact-subtitle { font-size:22px; line-height:28px; margin-bottom:28px; }
      .card-title { font-size:28px; }
      .card-description { font-size:18px; line-height:26px; }
    }

    @media (max-width: 767.98px) {
      .contact-header-section { padding: 40px 16px; }
      .contact-title { font-size:32px; line-height:40px; }
      .contact-subtitle { font-size:18px; line-height:24px; margin-bottom:20px; }
      .contact-card { padding:28px; }
      .contact-options { gap:20px; padding:24px; }
      .btn-option { width:100%; }
      .phone-input { width:100%; }
      .attach-text { font-size:16px; }
      .faq-section { padding:40px 16px; }
      .faq-box { padding:16px; }
      .contact-form-wrapper { padding:0 12px; }
    }

    .form-group-custom {
        width: 100%;
    }

    .form-control-custom {
        width: 100%;
        padding: 14px 18px;
        border: 1px solid #E1E1E1;
        border-radius: 12px;
        font-size: 16px;
        outline: none;
        transition: all 0.3s ease;
    }

    /* Focus state */
    .form-control-custom:focus {
        border-color: #3C5AFE;
        box-shadow: 0 0 0 3px rgba(60, 90, 254, 0.15);
    }

    /* Mobile responsive */
    @media (max-width: 575px) {
        .form-control-custom {
            font-size: 14px;
            padding: 12px 14px;
            border-radius: 10px;
        }
    }

    


.justify-content-right {
  align-items: right !important;
}