*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#0a0f2c;
}

    
body::before{
content:'';
position:fixed;
width:800px;
height:800px;
right:-200px;
top:-200px;

background:radial-gradient(
circle,
rgba(90,120,255,.4),
transparent 70%
);

z-index:-1;
}

.navbar{
position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);

width:90%;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 35px;

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

backdrop-filter:blur(20px);

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

border-radius:20px;

z-index:999;
}

.logo{
font-size:24px;
font-weight:700;
}

.menu{
display:flex;
gap:20px;
list-style:none;
}

.cv-btn{
text-decoration:none;
color:white;

padding:12px 25px;

border-radius:50px;

background:linear-gradient(
90deg,
#4b6bff,
#8b5cf6
);
}

.hero{
min-height:100vh;

display:grid;
grid-template-columns:1.1fr 0.9fr;
  gap:40px;

align-items:center;

padding:120px 6%;

overflow:hidden;
}

.hero-left{
max-width:600px;
}

.welcome{
color:#ffd95c;
font-weight:600;
margin-bottom:15px;
}

.hero-left h1{
font-size:90px;
font-weight:800;
 color:white;

text-shadow:
0 0 20px #4b6bff,
0 0 50px #4b6bff;
}

.hero-left h2{
font-size:40px;
margin-bottom:20px;
color:white;
}

.status{
display:inline-block;
    padding:6px 14px;
font-size:12px;

border-radius:50px;

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

border:1px solid rgba(0,255,120,.4);

margin-bottom:25px;
    animation:statusGlow 6s ease-in-out infinite;
}

.desc{
font-size:20px;
line-height:1.8;
 color:#e5e7eb;
}

.hero-right img{
width:380px;
max-width:100%;
position:relative;
z-index:2;

filter:
drop-shadow(0 0 40px #6c63ff);
}

filter:
drop-shadow(0 0 40px #6c63ff);
}

.hero-right{
position:relative;
width:520px;
height:600px;
display:flex;
justify-content:center;
align-items:center;
  overflow:hidden;
}
.hero-right::after{
    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:300px;

    background:linear-gradient(
        to bottom,
        transparent,
        #050b2f
    );

    z-index:3;

    pointer-events:none;
}

.glow-circle{
position:absolute;

width:550px;
height:550px;

background:
radial-gradient(
circle,
rgba(140,90,255,.5),
transparent 70%
);

border-radius:50%;

top:50%;
left:50%;

transform:translate(-50%,-50%);

z-index:-1;
}

.hero-right{
position:relative;
}

.dream-card{
position:absolute;

width:220px;

padding:18px;

border-radius:20px;

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

backdrop-filter:blur(20px);

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

box-shadow:
0 0 25px rgba(120,120,255,.2);
}

.dream-card span{
opacity:.7;
font-size:14px;
}

.card-1{
right:10px;
top:80px;
}

.card-2{
right:0;
top:240px;
}

.card-3{
right:10px;
top:400px;
}

@media screen and (max-width: 768px){

.navbar{
padding:15px;
}

.menu{
display:none;
}

.logo{
font-size:20px;
}

.cv-btn{
padding:10px 16px;
font-size:14px;
}

.hero{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

padding:120px 20px 60px;
}

.hero-left{
max-width:100%;
}

.hero-left h1{
font-size:58px;
line-height:1;
}

.hero-left h2{
font-size:26px;
}

.desc{
font-size:18px;
}

.hero-right{
width:100%;
height:auto;

display:flex;
flex-direction:column;
align-items:center;

margin-top:40px;
}

.hero-right img{
width:260px;
position:relative;
}

.glow-circle{
width:320px;
height:320px;
}

.dream-card{
position:relative !important;

width:260px;

top:auto !important;
right:auto !important;
left:auto !important;

margin-top:15px;
}

.hero-buttons{
justify-content:center;
}

}
.journey{
padding:120px 6%;
}

.section-title{
text-align:center;
font-size:42px;
margin-bottom:15px;
}

.section-subtitle{
text-align:center;
opacity:.7;
margin-bottom:60px;
}

.journey-container{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;
}

.journey-card{
background:
rgba(255,255,255,.06);

backdrop-filter:blur(20px);

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

border-radius:25px;

padding:35px 25px;

text-align:center;

transition:.4s;
}

.journey-card:hover{
transform:
translateY(-10px);

box-shadow:
0 0 30px rgba(100,120,255,.5);
}

.journey-icon{
font-size:40px;
margin-bottom:20px;
}

.journey-card h3{
font-size:18px;
margin-bottom:15px;
}

.journey-card span{
display:inline-block;

padding:8px 18px;

border-radius:30px;

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

border:
1px solid rgba(0,255,120,.3);
}

.current span{
background:
rgba(255,180,0,.15);

border:
1px solid rgba(255,180,0,.3);
}

.universities{
padding:100px 6%;
}

.uni-card{
margin-bottom:30px;

padding:25px;

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

border-radius:20px;

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

.uni-header{
display:flex;
justify-content:space-between;

margin-bottom:15px;
font-weight:600;
}

.progress{
height:12px;

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

border-radius:30px;

overflow:hidden;
}

.progress-fill{
height:100%;
border-radius:30px;
}

.madinah{
width:90%;
background:#34d399;
}

.azhar{
width:75%;
background:#3b82f6;
}

.oxford{
width:55%;
background:#8b5cf6;
}

.stats{

padding:100px 6%;

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(220px,1fr));

gap:25px;
}

.stat-card{

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

backdrop-filter:blur(20px);

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

border-radius:25px;

padding:35px;

text-align:center;

transition:.4s;
}

.stat-card:hover{

transform:
translateY(-8px);

box-shadow:
0 0 35px rgba(120,120,255,.4);

}

.stat-number{

font-size:48px;
font-weight:800;

background:
linear-gradient(
90deg,
#4b6bff,
#8b5cf6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:10px;
}

.stat-label{

font-size:18px;
opacity:.9;

}

.certificates{
padding:120px 6%;
}

.certificate-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;
}

.certificate-card{

padding:30px;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

font-size:24px;

text-align:center;

transition:.4s;
text-decoration:none;
color:white;

display:flex;
align-items:center;
justify-content:center;
}

.certificate-card:hover{

transform:
translateY(-8px);

box-shadow:
0 0 30px rgba(120,120,255,.4);
}
.certificate-card:visited{
color:white;
}

.certificate-card:hover{
color:white;
}


.organizations{
padding:120px 6%;
}

.org-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(300px,1fr));

gap:25px;
}

.org-card{

padding:35px;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

transition:.4s;
}

.org-card:hover{

transform:
translateY(-8px);

box-shadow:
0 0 30px rgba(120,120,255,.4);

}

.org-card h3{
margin-bottom:15px;
}

.org-card p{
margin-bottom:15px;
opacity:.8;
}

.org-card span{
color:#ffd95c;
}

html{
scroll-behavior:smooth;
}

.menu a,
.menu a:visited{

color:white;

text-decoration:none;

transition:.3s;

}

.menu a:hover{

color:#ffd95c;

}

.hidden{

opacity:0;

transform:translateY(50px);

transition:
all 1s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

.universities{
padding:120px 8%;
text-align:center;
}

.roadmap{
display:flex;
justify-content:center;
align-items:center;
gap:30px;
flex-wrap:wrap;
}

.roadmap-step{

width:250px;

padding:30px;

border-radius:25px;

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

backdrop-filter:blur(20px);

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

box-shadow:0 0 25px rgba(120,120,255,.2);

transition:.4s;
}

.roadmap-step:hover{
transform:translateY(-10px);
}

.roadmap-step h3{
margin:15px 0;
}

.roadmap-step p{
color:#ffd95c;
}

.roadmap-arrow{

width:120px;

height:4px;

background:
repeating-linear-gradient(
90deg,
#ffffff 0 12px,
transparent 12px 24px
);
position:relative;
overflow:hidden;
animation:moveArrow 1s linear infinite;
}

.roadmap-arrow{

width:120px;

height:4px;

background:
repeating-linear-gradient(
90deg,
#ffffff 0 12px,
transparent 12px 24px
);

position:relative;

overflow:visible;

animation:moveArrow 1s linear infinite;

}

.roadmap-arrow::after{

content:"";

position:absolute;

z-index:10;

top:50%;

left:-20px;

width:30px;
height:30px;

background:#ffd95c;

border-radius:50%;

transform:translateY(-50%);

box-shadow:
0 0 20px #ffd95c,
0 0 40px #ffd95c,
0 0 80px #ffd95c,
0 0 120px #ffd95c;

animation:moveDot 2.5s linear infinite;

}
.arrow1::after{
animation-delay:0s;
}

.arrow2::after{
animation-delay:1.25s;
}
@keyframes moveArrow{

from{
background-position:0 0;
}

to{
background-position:24px 0;
}

}

@keyframes moveDot{

0%{
left:-20px;
}

100%{
left:140px;
}

}

.hero-right{
position:relative;
overflow:visible;
}

.particles{
position:absolute;
inset:0;
pointer-events:none;
}

.particles span{
position:absolute;

width:4px;
height:4px;

background:#ffd95c;
border-radius:50%;

box-shadow:
0 0 10px #ffd95c,
0 0 20px #ffb347;

animation:floatParticle 6s linear infinite;
}

.particles span:nth-child(1){
left:10%;
top:80%;
animation-delay:0s;
}

.particles span:nth-child(2){
left:25%;
top:60%;
animation-delay:1s;
}

.particles span:nth-child(3){
left:40%;
top:85%;
animation-delay:2s;
}

.particles span:nth-child(4){
left:60%;
top:40%;
animation-delay:3s;
}

.particles span:nth-child(5){
left:80%;
top:70%;
animation-delay:4s;
}

.particles span:nth-child(6){
left:90%;
top:50%;
animation-delay:5s;
}

@keyframes floatParticle{

0%{
transform:translateY(0);
opacity:0;
}

20%{
opacity:1;
}

100%{
transform:translateY(-120px);
opacity:0;
}

}
}
@media (max-width: 768px){

    .hero{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-left{
        max-width:100%;
    }

    .hero-right{
        width:100%;
        margin-top:20px;
    }

    .hero-right img{
        max-width:300px;
    }

}
.menu-toggle{
display:none;
background:none;
border:none;
color:white;
font-size:28px;
cursor:pointer;
}

@media (max-width:768px){

.menu{
display:none;
}

.menu-toggle{
display:block;
}

.cv-btn{
display:none;
}

}

@media screen and (max-width:768px){

.hero{
grid-template-columns:1fr;
text-align:center;
}

.menu{
display:none;
}

.menu-toggle{
display:block;
}

.cv-btn{
display:none;
}

.hero-right{
margin-top:40px;
}
.hero-right{
margin-top:40px;
}

.menu.active{
display:flex;
flex-direction:column;

position:absolute;
top:80px;
left:20px;
right:20px;

background:rgba(20,20,60,.95);

padding:20px;

border-radius:15px;

gap:15px;

z-index:1000;
}

}

}
.contact{
padding:120px 8%;
text-align:center;
}

.contact-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
margin-top:50px;
}

.contact-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:20px;
padding:25px;
text-decoration:none;
color:white;
backdrop-filter:blur(15px);
transition:.3s;
}

.contact-card:hover{
transform:translateY(-8px);
border-color:#4b6bff;
box-shadow:0 0 25px rgba(75,107,255,.35);
}

.contact-card h3{
margin-bottom:10px;
}

.contact-card p{
color:#bbb;
}



.email-card p{
font-size:20px;
color:#ffd95c;
}

@media(max-width:768px){

.contact-grid{
grid-template-columns:1fr;
}

.email-card{
grid-column:auto;
}

}
#certificate-preview{
margin-top:40px;
text-align:center;
}

#certificate-image{
max-width:100%;
width:800px;
border-radius:20px;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 0 30px rgba(75,107,255,.3);
}

a,
button,
.certificate-card,
.org-card,
.contact-card,
.cv-btn,
.journey-card,
.roadmap-step,
.stat-card{
transition:transform .15s ease;

}

a:active,
button:active,
.certificate-card:active,
.org-card:active,
.contact-card:active,
.cv-btn:active,
.journey-card:active,
.roadmap-step:active,
.stat-card:active{

transform:scale(.96);

}
.music-btn{
position:fixed;
left:20px;
bottom:20px;

width:60px;
height:60px;

border:none;
border-radius:50%;

background:rgba(255,255,255,.1);
backdrop-filter:blur(15px);

color:white;
font-size:24px;

z-index:9999;
cursor:pointer;
}
.logo,
.welcome,
.hero-left h1,
.hero-left h2,
.status,
.desc,
.section-title,
.section-subtitle,
.journey-card,
.journey-card h3,
.journey-card span,
.roadmap-step,
.roadmap-step h3,
.roadmap-step p,
.stat-label,
.org-card,
.org-card h3,
.org-card p,
.org-card span,
.contact-card,
.contact-card h3,
.contact-card p,
.menu a,
.cv-btn,
a,
p,
h1,
h2,
h3,
h4,
h5,
h6,
span{
color:white !important;
}
body::after{
content:"";

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

background:
radial-gradient(circle at 20% 30%, rgba(0,255,200,.20), transparent 30%),
radial-gradient(circle at 80% 20%, rgba(120,80,255,.22), transparent 35%),
radial-gradient(circle at 60% 80%, rgba(0,180,255,.18), transparent 30%);
animation:auroraMove 5s ease-in-out infinite;

z-index:-2;
}

@keyframes auroraMove{

0%{
transform:translate(0,0) scale(1);
}

25%{
transform:translate(-40px,20px) scale(1.05);
}

50%{
transform:translate(30px,-20px) scale(1.1);
}

75%{
transform:translate(-20px,30px) scale(1.05);
}

100%{
transform:translate(0,0) scale(1);
}

}

    }
.stars{
position:fixed;
top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;
z-index:-1;
overflow:hidden;
}

.stars::before{
content:"";

position:absolute;
top:0;
left:0;

width:2px;
height:2px;
    opacity:.8;

background:white;
border-radius:50%;

box-shadow:
50px 80px white,
150px 120px white,
250px 60px white,
350px 200px white,
450px 90px white,
550px 160px white,
650px 70px white,
750px 220px white,
850px 100px white,
950px 180px white,

100px 350px white,
220px 420px white,
380px 300px white,
520px 480px white,
700px 390px white,
850px 520px white,
1020px 430px white,

80px 650px white,
250px 720px white,
430px 620px white,
610px 760px white,
800px 680px white,
980px 740px white,

120px 980px white,
320px 890px white,
500px 1020px white,
720px 930px white,
920px 1080px white,

180px 1250px white,
380px 1380px white,
620px 1180px white,
840px 1320px white,
1050px 1450px white,

90px 1600px white,
300px 1720px white,
550px 1580px white,
760px 1800px white,
    1100px 200px white,
1150px 450px white,
1200px 700px white,
1250px 950px white,
1300px 1200px white,
1350px 1450px white,
1400px 1700px white,
300px 1900px white,
600px 2000px white,
900px 2100px white;

animation:twinkle 1.2s infinite alternate;
}
.stars::after{
content:'';
position:fixed;
top:0;
left:0;

width:1px;
height:1px;

background:transparent;

box-shadow:
50px 150px white,
180px 250px white,
320px 100px white,
450px 350px white,
600px 220px white,
750px 480px white,
900px 300px white,
1050px 550px white,
150px 800px white,
400px 950px white,
700px 1100px white,
950px 1300px white,
250px 1600px white,
550px 1800px white,
850px 2000px white;

animation:twinkle .8s infinite alternate;
}

@keyframes twinkle{

from{
opacity:.3;
}

to{
opacity:1;
}

}
.roadmap-step{
position:relative;
overflow:hidden;
}

@keyframes pulseCard{

0%,100%{
transform:scale(1);
box-shadow:0 0 25px rgba(120,120,255,.2);
}

50%{
transform:scale(1.08);
box-shadow:
0 0 20px #ffd95c,
0 0 40px #ffd95c,
0 0 80px rgba(255,217,92,.8);
}

}

.step1{
animation:pulseCard 6s infinite;
animation-delay:0s;
}

.step2{
animation:pulseCard 6s infinite;
animation-delay:2s;
}

.step3{
animation:pulseCard 6s infinite;
animation-delay:4s;
    }

.world-clock{
padding:80px 20px;
text-align:center;
}

.world-clock h2{
font-size:2rem;
color:white;
margin-bottom:30px;
}

.clock-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.clock-card{
background:rgba(255,255,255,.08);
backdrop-filter:blur(15px);
border:1px solid rgba(255,255,255,.15);
border-radius:20px;
padding:25px;
transition:.3s;
}

.clock-card:hover{
transform:translateY(-5px);
box-shadow:0 0 25px rgba(75,107,255,.5);
}

.clock-card h3{
color:white;
margin-bottom:10px;
}

.clock-card p{
font-size:28px;
font-weight:700;
color:#ffd95c;
}

.typing{
opacity:0;
transform:translateY(20px);
animation:fadeTyping .8s forwards;
}

@keyframes fadeTyping{
from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}
}
.fade-up{
opacity:0;
transform:translateY(30px);
animation:fadeUp 1s ease forwards;
}

.delay-1{
animation-delay:.3s;
}

.delay-2{
animation-delay:.8s;
}

.delay-3{
animation-delay:1.3s;
}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}
@keyframes statusGlow{

0%,100%{
transform:scale(1);
opacity:.85;

box-shadow:
0 0 10px rgba(0,255,150,.2);
}

50%{
transform:scale(1.05);
opacity:1;

box-shadow:
0 0 25px rgba(0,255,150,.6),
0 0 50px rgba(0,255,150,.4);
}

}

.copyright-bar{

width:100%;

padding:12px 20px;

text-align:center;

font-size:13px;

color:rgba(255,255,255,.75);

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

border-top:2px solid #8b5cf6;

box-shadow:0 -5px 20px rgba(139,92,246,.3);

margin-top:50px;

}

.hero-buttons{

display:flex;

gap:15px;

margin-top:25px;

}

.primary-btn{

display:inline-block;

padding:12px 28px;

border-radius:50px;

text-decoration:none;

font-weight:600;

color:white;

background:linear-gradient(
90deg,
#4b6bff,
#8b5cf6
);

box-shadow:
0 0 20px rgba(75,107,255,.4);

}

.secondary-btn{

display:inline-block;

padding:12px 28px;

border-radius:50px;

text-decoration:none;

font-weight:600;

color:white;

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

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

backdrop-filter:blur(12px);

transition:.3s;

}

.secondary-btn:hover{

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

transform:translateY(-3px);

    }

.stat-finish{

animation: statPop 3s ease;

}

@keyframes statPop{

0%{
transform:scale(1);
}

50%{
transform:scale(1.25);

text-shadow:
0 0 20px #ffd700,
0 0 40px #ffd700,
0 0 70px #ffd700;
}

100%{
transform:scale(1);
}

}

.today-section{
padding: 60px 20px;
text-align: center;
}

.today-card{
width: 90%;
max-width: 500px;
margin: 20px auto;
padding: 25px;

background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;

backdrop-filter: blur(12px);
}

.today-card p{
margin: 12px 0;
font-size: 18px;
color: white;
}

.music-btn{
animation: pulse 2s infinite;
}

@keyframes pulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.2) rotate(10deg);
box-shadow:0 0 25px rgba(255,255,255,.4);
}

100%{
transform:scale(1);
}

}

.music-menu{
position: fixed;
bottom: 90px;
left: 20px;

width: 260px;

background: rgba(20,20,40,.95);
backdrop-filter: blur(15px);

border: 1px solid rgba(255,255,255,.1);
border-radius: 20px;

padding: 15px;

opacity: 0;
visibility: hidden;

transform: translateY(20px);

transition: .3s;
z-index: 999;
}

.music-menu.show{
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.music-menu h4{
margin-bottom: 10px;
color: white;
}

.song-item{
padding: 10px;
margin: 6px 0;

border-radius: 10px;

cursor: pointer;

color: white;

transition: .2s;
}

.song-item:hover{
background: rgba(255,255,255,.1);
}

.quote-section{
padding:80px 10%;
text-align:center;
}

.quote-card{
max-width:700px;
margin:auto;
padding:30px;
border-radius:20px;
backdrop-filter:blur(10px);
background:rgba(255,255,255,0.05);
}

#daily-quote{
font-size:1.2rem;
font-style:italic;
line-height:1.8;
margin-bottom:15px;
}

#quote-author{
opacity:0.8;
font-weight:600;
}
#welcome-overlay{
position:fixed;
inset:0;

display:flex;
justify-content:center;
align-items:center;

background:rgba(5,10,30,.55);
backdrop-filter:blur(12px);

z-index:99999;

transition:opacity .5s ease;
}

#welcome-overlay.hide{
opacity:0;
pointer-events:none;
}

.welcome-card{

width:90%;
max-width:420px;

padding:30px;

text-align:center;

border-radius:25px;

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

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

backdrop-filter:blur(20px);

box-shadow:
0 0 30px rgba(75,107,255,.25);

animation:floatCard 4s ease-in-out infinite;
}

.welcome-card h2{
margin-bottom:15px;
}

.welcome-card p{
margin:10px 0;
line-height:1.8;
}

#visitor-time{
color:#ffd95c;
font-weight:600;
}

#enter-site{

margin-top:15px;

padding:12px 28px;

border:none;
border-radius:50px;

cursor:pointer;

font-weight:600;

color:white;

background:linear-gradient(
90deg,
#4b6bff,
#8b5cf6
);
}

@keyframes floatCard{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}
#welcome-overlay{
opacity:1;
transition:opacity 0.5s ease;
}

#welcome-overlay.fade-out{
opacity:0;
pointer-events:none;
}
@media (max-width:768px){

.hero-buttons{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.cv-main-btn{
order:2;
}

.hero-buttons .secondary-btn:first-of-type{
order:1;
}

.hero-buttons .secondary-btn:last-of-type{
order:3;
}

}