/*!
Theme Name: alquransunnah
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alquransunnah
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

alquransunnah is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
.header-lower {
    background: #e4e5e4;
    padding: 0.625rem;
    border-radius: 15px;
}
.logo.main_logo img {
    width: 70px;
}
.content_for_banner p {
    color: #fff;
}
.container, .container-lg, .container-md, .container-sm, .container-xl {
	max-width: 1250px;
}

.footer-widget .widget-content .text{
    font-size: 14px;
    padding-right: 30px;
}

/*Donate Form Design*/

.main_donation{
	min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:80px 20px;
    background:var(--theme-color-gray);
    color: var(--cream);
}

:root{
    --ink:#0B2B29;
    --ink-2:#123832;
    --cream:#F4EFE3;
    --cream-dim:#CBC2AC;
    --gold:#C9A961;
    --gold-bright:#E4C989;
    --line: rgba(244,239,227,0.14);
    --field-bg: rgba(244,239,227,0.06);
    --field-bg-focus: rgba(244,239,227,0.10);
    --danger:#E08B7D;
  }


  .card{
    position:relative;
    width:100%;
    max-width:1100px;
    border-radius:28px;
    padding:52px 56px 40px;
    background: var(--theme-color3);
    border:1px solid var(--line);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,169,97,0.06) inset;
    overflow:hidden;
  }

  /* subtle geometric mashrabiya-inspired pattern */
  .pattern{
    position:absolute;
    inset:0;
    opacity:0.05;
    pointer-events:none;
    background-image:
      repeating-conic-gradient(from 45deg, var(--gold) 0deg 5deg, transparent 5deg 90deg);
    background-size: 64px 64px;
    mask-image: radial-gradient(circle at 50% 0%, black, transparent 75%);
  }

  .eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12.5px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color: var(--gold-bright);
    font-weight:700;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background: var(--gold);
  }

  h1{
    font-weight:600;
    font-size:clamp(30px, 4vw, 42px);
    line-height:1.08;
    margin:0 0 10px;
    color: var(--cream);
    letter-spacing:-0.01em;
  }
  h1 em{
    font-style:italic;
    color: var(--gold-bright);
    font-weight:500;
  }

  .sub{
    color: var(--cream-dim);
    font-size:15px;
    line-height:1.6;
    max-width:520px;
    margin:0 0 34px;
  }

  form{
    position:relative;
    display:grid;
    grid-template-columns: 1.1fr 1.2fr 1.1fr auto;
    gap:16px;
    align-items:end;
  }

  .field{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
  }

  label{
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.03em;
    color: var(--cream-dim);
    display:flex;
    align-items:center;
    gap:6px;
  }
  label .req{ color: var(--danger); }

  .info-dot{
    width:15px;height:15px;
    border-radius:50%;
    border:1px solid var(--cream-dim);
    color:var(--cream-dim);
    font-size:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-style:italic;
    font-family:'Fraunces',serif;
    cursor:help;
  }

  .control{
    position:relative;
  }

  select, input{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    background: var(--field-bg);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 16px;
    font-family:'Manrope', sans-serif;
    font-size:14.5px;
    color: var(--cream);
    outline:none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  }
  select{ padding-right:38px; cursor:pointer; color: var(--cream-dim); }
  select.filled{ color: var(--cream); }
  input::placeholder{ color: rgba(203,194,172,0.55); }

  select:hover, input:hover{ border-color: rgba(201,169,97,0.35); }
  select:focus, input:focus{
    background: var(--field-bg-focus);
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,169,97,0.15);
  }

  .control::after{
    content:"";
    position:absolute;
    right:14px; top:50%;
    width:9px; height:9px;
    border-right:1.5px solid var(--cream-dim);
    border-bottom:1.5px solid var(--cream-dim);
    transform: translateY(-65%) rotate(45deg);
    pointer-events:none;
  }
  .control.has-select::after{ display:block; }
  .control.no-arrow::after{ display:none; }

  .amount-control{ position:relative; }
  .amount-control input{ padding-left:28px; }
  .currency{
    position:absolute;
    left:16px; top:50%; transform:translateY(-50%);
    color: var(--gold-bright);
    font-weight:700;
    font-size:14.5px;
    pointer-events:none;
  }

  .amount-chips{
    display:flex;
    gap:6px;
    margin-top:2px;
  }
  .chip{
    flex:1;
    text-align:center;
    padding:6px 4px;
    border-radius:8px;
    border:1px solid var(--line);
    background: transparent;
    color: var(--cream-dim);
    font-size:11.5px;
    font-weight:700;
    cursor:pointer;
    transition: all .15s ease;
    font-family:'Manrope',sans-serif;
  }
  .chip:hover{ border-color: var(--gold); color: var(--gold-bright); }
  .chip.active{ background: var(--gold); border-color: var(--gold); color: var(--ink); }

  button.donate{
    height:50px;
    padding:0 30px;
    border:none;
    border-radius:12px;
    background: linear-gradient(135deg, var(--gold-bright), var(--gold) 70%);
    color: var(--ink);
    font-weight:800;
    font-size:15px;
    letter-spacing:.01em;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    box-shadow: 0 14px 28px -12px rgba(201,169,97,0.55);
    white-space:nowrap;
  }
  button.donate:hover{ transform: translateY(-2px); filter:brightness(1.05); box-shadow: 0 18px 34px -12px rgba(201,169,97,0.7); }
  button.donate:active{ transform: translateY(0); }
  button.donate svg{ width:16px; height:16px; }

  .footnote{
    margin-top:26px;
    padding-top:20px;
    border-top:1px solid var(--line);
    font-size:13.5px;
    color: var(--cream-dim);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
  }
  .footnote a{
    color: var(--gold-bright);
    text-decoration:none;
    font-weight:700;
    border-bottom:1px solid rgba(228,201,137,0.4);
    transition: border-color .15s ease, color .15s ease;
  }
  .footnote a:hover{ color:#fff; border-color:#fff; }

  .badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:11.5px;
    font-weight:700;
    color: var(--gold-bright);
    background: rgba(201,169,97,0.10);
    border:1px solid rgba(201,169,97,0.25);
    padding:4px 10px;
    border-radius:999px;
  }
  .badge svg{ width:11px; height:11px; }

  @media (max-width: 860px){
    .card{ padding:36px 24px 30px; }
    form{ grid-template-columns: 1fr; }
    button.donate{ width:100%; }
  }

  @media (prefers-reduced-motion: reduce){
    * { transition:none !important; }
  }


/*For Ummah, With Sunnah*/
.services_item {
    text-align: center;
    border: 1px solid #a1a1a1;
    border-radius: 40px;
    padding: 30px;
    background: #f4fad1e3;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.services_item:hover {
    border-color: #2e9b4f; /* the green from your icons — change to taste */
    box-shadow: 0 8px 20px rgba(46, 155, 79, 0.2);
    transform: translateY(-5px);
}



.services_icons img {
    width: 60px;
    margin-bottom: 30px;
}
.services_title h3 {
    margin-bottom: 30px;
    padding-bottom: 0;
}
.causes-block .text.mb-30 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-block-five .content .text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 20px;
}



/*Join Us*/


.join-us-section {
    padding: 80px 0;
    background-color: #fbfdfa;
}

.section-title h2 {
    margin-bottom: 10px;
    color: #14351f;
}

.section-title p {
    max-width: 600px;
    margin: 0 auto 50px;
    color: #6b6b6b;
}

.join-us-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.join-us-card {
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(20, 53, 31, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.join-us-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(20, 53, 31, 0.1);
}

.join-us-card .icon {
    font-size: 34px;
    margin-bottom: 18px;
    color: #2e9b4f;
}

.join-us-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: #14351f;
}

/* Light brand green shades — very soft tints */
.shade-1 {
    background-color: #eaf6ee;
    border-radius: 40px 8px 40px 8px;
}

.shade-2 {
    background-color: #e3f4e9;
    border-radius: 8px 40px 8px 40px;
}

.shade-3 {
    background-color: #ddf1e5;
    border-radius: 40px 40px 8px 8px;
}

.shade-4 {
    background-color: #d6eee0;
    border-radius: 8px 8px 40px 40px;
}

@media (max-width: 991px) {
    .join-us-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .join-us-row {
        grid-template-columns: 1fr;
    }
}
section.blog-section {
    background: #eef4c8;
}