/*======================================
        RESET
=======================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#0B6B3A;
    --secondary:#157347;
    --gold:#D4AF37;
    --light:#F8FBF9;
    --dark:#1C1C1C;
    --gray:#666;
    --white:#FFF;

    --shadow:0 15px 40px rgba(0,0,0,.08);

    --radius:18px;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    color:var(--dark);

    background:#ffffff;

    line-height:1.8;

    overflow-x:hidden;

}

img{

    max-width:100%;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.container{

    width:min(92%,1200px);

    margin:auto;

}

.section{

    padding:100px 0;

}

.grey{

    background:#F7FAF8;

}

/*======================================
        NAVBAR
=======================================*/

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:999;

transition:.4s;

background:rgba(11,107,58,.95);

backdrop-filter:blur(12px);

box-shadow:0 5px 25px rgba(0,0,0,.08);

}

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

}

.logo{

display:flex;

align-items:center;

gap:15px;

color:#fff;

}

.logo img{

width:58px;

height:58px;

border-radius:50%;

}

.logo h2{

font-size:22px;

}

.logo span{

font-size:13px;

opacity:.8;

}

nav{

display:flex;

gap:28px;

align-items:center;

}

nav a{

color:white;

font-weight:500;

transition:.3s;

}

nav a:hover{

color:var(--gold);

}

.btn-nav{

padding:10px 22px;

background:var(--gold);

color:white;

border-radius:50px;

}

#menu-button{

display:none;

font-size:30px;

color:white;

cursor:pointer;

}

/*======================================
            HERO
=======================================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

background:

linear-gradient(rgba(11,107,58,.88),

rgba(11,107,58,.88));

background-size:cover;

background-position:center;

position:relative;

overflow:hidden;

color:white;

padding-top:100px;

}

.hero-pattern{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background-image:url("assets/pattern.svg");

background-repeat:repeat;

background-size:50px;

opacity:.1;

pointer-events:none;

}

.hero-content{

display:grid;

grid-template-columns:1fr 430px;

gap:70px;

align-items:center;

position:relative;

z-index:2;

}

.badge{

display:inline-block;

background:rgba(255,255,255,.12);

padding:10px 18px;

border-radius:40px;

margin-bottom:25px;

backdrop-filter:blur(10px);

cursor: pointer;

}

.hero h1{

font-size:60px;

line-height:1.1;

margin-bottom:12px;

}

.hero h2{

font-size:32px;

color:#FFD76B;

margin-bottom:30px;

}

.hero p{

font-size:18px;

margin-bottom:18px;

max-width:680px;

}

.hero-button{

display:flex;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.btn-primary{

background:var(--gold);

padding:15px 34px;

border-radius:50px;

color:white;

font-weight:600;

transition:.3s;

box-shadow:var(--shadow);

}

.btn-primary:hover{

transform:translateY(-5px);

}

.btn-secondary{

border:2px solid white;

padding:15px 34px;

border-radius:50px;

color:white;

transition:.3s;

}

.btn-secondary:hover{

background:white;

color:var(--primary);

}

.hero-stat{

display:flex;

gap:25px;

margin-top:45px;

flex-wrap:wrap;

}

.hero-stat div{

background:rgba(255,255,255,.12);

padding:20px;

border-radius:18px;

text-align:center;

min-width:120px;

backdrop-filter:blur(10px);

}

.hero-stat h3{

font-size:34px;

color:#FFD76B;

}

.hero-card{

background:white;

color:#333;

padding:45px;

border-radius:25px;

box-shadow:0 25px 50px rgba(0,0,0,.18);

}

.hero-card i{

font-size:65px;

color:var(--primary);

margin-bottom:25px;

}

.hero-card h3{

font-size:26px;

margin-bottom:18px;

color:var(--primary);

}

.wave{

line-height:0;

margin-top:-2px;

}

.wave svg{

display:block;

width:100%;

height:95px;

}

.wave-light path{

fill:#F7FAF8;

}

/*======================================
        SECTION TITLE
=======================================*/

.section-title{

text-align:center;

max-width:760px;

margin:auto auto 70px;

}

.section-title span{

display:inline-block;

padding:8px 20px;

background:#EEF8F2;

color:var(--primary);

border-radius:30px;

font-size:14px;

font-weight:600;

letter-spacing:1px;

margin-bottom:20px;

}

.section-title h2{

font-size:44px;

margin-bottom:20px;

color:var(--primary);

font-weight:700;

}

.section-title p{

color:#666;

font-size:18px;

}

/*======================================
        ABOUT
=======================================*/

.about-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

margin-top:50px;

}

.about-box{

background:white;

padding:40px;

border-radius:20px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.about-box:hover{

transform:translateY(-10px);

}

.about-box i{

font-size:54px;

color:var(--gold);

margin-bottom:25px;

}

.about-box h3{

margin-bottom:15px;

color:var(--primary);

}

.about-box p{

color:#666;

}

/*======================================
        PROGRAM
=======================================*/

.program-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.program-card{

position:relative;

background:white;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

overflow:hidden;

}

.program-card:hover{

transform:translateY(-12px);

}

.program-icon{

width:85px;

height:85px;

background:#EEF8F2;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:25px;

}

.program-icon i{

font-size:36px;

color:var(--primary);

}

.program-card h3{

font-size:28px;

margin-bottom:15px;

color:var(--primary);

}

.program-card p{

margin-bottom:20px;

color:#666;

}

.program-card ul{

margin-bottom:30px;

}

.program-card li{

padding:10px 0;

border-bottom:1px solid #eee;

color:#555;

}

.card-button{

display:inline-block;

padding:14px 28px;

background:var(--primary);

color:white;

border-radius:50px;

transition:.3s;

}

.card-button:hover{

background:var(--secondary);

}

.popular{

border:3px solid var(--gold);

}

.label{

position:absolute;

right:-40px;

top:22px;

background:var(--gold);

color:white;

padding:8px 45px;

transform:rotate(40deg);

font-size:13px;

font-weight:600;

}

/*======================================
        REQUIREMENT
=======================================*/

.requirement-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

}

.requirement-card{

background:white;

padding:45px;

border-radius:22px;

box-shadow:var(--shadow);

}

.requirement-card h3{

color:var(--primary);

margin-bottom:25px;

font-size:28px;

}

.requirement-card h3 i{

color:var(--gold);

margin-right:10px;

}

.requirement-card ul{

list-style:none;

}

.requirement-card li{

padding:16px 0;

padding-left:28px;

position:relative;

border-bottom:1px solid #eee;

}

.requirement-card li::before{

content:"✔";

position:absolute;

left:0;

color:var(--primary);

font-weight:bold;

}

/*======================================
        ANIMATION
=======================================*/

.about-box,
.program-card,
.requirement-card{

opacity:0;

transform:translateY(50px);

animation:fadeUp .8s forwards;

}

@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}

/*======================================
        ADVANTAGES
=======================================*/

.advantage-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.advantage-card{

background:white;

padding:40px 35px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

border-top:5px solid transparent;

}

.advantage-card:hover{

transform:translateY(-12px);

border-color:var(--gold);

}

.advantage-card i{

font-size:52px;

color:var(--gold);

margin-bottom:22px;

}

.advantage-card h3{

color:var(--primary);

margin-bottom:18px;

font-size:24px;

}

.advantage-card p{

color:#666;

}

/*======================================
        DINIYYAH
=======================================*/

.diniyyah{

display:grid;

grid-template-columns:1fr 420px;

gap:70px;

align-items:center;

}

.mini-title{

display:inline-block;

padding:8px 18px;

background:#EEF8F2;

border-radius:30px;

color:var(--primary);

font-weight:600;

margin-bottom:20px;

}

.diniyyah h2{

font-size:42px;

color:var(--primary);

margin-bottom:25px;

line-height:1.2;

}

.diniyyah p{

color:#666;

margin-bottom:25px;

}

.diniyyah ul li{

padding:12px 0;

font-size:18px;

}

.diniyyah ul i{

color:var(--primary);

margin-right:10px;

}

.quote-box{

background:linear-gradient(145deg,var(--primary),#127344);

padding:45px;

border-radius:28px;

color:white;

box-shadow:0 20px 45px rgba(0,0,0,.15);

position:relative;

overflow:hidden;

}

.quote-box::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:rgba(255,255,255,.08);

border-radius:50%;

right:-50px;

top:-50px;

}

.quote-box i{

font-size:60px;

color:#FFD76B;

margin-bottom:25px;

}

.quote-box p{

font-size:22px;

line-height:1.7;

color:white;

font-style:italic;

}

.quote-box h4{

margin-top:25px;

font-weight:600;

color:#FFD76B;

}

/*======================================
        STATISTICS
=======================================*/

.statistics{

background:linear-gradient(135deg,#0B6B3A,#167848);

padding:90px 0;

color:white;

}

.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:25px;

}

.stat-box{

background:rgba(255,255,255,.08);

backdrop-filter:blur(12px);

padding:35px;

border-radius:20px;

text-align:center;

}

.stat-box h2{

font-size:52px;

color:#FFD76B;

margin-bottom:10px;

}

.stat-box p{

font-size:18px;

}

/*======================================
        CTA
=======================================*/

.cta{

padding:100px 0;

background:#F7FAF8;

}

.cta-box{

background:linear-gradient(135deg,#0B6B3A,#157347);

padding:70px;

border-radius:30px;

text-align:center;

color:white;

box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.cta-box h2{

font-size:46px;

margin-bottom:20px;

}

.cta-box p{

font-size:20px;

margin-bottom:40px;

}

/*======================================
        COUNTDOWN
=======================================*/

#countdown{

display:flex;

justify-content:center;

gap:25px;

margin:40px 0;

flex-wrap:wrap;

}

#countdown div{

background:rgba(255,255,255,.12);

padding:22px;

border-radius:18px;

min-width:110px;

backdrop-filter:blur(10px);

}

#countdown span{

font-size:42px;

font-weight:bold;

display:block;

color:#FFD76B;

}

#countdown p{

margin-top:8px;

font-size:15px;

}

.large{

font-size:20px;

padding:18px 42px;

display:inline-flex;

align-items:center;

gap:12px;

}

.large:hover{

transform:translateY(-5px);

}

/*======================================
        FAQ
=======================================*/

.accordion{

max-width:900px;

margin:auto;

}

.accordion-item{

background:white;

border-radius:18px;

margin-bottom:18px;

overflow:hidden;

box-shadow:var(--shadow);

}

.accordion-header{

width:100%;

background:white;

border:none;

padding:25px 30px;

display:flex;

justify-content:space-between;

align-items:center;

cursor:pointer;

font-size:19px;

font-weight:600;

color:var(--primary);

transition:.3s;

}

.accordion-header:hover{

background:#F8FBF9;

}

.accordion-header i{

transition:.35s;

}

.accordion-item.active .accordion-header i{

transform:rotate(45deg);

color:var(--gold);

}

.accordion-body{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

}

.accordion-body p{

padding:0 30px 30px;

color:#666;

line-height:1.8;

}

/*======================================
        CONTACT
=======================================*/

.contact-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}

.contact-card{

background:white;

padding:40px;

border-radius:24px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}

.contact-card:hover{

transform:translateY(-10px);

}

.contact-card i{

font-size:55px;

color:var(--gold);

margin-bottom:25px;

}

.contact-card h3{

color:var(--primary);

margin-bottom:15px;

}

.contact-card p{

margin-bottom:25px;

color:#666;

white-space:pre-line;

}

/*======================================
        MAPS
=======================================*/

.maps{

width:100%;

height:500px;

overflow:hidden;

}

.maps iframe{

width:100%;

height:100%;

border:none;

display:block;

}

/*======================================
        FOOTER
=======================================*/

footer{

background:#073A20;

color:white;

padding:70px 0 25px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr;

gap:50px;

margin-bottom:40px;

}

.footer-grid h3{

margin-bottom:20px;

color:#FFD76B;

}

.footer-grid p{

opacity:.9;

margin-bottom:12px;

}

.footer-grid ul{

padding:0;

}

.footer-grid li{

margin-bottom:12px;

opacity:.9;

}

footer hr{

border:none;

height:1px;

background:rgba(255,255,255,.15);

margin:35px 0;

}

.copyright{

text-align:center;

opacity:.8;

font-size:14px;

}

/*======================================
        BACK TO TOP
=======================================*/

#backTop{

position:fixed;

right:25px;

bottom:25px;

width:58px;

height:58px;

background:var(--gold);

color:white;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:22px;

box-shadow:0 10px 30px rgba(0,0,0,.25);

transition:.35s;

z-index:999;

opacity:0;

visibility:hidden;

}

#backTop.show{

opacity:1;

visibility:visible;

}

#backTop:hover{

transform:translateY(-6px);

background:var(--primary);

}

/*======================================
        FLOATING WHATSAPP
=======================================*/

.floating-wa{

position:fixed;

left:25px;

bottom:25px;

width:62px;

height:62px;

border-radius:50%;

background:#25D366;

display:flex;

justify-content:center;

align-items:center;

font-size:34px;

color:white;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:999;

transition:.35s;

}

.floating-wa:hover{

transform:scale(1.1);

}

/*======================================
        FADE ANIMATION
=======================================*/

.fade-up{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/*======================================
        TABLET
=======================================*/

@media (max-width:1100px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

max-width:500px;

margin:auto;

}

.hero p{

margin:auto auto 18px;

}

.hero-button{

justify-content:center;

}

.hero-stat{

justify-content:center;

}

.about-grid,

.program-grid,

.advantage-grid,

.contact-grid{

grid-template-columns:repeat(2,1fr);

}

.requirement-grid{

grid-template-columns:1fr;

}

.diniyyah{

grid-template-columns:1fr;

gap:50px;

}

.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

/*======================================
        MOBILE
=======================================*/

@media (max-width:768px){

.section{

padding:70px 0;

}

.section-title h2{

font-size:32px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:42px;

}

.hero h2{

font-size:24px;

}

.hero p{

font-size:16px;

}

.hero-card{

padding:30px;

}

.about-grid,

.program-grid,

.advantage-grid,

.contact-grid,

.stats-grid,

.footer-grid{

grid-template-columns:1fr;

}

.hero-stat{

flex-direction:column;

align-items:center;

}

#countdown{

gap:12px;

}

#countdown div{

min-width:80px;

padding:16px;

}

#countdown span{

font-size:30px;

}

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:32px;

}

.diniyyah h2{

font-size:30px;

}

.contact-card,

.program-card,

.about-box,

.advantage-card,

.requirement-card{

padding:30px;

}

.maps{

height:350px;

}

}

/*======================================
        MOBILE MENU
=======================================*/

@media(max-width:900px){

#menu-button{

display:block;

}

nav{

position:fixed;

top:85px;

right:-100%;

width:280px;

background:white;

padding:30px;

display:flex;

flex-direction:column;

align-items:flex-start;

gap:18px;

box-shadow:0 20px 40px rgba(0,0,0,.12);

transition:.4s;

border-radius:20px 0 0 20px;

}

nav.active{

right:0;

}

nav a{

color:#333;

width:100%;

padding:10px 0;

}

.btn-nav{

text-align:center;

width:100%;

color:white;

}

}

/*======================================
        SMALL PHONE
=======================================*/

@media(max-width:480px){

.container{

width:94%;

}

.hero h1{

font-size:34px;

}

.hero h2{

font-size:20px;

}

.section-title h2{

font-size:28px;

}

.quote-box{

padding:30px;

}

.quote-box p{

font-size:18px;

}

.hero-card{

padding:25px;

}

.btn-primary,

.btn-secondary{

width:100%;

text-align:center;

justify-content:center;

}

.hero-button{

flex-direction:column;

}

.logo h2{

font-size:18px;

}

.logo span{

font-size:11px;

}

}

/*======================================
        FINISHING
=======================================*/

::selection{

background:var(--primary);

color:white;

}

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-track{

background:#eee;

}

body{

animation:fadeBody .6s;

}

@keyframes fadeBody{

from{

opacity:0;

}

to{

opacity:1;

}

}