/*
Theme Name: Suffa Quran Premium Complete V3
Theme URI: https://suffaquran.online/
Author: Suffa Quran Online Academy
Description: Complete premium WordPress theme with supplied Suffa Quran logo, slider, course images, teacher photo, Islamic articles and WhatsApp trial lead form.
Version: 4.0
*/

*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#183c34;background:#fbfaf7;font-family:"DM Sans",Arial,sans-serif}a{text-decoration:none;color:inherit}.container{width:min(1280px,92%);margin:auto}
.topbar{height:38px;background:#063a31;color:#f5f0dc;font-size:12px}.topbar-inner{height:100%;display:flex;align-items:center;gap:42px}.topbar a{color:#f5d27b}.top-right{margin-left:auto;display:flex;gap:20px;align-items:center}.top-right i{width:1px;height:16px;background:#8aa69e}
.header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid #e9e5dc}.nav-wrap{min-height:82px;display:flex;align-items:center}.brand{display:flex;align-items:center;gap:12px}.brand img{width:60px;height:60px;object-fit:cover;border-radius:12px}.brand strong{display:block;font-size:20px;letter-spacing:.2px;color:#111}.brand small{display:block;font-size:13px;letter-spacing:2px;color:#111}.nav-wrap nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:12px;font-weight:800;color:#143b34}.nav-wrap nav a{position:relative;padding:30px 0}.nav-wrap nav a:not(.trial-nav):after{content:"";position:absolute;height:2px;background:#b88725;left:0;right:100%;bottom:20px;transition:.25s}.nav-wrap nav a:hover:after,.nav-wrap nav a.active:after{right:0}.trial-nav{background:#b88725;color:#fff!important;padding:13px 18px!important;border-radius:5px;box-shadow:0 8px 20px #b8872530;transition:.2s}.trial-nav:hover{transform:translateY(-2px)}.menu-toggle{display:none;background:none;border:0;font-size:28px}
.hero{height:610px;position:relative;overflow:hidden;background:#0b2d27}.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.03);transition:opacity .8s,transform 6s}.hero-slide.active{opacity:1;transform:scale(1)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,29,24,.9),rgba(4,29,24,.62) 48%,rgba(4,29,24,.12))}.hero-content{position:relative;z-index:2;padding-top:110px;color:#fff}.eyebrow{font-size:11px;font-weight:900;letter-spacing:2.4px}.eyebrow.gold{color:#b78322}.eyebrow.light{color:#f2cf79}.hero h1{font:700 clamp(48px,5.5vw,76px)/1.02 "Playfair Display",serif;margin:18px 0 18px;letter-spacing:-2px}.hero h1 em{color:#f1ce7a;font-style:normal}.hero-sub{font-size:20px;line-height:1.55;margin:0 0 20px;color:#f4f5f1}.hero-points{display:flex;gap:28px;font-size:13px;font-weight:700;margin-bottom:30px}.hero-buttons{display:flex;gap:16px}.gold-btn,.outline-btn,.dark-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:6px;padding:15px 22px;font-weight:900;font-size:12px;letter-spacing:.4px;transition:.2s}.gold-btn{background:#c18e25;color:#fff;border:0;box-shadow:0 12px 30px #0003}.gold-btn:hover{transform:translateY(-3px);background:#d19e32;box-shadow:0 16px 34px #0004}.outline-btn{border:1px solid #fff;color:#fff}.outline-btn:hover{background:#fff;color:#123d34;transform:translateY(-3px)}.hero-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:0;background:#0008;color:#fff;font-size:42px;cursor:pointer}.hero-arrow.left{left:24px}.hero-arrow.right{right:24px}.hero-dots{position:absolute;z-index:5;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.hero-dots button{width:9px;height:9px;border:0;border-radius:50%;background:#fff8}.hero-dots button.active{width:28px;border-radius:10px;background:#e5bd64}
.intro{padding:70px 0 85px;background:#fff}.section-title{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:38px}.section-title h2{font:700 38px/1.15 "Playfair Display",serif;margin:10px 0 0;color:#123b34}.section-title p{max-width:470px;color:#65746e;line-height:1.7}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.course-card{background:#fff;border:1px solid #e5e0d7;border-radius:0 0 12px 12px;overflow:hidden;box-shadow:0 5px 16px #17332d0b;transition:.28s}.course-card:hover{transform:translateY(-8px);box-shadow:0 22px 45px #17332d1b}.course-card img{width:100%;height:235px;object-fit:cover;display:block}.course-body{padding:23px 24px 25px}.course-body h3{font-size:19px;margin:0 0 13px;color:#102f2a}.course-body p{font-size:13px;line-height:1.75;color:#66746e;min-height:68px}.course-body a{display:flex;align-items:center;justify-content:space-between;width:185px;margin-top:20px;padding:12px 12px 12px 18px;border:1px solid #e7e4dd;border-radius:28px;font-size:11px;font-weight:900;letter-spacing:1px}.course-body a b{display:grid;place-items:center;background:#101313;color:#fff;width:36px;height:36px;border-radius:50%;font-size:18px}.course-body a:hover{border-color:#c49a46;box-shadow:0 8px 18px #17332d12}
.about{padding:95px 0;background:#f2f0e9}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.about h2{font:700 47px/1.1 "Playfair Display",serif;margin:12px 0;color:#123b34}.about h2 em{color:#b78322;font-style:normal}.about p{color:#697770;line-height:1.8}.feature-list{margin-top:30px;display:grid;gap:17px}.feature-list div{display:grid;grid-template-columns:45px 1fr;column-gap:12px}.feature-list span{grid-row:span 2;color:#b78322;font-weight:900}.feature-list b{font-size:14px}.feature-list small{color:#78847f}.about-photo{position:relative}.about-photo img{width:100%;max-height:600px;object-fit:cover;border-radius:16px;display:block;box-shadow:0 24px 60px #17332d22}.teacher-tag{position:absolute;left:25px;bottom:25px;background:#fff;padding:15px 20px;border-radius:8px;box-shadow:0 12px 35px #0002}.teacher-tag b,.teacher-tag span{display:block}.teacher-tag b{font-size:14px}.teacher-tag span{font-size:11px;color:#7b867f;margin-top:4px}
.articles{padding:85px 0;background:#fff}.centered{text-align:center;display:block}.centered h2{margin-top:10px}.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.article-grid article{padding:30px;border:1px solid #e6e1d7;border-radius:14px;transition:.25s}.article-grid article:hover{transform:translateY(-6px);box-shadow:0 20px 45px #17332d12}.article-grid span{font-size:9px;font-weight:900;letter-spacing:2px;color:#b78322}.article-grid h3{font:700 23px/1.25 "Playfair Display",serif;color:#123b34}.article-grid p{font-size:13px;line-height:1.7;color:#68756f}.article-grid a{font-size:11px;font-weight:900;color:#12604e}
.trial{padding:75px 0;background:#073b31;color:#fff}.trial-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.trial h2{font:700 43px/1.15 "Playfair Display",serif;margin:12px 0}.trial p{color:#c9d8d2;line-height:1.7}.trial form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.trial input,.trial select{padding:15px;border:1px solid #ffffff35;border-radius:5px;background:#fff;color:#263c36;outline:0}.trial button{grid-column:1/-1;cursor:pointer}
.reviews{padding:85px 0;background:#f5f3ed}.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.review-grid blockquote{margin:0;background:#fff;border:1px solid #e8e2d7;padding:28px;border-radius:12px;color:#50615a;line-height:1.7}.review-grid cite{display:block;margin-top:20px;color:#123b34;font-style:normal;font-size:12px;font-weight:800}
.contact{padding:65px 0;background:#fff}.contact-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.contact h2{font:700 42px "Playfair Display",serif;margin:10px 0}.contact p{color:#68756f}.contact-buttons{display:flex;gap:12px}.dark-btn{background:#123b34;color:#fff}.dark-btn:hover{background:#0a2d26;transform:translateY(-3px)}
footer{background:#042b25;color:#cbd8d3;padding:25px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px}.footer-brand img{width:42px;height:42px}.footer-brand strong{color:#fff;font-size:14px}.footer-brand small{color:#fff}.footer-inner a{color:#e2c06d}.wa-float{position:fixed;right:20px;bottom:20px;width:58px;height:58px;border-radius:50%;background:#18c76f;color:#fff;display:grid;place-items:center;font-size:28px;box-shadow:0 12px 30px #0003;z-index:60;transition:.2s}.wa-float:hover{transform:scale(1.08)}
@media(max-width:1050px){.nav-wrap nav{gap:16px}.nav-wrap nav a{font-size:10px}.course-grid{gap:18px}.course-card img{height:210px}}
@media(max-width:850px){.topbar{height:auto;padding:8px 0}.topbar-inner{flex-wrap:wrap;gap:8px 18px}.top-right{margin-left:0}.nav-wrap{min-height:72px}.menu-toggle{display:block;margin-left:auto}.nav-wrap nav{display:none;position:absolute;left:4%;right:4%;top:72px;background:#fff;border:1px solid #e6e1d7;box-shadow:0 20px 40px #0002;flex-direction:column;gap:0;padding:10px}.nav-wrap nav.open{display:flex}.nav-wrap nav a{padding:12px 10px;width:100%}.nav-wrap nav a:not(.trial-nav):after{bottom:5px}.hero{height:560px}.hero-content{padding-top:80px}.hero h1{font-size:52px}.hero-points{flex-wrap:wrap;gap:12px}.section-title,.about-grid,.trial-grid,.contact-inner{display:grid;grid-template-columns:1fr}.course-grid,.article-grid,.review-grid{grid-template-columns:1fr 1fr}.trial form{grid-template-columns:1fr}.trial button{grid-column:auto}.about-grid{gap:40px}}
@media(max-width:560px){.container{width:90%}.brand img{width:50px;height:50px}.brand strong{font-size:16px}.brand small{font-size:10px}.hero{height:520px}.hero-content{padding-top:60px}.hero h1{font-size:43px}.hero-sub{font-size:15px}.hero-buttons{flex-direction:column;align-items:flex-start}.hero-arrow{display:none}.course-grid,.article-grid,.review-grid{grid-template-columns:1fr}.course-card img{height:220px}.about h2,.trial h2{font-size:36px}.contact-buttons{flex-direction:column}.footer-inner{flex-direction:column;align-items:flex-start}}

/* Global country scrolling marquee */
.countries-marquee-section{overflow:hidden;padding-bottom:70px}
.country-head{align-items:center}
.country-marquee{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.country-track{display:flex;width:max-content;animation:suffaCountryScroll 48s linear infinite}
.country-set{display:flex;gap:16px;padding-right:16px}
.country-scroll-card{width:190px;min-width:190px;background:#fff;border:1px solid #e5dfd2;border-radius:14px;padding:18px 16px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 10px 28px rgba(15,48,40,.07);transition:transform .25s,box-shadow .25s,border-color .25s}
.country-scroll-card:hover{transform:translateY(-6px);border-color:#c18e25;box-shadow:0 18px 38px rgba(15,48,40,.14)}
.country-scroll-card .flag{font-size:44px;line-height:1;margin-bottom:10px;font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif}
.country-name{font-weight:900;font-size:15px;color:#173b34}
.country-sub{font-size:10px;color:#7a857f;margin-top:4px;letter-spacing:.3px}
@keyframes suffaCountryScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}}
.country-marquee:hover .country-track{animation-play-state:paused}
@media(max-width:600px){
 .country-track{animation-duration:40s}
 .country-scroll-card{width:160px;min-width:160px;padding:15px 12px}
 .country-scroll-card .flag{font-size:36px}
 .country-name{font-size:14px}
}

/* Premium video showcase */
.video-showcase{padding:88px 0;background:#fbfaf7}
.video-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:58px;align-items:center}
.video-copy h2{font:700 43px/1.15 "Playfair Display",serif;color:#123b34;margin:12px 0 18px}
.video-copy p{color:#697770;line-height:1.8;max-width:520px}
.video-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b3028;box-shadow:0 25px 65px rgba(10,45,38,.18);border:7px solid #fff}
.video-frame:before{content:"";position:absolute;inset:0;border:1px solid rgba(193,142,37,.45);border-radius:10px;pointer-events:none;z-index:2}
.video-frame iframe{width:100%;height:100%;border:0;display:block}
.video-frame:hover{transform:translateY(-5px);box-shadow:0 32px 75px rgba(10,45,38,.24);transition:.25s}
@media(max-width:850px){.video-grid{grid-template-columns:1fr;gap:35px}.video-copy h2{font-size:36px}}