/*======================================================
AL-NOOR ACADEMY
Premium Responsive Framework
Author : AL-NOOR
======================================================*/

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

html{

scroll-behavior:smooth;

}

body{

font-family:Arial,Helvetica,sans-serif;

background:#ffffff;

color:#333;

overflow-x:hidden;

line-height:1.7;

}

/*======================================================
CONTAINER
======================================================*/

.container{

max-width:1280px;

margin:auto;

padding:20px;

}

/*======================================================
HEADINGS
======================================================*/

h1{

font-size:58px;

font-weight:900;

color:#2563eb;

line-height:1.2;

}

h2{

font-size:40px;

font-weight:800;

color:#2563eb;

}

h3{

font-size:30px;

font-weight:700;

color:#2563eb;

}

p{

font-size:20px;

line-height:1.9;

}

/*======================================================
AL-NOOR GOLD LINE
======================================================*/

.gold-line{

width:180px;

height:6px;

margin:25px auto;

border-radius:50px;

background:#FFD700;

box-shadow:

0 0 18px #FFD700;

}

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

.hero-banner{

position:relative;

overflow:hidden;

padding:60px;

border-radius:30px;

background:

linear-gradient(

135deg,

#ffffff,

#eef8ff,

#fff8cf,

#ffffff

);

border:4px solid #FFD700;

animation:goldGlow 2.5s infinite alternate;

}

.hero-banner::before{

content:"";

position:absolute;

top:-150px;

left:-150px;

width:340px;

height:340px;

background:rgba(255,215,0,.25);

border-radius:50%;

filter:blur(60px);

}

.hero-banner::after{

content:"";

position:absolute;

bottom:-160px;

right:-160px;

width:360px;

height:360px;

background:rgba(37,99,235,.14);

border-radius:50%;

filter:blur(80px);

}

/*======================================================
GLASS BOX
======================================================*/

.glass{

background:

rgba(255,255,255,.35);

backdrop-filter:blur(14px);

padding:40px;

border-radius:25px;

border:2px solid rgba(255,255,255,.5);

}

/*======================================================
PREMIUM BUTTON
======================================================*/

.btn-gold{

display:inline-block;

padding:18px 42px;

border-radius:60px;

background:

linear-gradient(

90deg,

#FFD700,

#FFF4A0,

#FFD700

);

color:#163B88;

font-size:20px;

font-weight:900;

text-decoration:none;

box-shadow:

0 0 25px rgba(255,215,0,.65);

transition:.35s;

}

.btn-gold:hover{

transform:scale(1.05);

}

/*======================================================
BLUE BUTTON
======================================================*/

.btn-blue{

display:inline-block;

padding:20px 40px;

border-radius:18px;

background:

linear-gradient(

90deg,

#2563eb,

#3b82f6,

#2563eb

);

color:#fff;

font-size:22px;

font-weight:800;

text-decoration:none;

transition:.35s;

}

.btn-blue:hover{

transform:translateY(-4px);

}

/*======================================================
CARDS
======================================================*/

.card{

background:#fff;

padding:30px;

border-radius:22px;

border-left:7px solid #FFD700;

box-shadow:

0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

/*======================================================
GRID
======================================================*/

.grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(300px,1fr));

gap:20px;

}

/*======================================================
TABLE
======================================================*/

.table-wrap{

overflow-x:auto;

}

table{

width:100%;

border-collapse:collapse;

background:#fff;

}

th{

background:#2563eb;

color:white;

padding:18px;

}

td{

padding:18px;

border-bottom:1px solid #ddd;

}

/*======================================================
SHADOW
======================================================*/

.shadow{

box-shadow:

0 15px 35px rgba(0,0,0,.08);

}

/*======================================================
SPACING
======================================================*/

.mt20{

margin-top:20px;

}

.mt40{

margin-top:40px;

}

.mt60{

margin-top:60px;

}

.mb20{

margin-bottom:20px;

}

.mb40{

margin-bottom:40px;

}

.text-center{

text-align:center;

}

/*======================================================
ANIMATIONS
======================================================*/

@keyframes goldGlow{

from{

box-shadow:

0 0 20px rgba(255,215,0,.35);

}

to{

box-shadow:

0 0 55px rgba(255,215,0,.85),

0 0 80px rgba(37,99,235,.22);

}

}

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

@media(max-width:992px){

h1{

font-size:46px;

}

h2{

font-size:34px;

}

.hero-banner{

padding:40px;

}

}

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

@media(max-width:768px){

.container{

padding:15px;

}

.hero-banner{

padding:25px 18px;

border-radius:20px;

}

.glass{

padding:20px;

}

h1{

font-size:34px;

line-height:1.25;

word-break:break-word;

}

h2{

font-size:28px;

}

h3{

font-size:24px;

}

p{

font-size:17px;

line-height:1.8;

}

.btn-gold,

.btn-blue{

display:block;

width:100%;

text-align:center;

font-size:18px;

padding:16px;

}

.grid{

grid-template-columns:1fr;

}

.card{

padding:20px;

}

table{

font-size:15px;

}

img{

max-width:100%;

height:auto;

display:block;

}

}

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

@media(max-width:480px){

.hero-banner{

padding:18px 12px;

}

h1{

font-size:28px;

}

h2{

font-size:24px;

}

p{

font-size:16px;

}

}