/* =========================================================
   cou.org.np - mobile & speed fixes
   Web House Nepal, 2026-10-23
   Loaded after style.css so it wins. Everything except the
   donation chart block is inside phone/tablet media queries,
   so the desktop layout is unchanged.
   ========================================================= */

/* ---------- Donation breakdown chart (all screens) ----------
   Replaces the AnyChart pie, whose library no longer loads. */
.cou-donut-wrap{text-align:center;padding:10px 0}
.cou-donut-title{font-size:18px;margin-bottom:18px}
.cou-donut{position:relative;width:220px;height:220px;margin:0 auto 20px;border-radius:50%;background:conic-gradient(#f39c12 0 40%,#6c3483 0 75%,#27ae60 0 83%,#2e86c1 0 88%,#e74c3c 0 93%,#16a085 0 98%,#95a5a6 0 100%)}
.cou-donut::after{content:"";position:absolute;top:27%;left:27%;right:27%;bottom:27%;border-radius:50%;background:#fff}
.cou-donut span{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:#333;line-height:1.2}
.cou-donut small{font-size:11px;font-weight:400;color:#777}
.cou-legend{list-style:none;padding:0;margin:0 auto;max-width:330px;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;text-align:left;font-size:14px}
.cou-legend li{display:flex;align-items:center}
.cou-legend i{flex:0 0 12px;height:12px;border-radius:3px;margin-right:8px}
.cou-legend b{margin-left:auto;padding-left:6px}

/* ---------- Phones and tablets (menu is collapsed below 992px) ---------- */
@media (max-width: 991.98px){
/* Fixed backgrounds stutter on phones and don't work on iPhone */
section, footer, header, .foot-back, .donation-help, .background4, .background5{background-attachment:scroll !important}
/* Open menu: solid panel, scrolls if long, bigger tap targets */
.navbar-collapse{background:#fff;max-height:calc(100vh - 140px);overflow-y:auto;-webkit-overflow-scrolling:touch;margin-top:8px;border-top:1px solid #eee;padding:4px 0 10px}
.navbar-nav .nav-link{padding:11px 6px !important;font-size:16px;border-bottom:1px solid #f1f1f1}
.navbar-nav .dropdown-menu{position:static !important;float:none;transform:none !important;width:100%;margin:0 0 6px;border-radius:6px}
.navbar-nav .dropdown-item{padding:11px 16px;white-space:normal}
/* Page content starts right under the fixed header. Its height changes with
   screen width, so a small script in the layout measures it into --cou-header-h */
#home{padding-top:var(--cou-header-h,140px)}
.branch-cover{margin-top:var(--cou-header-h,140px)}
/* Scroll-in animations off: they hid content and pushed it off-screen sideways */
.wow{visibility:visible !important;-webkit-animation:none !important;animation:none !important}
/* Safety net against sideways scrolling */
html, body{overflow-x:hidden}
/* Slider: crop instead of stretching the photos */
.slider .carousel-item{height:380px}
.slider .carousel-item img{object-fit:cover}
}

/* ---------- Phones ---------- */
@media (max-width: 767.98px){
/* Top contact bar */
.header-top{padding:6px 0}
.header-top .icon{display:none}
.header-top .row{margin-left:0;margin-right:0}
.header-top .contact-top{width:100%;margin:0 !important;display:flex;justify-content:center;flex-wrap:wrap;font-size:13px}
.header-top .contact-top a{margin:2px 9px !important}
/* Header and logo */
header.background-1 .navbar{padding-top:6px;padding-bottom:6px}
header.background-1 .navbar > .container{padding-left:12px;padding-right:12px}
.navbar-brand{margin-right:0}
.navbar-brand img{width:150px;height:auto}
.navbar-toggler{padding:8px 10px;margin-left:auto}
#home{padding-top:var(--cou-header-h,113px)}
.branch-cover{margin-top:var(--cou-header-h,113px)}
/* Home slider */
.slider .carousel-item{height:240px}
.slider .carousel-caption{left:8%;right:8%;bottom:28px;padding-bottom:0}
.slider .carousel-caption.text-left, .slider .carousel-caption h1, .slider .carousel-caption h4{text-align:center !important}
.slider .carousel-caption h4{font-size:12px;letter-spacing:1px}
.slider .carousel-caption h1{font-size:24px;margin-bottom:12px}
.slider .double-button{display:flex;justify-content:center;flex-wrap:wrap}
.slider .double-button a{margin:0 5px}
.slider .double-button .btn{padding:8px 16px;font-size:14px;margin:0}
.carousel-control-prev, .carousel-control-next{width:12%}
/* Intro text and the three cards */
#sponsouring .home-2{padding-left:16px;padding-right:16px}
#sponsouring .home-2 > p{font-size:15px;line-height:1.65}
#sponsouring .home-2 > .row{margin-left:0;margin-right:0}
#sponsouring .border-right-left{border:1px solid #e3e3e3 !important;border-radius:14px;margin-bottom:18px;padding:0}
#sponsouring .card, #sponsouring .card-body{height:auto !important;min-height:0 !important}
#sponsouring .card{border:0;padding:18px 12px}
#sponsouring .card-body .btn{padding:8px 20px}
.we-are p{text-align:left !important}
/* Inner pages: readable text, photos full width */
.about-us .history p, .about-us .history li, .page-activities .article p, .page-activities .article li, .testimonial-text p{font-size:15px !important;line-height:1.65 !important;text-align:left !important}
.about-us .history span, .page-activities .article span{font-size:inherit !important}
figure figcaption p{font-size:13px !important}
.news-photo-1{float:none !important;width:100% !important;height:auto !important;margin:0 0 15px !important}
/* Activities slider */
.activity{margin-left:auto !important;margin-right:auto !important}
.activities-card{width:auto !important;min-height:0 !important;margin-left:8px;margin-right:8px}
.activities-card .card p{font-size:15px}
.activities-card .btn{padding:7px 18px;font-size:14px}
/* Where does your money go */
.your-money{padding-top:30px;padding-bottom:30px}
.your-money h5{font-size:22px}
.your-money h6{font-size:17px;line-height:1.5}
.your-money p{font-size:15px;line-height:1.65}
.cou-donut{width:200px;height:200px}
/* Donation box */
.donation-help .row.bg5{margin-left:0;margin-right:0}
.donation-help .donation-div{width:100%;margin:0 0 16px}
.donation-help .donation-div p{margin-bottom:8px;word-break:break-word}
.donation-help .donate-1{text-align:center}
/* Footer: comfortable tap targets */
#foot-back a{display:inline-block;padding:6px 0}
#foot-back li{font-size:14px}
}