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

body{

font-family:Vazirmatn,sans-serif;

min-height:100vh;

overflow-x:hidden;

display:flex;

justify-content:center;

align-items:center;

padding:40px 20px;

background:

linear-gradient(135deg,#ffb300,#ff7800);

position:relative;

}

.bg-circle{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.25;

animation:float 12s ease-in-out infinite;

}

.one{

width:300px;

height:300px;

background:#fff;

top:-120px;

right:-80px;

}

.two{

width:260px;

height:260px;

background:#ffe082;

left:-120px;

bottom:80px;

animation-delay:2s;

}

.three{

width:180px;

height:180px;

background:white;

bottom:-60px;

right:30%;

animation-delay:4s;

}

@keyframes float{

50%{

transform:translateY(-30px);

}

}

.container{

width:100%;

max-width:620px;

padding:45px;

border-radius:35px;

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

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.35);

box-shadow:

0 25px 60px rgba(0,0,0,.18);

text-align:center;

animation:fade .8s;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:white;

color:#ff7800;

font-weight:700;

margin-bottom:25px;

}

h1{

color:white;

font-size:40px;

font-weight:800;

line-height:1.5;

}

h1 span{

display:block;

font-size:28px;

margin-top:8px;

}

p{

margin:25px auto 35px;

line-height:2.2;

color:white;

max-width:480px;

font-size:17px;

}

.cover{

display:block;

width:270px;
max-width:100%;

margin:0 auto 40px;

border-radius:18px;

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

transform:
perspective(900px)
rotateY(-18deg)
rotateX(5deg);

transition:.5s;

}

.cover:hover{

transform:

perspective(900px)

rotateY(0)

scale(1.06);

}

.btn{

display:flex;

align-items:center;

justify-content:center;

width:fit-content;

margin:0 auto;

padding:18px 42px;

border-radius:60px;

background:white;

color:#ff7800;

text-decoration:none;

font-size:20px;

font-weight:800;

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

transition:.3s;

}

.btn:hover{

transform:translateY(-5px);

box-shadow:

0 20px 40px rgba(255,255,255,.45);

}

.cards{

display:grid;

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

gap:18px;

margin-top:45px;

}

.card{

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

padding:22px;

border-radius:20px;

border:1px solid rgba(255,255,255,.25);

transition:.3s;

}

.card:hover{

transform:translateY(-8px);

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

}

.icon{

font-size:38px;

margin-bottom:10px;

}

.card h3{

color:white;

font-size:18px;

margin-bottom:8px;

}

.card span{

font-size:14px;

color:#fff8e8;

line-height:1.8;

}

footer{

margin-top:40px;

color:#fff8e8;

font-size:14px;

}

@media(max-width:700px){

.container{

padding:35px 20px;

}

h1{

font-size:30px;

}

h1 span{

font-size:22px;

}

.cards{

grid-template-columns:1fr;

}

.cover{

width:220px;

}

.btn{

width:100%;

}

}

/* ---------- Tablet ---------- */

@media (max-width:900px){

.container{

    max-width:90%;

    padding:40px 28px;

}

.cover{

    width:230px;

}

.cards{

    grid-template-columns:1fr;

    gap:16px;

}

}


/* ---------- Mobile ---------- */

@media (max-width:600px){

body{

    padding:20px 12px;

}

.container{

    width:100%;

    border-radius:28px;

    padding:30px 18px;

}

.badge{

    font-size:13px;

    padding:8px 16px;

}

h1{

    font-size:30px;

    line-height:1.6;

}

h1 span{

    font-size:21px;

}

p{

    font-size:15px;

    line-height:2;

    margin:20px auto 30px;

}

.cover{

    display:block;

    width:180px;

    margin:0 auto 30px;

    transform:none;

}

.cover:hover{

    transform:scale(1.03);

}

.btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin:0 auto;

    padding:16px;

    font-size:18px;

}

.cards{

    margin-top:30px;

    grid-template-columns:1fr;

    gap:14px;

}

.card{

    padding:18px;

}

.icon{

    font-size:32px;

}

.card h3{

    font-size:17px;

}

.card span{

    font-size:13px;

}

footer{

    margin-top:30px;

    font-size:13px;

}

.bg-circle{

    display:none;

}

}


/* ---------- Small Phones ---------- */

@media (max-width:380px){

.container{

    padding:22px 15px;

}

h1{

    font-size:25px;

}

h1 span{

    font-size:18px;

}

.cover{

    width:150px;

}

.btn{

    font-size:16px;

    padding:14px;

}

}