/*======================================================
 MAHDI RABIE
 PREMIUM RESUME v2
 Designed for mrabie.ir

 Color Palette
 Navy
 Gold
 White
======================================================*/

:root{

--primary:#14213D;
--secondary:#23395B;
--accent:#D4AF37;
--accent-light:#F8E7A0;

--bg:#EEF3F9;
--surface:#FFFFFF;

--text:#1F2937;
--text-light:#6B7280;

--border:#E5E7EB;

--success:#1FA971;

--shadow-sm:
0 8px 25px rgba(0,0,0,.05);

--shadow:
0 20px 60px rgba(0,0,0,.10);

--shadow-lg:
0 35px 80px rgba(0,0,0,.16);

--radius:22px;

}

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

*,
*::before,
*::after{

margin:0;
padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:"Vazirmatn",sans-serif;

background:

linear-gradient(
135deg,
#edf2f8,
#dfe7f3
);

color:var(--text);

padding:60px;

overflow-x:hidden;

}

/*==========================
BACKGROUND
==========================*/

.background-grid{

position:fixed;

inset:0;

z-index:-1;

opacity:.22;

background-image:

linear-gradient(
rgba(20,33,61,.05) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(20,33,61,.05) 1px,
transparent 1px
);

background-size:

45px 45px;

}

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

.resume{

max-width:1500px;

margin:auto;

display:grid;

grid-template-columns:

360px
1fr;

background:white;

overflow:hidden;

border-radius:28px;

box-shadow:var(--shadow-lg);

position:relative;

}

/*==========================
SIDEBAR
==========================*/

.sidebar{

background:

linear-gradient(
180deg,
#16233E,
#1A2D4C,
#0F1C32
);

padding:55px 38px;

position:relative;

color:white;

overflow:hidden;

}

/* Decorative circles */

.sidebar::before{

content:"";

position:absolute;

width:420px;
height:420px;

border-radius:50%;

top:-260px;
right:-220px;
left:auto;

background:

rgba(255,255,255,.04);

}

.sidebar::after{

content:"";

position:absolute;

width:300px;
height:300px;

border-radius:50%;

bottom:-170px;
left:-140px;
right:auto;

background:

rgba(255,255,255,.05);

}

/* Gold line */

.sidebar{

border-left:

4px solid var(--accent);

}

/*==========================
PROFILE
==========================*/

.profile-card{

position:relative;

z-index:2;

text-align:center;

}

.profile-card img{

width:230px;
height:230px;

border-radius:50%;

object-fit:cover;

border:

8px solid rgba(255,255,255,.16);

box-shadow:

0 30px 70px rgba(0,0,0,.35);

transition:.45s;

}

.profile-card img:hover{

transform:

scale(1.05)
rotate(-1deg);

}

.profile-card h1{

margin-top:28px;

font-size:34px;

font-weight:700;

letter-spacing:.4px;

}

.profile-card h2{

margin-top:10px;

font-size:18px;

font-weight:500;

color:#D9E2F0;

}

.subtitle{

margin-top:18px;

display:inline-block;

padding:

10px 18px;

border-radius:100px;

background:

linear-gradient(
135deg,
var(--accent),
#E5C75A
);

color:#111;

font-weight:600;

font-size:13px;

}

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

.section{

margin-top:45px;

position:relative;

z-index:2;

}

.section h3{

display:flex;

align-items:center;

gap:10px;

font-size:19px;

margin-bottom:18px;

padding-bottom:12px;

border-bottom:

2px solid rgba(255,255,255,.10);

font-weight:600;

letter-spacing:.5px;

}

.section h3::after{

content:"";

flex:1;

height:2px;

background:

linear-gradient(
270deg,
var(--accent),
transparent
);

}

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

.contact-item{

display:flex;

align-items:center;

gap:14px;

margin-bottom:18px;

font-size:14px;

line-height:1.6;

word-break:break-word;

}

.contact-item a{

color:white;

text-decoration:none;

transition:.3s;

direction: ltr;

}

.contact-item:hover a{

color:var(--accent);

}

.contact-item i{

width:42px;
height:42px;

display:flex;

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

background:

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

border-radius:14px;

color:var(--accent);

font-size:16px;

transition:.35s;

}

.contact-item:hover i{

background:var(--accent);

color:#111;

transform:translateY(-3px);

box-shadow:

0 8px 20px rgba(212,175,55,.35);

}

/*==========================
SKILLS
==========================*/

.skills{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.skill{

padding:

9px 16px;

border-radius:30px;

background:

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

border:

1px solid rgba(255,255,255,.08);

font-size:13px;

font-weight:500;

cursor:default;

transition:.35s;

}

.skill:hover{

background:

linear-gradient(
135deg,
var(--accent),
#E9C95B
);

color:#111;

transform:

translateY(-3px);

box-shadow:

0 10px 25px rgba(212,175,55,.25);

}

/*======================================================
MAIN CONTENT
======================================================*/

.content{

position:relative;

padding:70px;

background:var(--surface);

overflow:hidden;

}

/* Decorative background */

.content::before{

content:"";

position:absolute;

width:650px;
height:650px;

border-radius:50%;

top:-320px;
left:-320px;
right:auto;
background:

radial-gradient(
circle,
rgba(212,175,55,.12),
transparent 70%
);

pointer-events:none;

}

.content::after{

content:"";

position:absolute;

width:450px;
height:450px;

bottom:-250px;
right:-250px;
left:auto;
border-radius:50%;

background:

radial-gradient(
circle,
rgba(20,33,61,.05),
transparent 75%
);

pointer-events:none;

}

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

.hero{

position:relative;

z-index:2;

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

padding-bottom:50px;

margin-bottom:55px;

border-bottom:1px solid var(--border);

}

.hero-text{
text-align:right;
max-width:760px;

}

.badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 20px;

background:

rgba(31,169,113,.12);

color:var(--success);

border-radius:50px;

font-size:13px;

font-weight:600;

margin-bottom:28px;

}

.badge::before{

content:"";

width:10px;
height:10px;

background:var(--success);

border-radius:50%;

box-shadow:

0 0 0 6px rgba(31,169,113,.15);

}

.hero h2{

font-size:52px;

font-weight:800;

line-height:1.2;

color:var(--primary);

margin-bottom:22px;

}

.hero h2 span{

color:var(--accent);

}

.hero p{

font-size:17px;

line-height:1.9;

color:var(--text-light);

margin-bottom:35px;

}

/*======================================================
BUTTONS
======================================================*/

.hero-actions{

display:flex;

gap:18px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:50px;

font-weight:600;

font-size:15px;

text-decoration:none;

transition:.35s;

}

.btn-primary{

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

box-shadow:

0 18px 40px rgba(20,33,61,.25);

}

.btn-primary:hover{

transform:

translateY(-4px);

box-shadow:

0 28px 60px rgba(20,33,61,.35);

}

.btn-secondary{

border:2px solid var(--accent);

color:var(--primary);

background:white;

}

.btn-secondary:hover{

background:var(--accent);

color:#111;

transform:translateY(-4px);

}

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

.resume-section{

position:relative;

margin-bottom:65px;

animation:fadeUp .7s ease both;

}

.section-title{

display:flex;

align-items:center;

gap:14px;

font-size:31px;

font-weight:700;

margin-bottom:35px;

color:var(--primary);

}

.section-title i{

width:52px;
height:52px;

display:flex;

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

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

border-radius:16px;

font-size:20px;

box-shadow:

0 10px 25px rgba(20,33,61,.18);

}

/*======================================================
TIMELINE
======================================================*/

.timeline{

position:relative;

padding-right:45px;
padding-left:0;
}

.timeline::before{

content:"";

position:absolute;

right:10px;
left:auto;

top:0;

bottom:0;

width:4px;

border-radius:20px;

background:

linear-gradient(
180deg,
var(--accent),
var(--secondary)
);

}

.timeline-item{

position:relative;

margin-bottom:45px;

}

.timeline-dot{

position:absolute;

right:-43px;
left:auto;

top:14px;

width:20px;
height:20px;

border-radius:50%;

background:var(--accent);

border:5px solid white;

box-shadow:

0 0 0 6px rgba(212,175,55,.18);

}

.timeline-content{

background:white;

padding:34px;

border-radius:22px;

border:1px solid var(--border);

box-shadow:var(--shadow-sm);

transition:.35s;

}

.timeline-content:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.timeline-date{

display:inline-block;

padding:8px 18px;

margin-bottom:18px;

background:

linear-gradient(
135deg,
var(--secondary),
var(--primary)
);

color:white;

font-size:13px;

font-weight:600;

border-radius:40px;

}

.timeline-content h3{

font-size:26px;

margin-bottom:8px;

color:var(--primary);

}

.timeline-content h4{

font-size:17px;

font-weight:500;

color:var(--secondary);

margin-bottom:20px;

}

.timeline-content p{

line-height:1.8;

color:var(--text-light);

margin-bottom:20px;

}

.timeline-content ul{

padding-right:22px;
padding-left:0;

}

.timeline-content li{

margin-bottom:12px;

line-height:1.8;

color:var(--text-light);

}

/*======================================================
FEATURED PROJECTS
======================================================*/

.projects{

display:grid;

grid-template-columns:

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

gap:30px;

}

.project{

position:relative;

background:#fff;

border-radius:24px;

padding:32px;

overflow:hidden;

border:1px solid var(--border);

box-shadow:var(--shadow-sm);

transition:
transform .4s,
box-shadow .4s;

}

.project::before{

content:"";

position:absolute;

right:0;
left:auto;
top:0;

width:100%;
height:6px;

background:

linear-gradient(
90deg,
var(--accent),
var(--primary)
);

}

.project::after{

content:"";

position:absolute;

left:-70px;
right:auto;
top:-70px;

width:180px;
height:180px;

border-radius:50%;

background:

radial-gradient(
circle,
rgba(212,175,55,.12),
transparent
);

}

.project:hover{

transform:

translateY(-10px);

box-shadow:var(--shadow);

}

.project-header{

display:flex;
position: relative;
z-index: 10;
justify-content:space-between;

align-items:center;

margin-bottom:20px;

}

.project-header h3{

font-size:26px;

font-weight:700;

color:var(--primary);

}

.project-header a{

width:46px;
height:46px;

display:flex;

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

border-radius:14px;

background:#F4F6FB;

font-size:18px;

transition:.35s;

}

.project-header a:hover{

background:var(--accent);

color:#111;

transform:rotate(12deg);

}

.project p{

font-size:15px;

line-height:1.9;

color:var(--text-light);

margin-bottom:24px;

}

.tech-stack{

display:flex;

flex-wrap:wrap;

gap:10px;

}

.tech-stack span{

padding:

9px 15px;

border-radius:50px;

background:#F5F7FB;

font-size:13px;

font-weight:600;

color:var(--secondary);

transition:.3s;

}

.tech-stack span:hover{

background:var(--accent);

color:#111;

transform:translateY(-3px);

}

/*======================================================
EDUCATION
======================================================*/

.education-card{

position:relative;

padding:35px;

background:white;

border-radius:22px;

border-right:8px solid var(--accent);
border-left:none;

box-shadow:var(--shadow-sm);

transition:.35s;

}

.education-card:hover{

transform:translateY(-8px);

box-shadow:var(--shadow);

}

.education-card h3{

font-size:27px;

margin-bottom:12px;

color:var(--primary);

}

.education-card p{

font-size:18px;

margin-bottom:10px;

color:var(--secondary);

}

.education-card span{

display:inline-block;

padding:

8px 18px;

border-radius:40px;

background:

rgba(20,33,61,.08);

font-weight:600;

}

/*======================================================
SOFT SKILLS
======================================================*/

.soft-skills{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.soft-skills span{

padding:

14px 22px;

border-radius:50px;

background:white;

border:1px solid var(--border);

font-size:15px;

font-weight:600;

transition:.35s;

box-shadow:

0 8px 18px rgba(0,0,0,.04);

}

.soft-skills span:hover{

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

transform:

translateY(-5px);

}

/*======================================================
INTERESTS
======================================================*/

.interest-list{

display:grid;

grid-template-columns:

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

gap:22px;

}

.interest{

display:flex;

align-items:center;

gap:16px;

padding:24px;

border-radius:20px;

background:white;

border:1px solid var(--border);

transition:.35s;

box-shadow:

0 8px 20px rgba(0,0,0,.04);

}

.interest:hover{

transform:

translateY(-8px);

box-shadow:var(--shadow);

}

.interest i{

width:54px;
height:54px;

display:flex;

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

border-radius:18px;

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

font-size:22px;

}

.interest{

font-weight:600;

}

/*======================================================
CERTIFICATIONS
======================================================*/

.coming{

padding:28px;

background:

linear-gradient(
135deg,
#FAFBFD,
#F4F7FB
);

border-left:6px solid var(--accent);

border-radius:20px;

font-size:16px;

line-height:1.9;

color:var(--text-light);

box-shadow:

0 10px 25px rgba(0,0,0,.04);

}

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

.resume-footer{

margin-top:90px;

padding-top:45px;

border-top:1px solid var(--border);

display:flex;

flex-direction:column;

gap:30px;

}

.resume-footer h3{

font-size:30px;

color:var(--primary);

font-weight:700;

}

.resume-footer p{

color:var(--text-light);

line-height:1.8;

}

.footer-links{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-top:10px;

}

.footer-links a{

display:flex;

align-items:center;

gap:10px;

padding:14px 22px;

background:white;

border:1px solid var(--border);

border-radius:14px;

font-weight:600;

color:var(--primary);

transition:.35s;

box-shadow:

0 8px 20px rgba(0,0,0,.04);

}

.footer-links a:hover{

background:

linear-gradient(
135deg,
var(--primary),
var(--secondary)
);

color:white;

transform:translateY(-5px);

box-shadow:var(--shadow);

}

.footer-links a i{

font-size:18px;

}

.copyright{

padding-top:10px;

font-size:14px;

color:#888;

}

/*======================================================
LINKS
======================================================*/

a{

text-decoration:none;

color:inherit;

transition:.3s;

}

a:hover{

color:var(--accent);

}

/*======================================================
SCROLLBAR
======================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf1f6;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
var(--secondary),
var(--primary)
);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--accent);

}

/*======================================================
TEXT SELECTION
======================================================*/

::selection{

background:var(--accent);

color:#111;

}

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

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(45px);

}

to{

opacity:1;

transform:

translateY(0);

}

}

@keyframes fadeLeft{

from{

opacity:0;

transform:

translateX(-50px);

}

to{

opacity:1;

transform:

translateX(0);

}

}

@keyframes zoomIn{

from{

opacity:0;

transform:

scale(.92);

}

to{

opacity:1;

transform:

scale(1);

}

}

.profile-card{

animation:

zoomIn .8s ease;

}

.sidebar .section{

animation:

fadeLeft .8s ease both;

}

.resume-section{

animation:

fadeUp .8s ease both;

}

/*======================================================
HOVER EFFECTS
======================================================*/

.profile-card img{

transition:

transform .45s,

box-shadow .45s,

filter .45s;

}

.profile-card img:hover{

filter:

brightness(1.05);

transform:

scale(1.05)

rotate(-1deg);

box-shadow:

0 35px 90px rgba(0,0,0,.35);

}

.timeline-content:hover h3,

.project:hover h3{

color:var(--accent);

}

.contact-item{

transition:

transform .3s;

}

.contact-item:hover{

transform:

translateX(-6px)

}

.skill{

transition:

all .35s;

}

.skill:hover{

letter-spacing:.4px;

}

.tech-stack span{

transition:

all .3s;

}

.soft-skills span{

transition:

all .35s;

}

.interest{

transition:

all .35s;

}

.footer-links a{

transition:

all .35s;

}

/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:1300px){

.resume{

grid-template-columns:

320px 1fr;

}

.content{

padding:55px;

}

}

@media(max-width:1100px){

.resume{

grid-template-columns:1fr;

}

.sidebar{

border-right:none;

border-bottom:

5px solid var(--accent);

}

.content{

padding:50px;

}

.hero{

flex-direction:column;

align-items:flex-start;

}

.projects{

grid-template-columns:1fr;

}

.interest-list{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

body{

padding:15px;

}

.profile-card img{

width:170px;
height:170px;

}

.profile-card h1{

font-size:28px;

}

.hero h2{

font-size:36px;

}

.hero p{

font-size:15px;

}

.section-title{

font-size:25px;

}

.timeline{

padding-right:30px;
padding-left:0;

}

.timeline::before{
right:10px;
left:auto;
}

.timeline-dot{
right:-25px;
left:auto;
}

.timeline-content{

padding:24px;

}

.interest-list{

grid-template-columns:1fr;

}

.hero-actions{

flex-direction:column;

width:100%;

}

.hero-actions a{

width:100%;

justify-content:center;

}

.footer-links{

flex-direction:column;

}

.footer-links a{

width:100%;

justify-content:center;

}

}

@media(max-width:480px){

.content{

padding:30px 22px;

}

.sidebar{

padding:35px 25px;

}

.hero h2{

font-size:30px;

}

.section-title{

font-size:22px;

}

.project{

padding:24px;

}

.timeline-content{

padding:22px;

}

.education-card{

padding:24px;

}

}

/*======================================================
PRINT (A4)
======================================================*/

@media print{

body{

background:white;

padding:0;

}

.background-grid{

display:none;

}

.resume{

width:210mm;

min-height:297mm;

margin:0;

border-radius:0;

box-shadow:none;

}

.sidebar{

print-color-adjust:exact;

-webkit-print-color-adjust:exact;

}

.content{

padding:28mm;

}

.project,

.timeline-content,

.education-card,

.interest{

break-inside:avoid;

page-break-inside:avoid;

}

.hero-actions{

display:none;

}

}

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

@keyframes float {

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

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

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

}

@keyframes pulseGlow {

    0% {
        box-shadow: 0 0 0 rgba(212,175,55,.35);
    }

    50% {
        box-shadow: 0 0 35px rgba(212,175,55,.45);
    }

    100% {
        box-shadow: 0 0 0 rgba(212,175,55,.35);
    }

}

.badge{

    animation:
    pulseGlow 2.5s infinite;

}

/*======================================================
GLASS DECORATIONS
======================================================*/

/* .hero::before{

    content:"";

    position:absolute;

    left:-80px;
    right:auto;
    top:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    backdrop-filter:blur(12px);

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

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

} */

.resume::before{

    content:"";

    position:absolute;

    right:-120px;
    left:auto;
    bottom:-120px;

    width:260px;
    height:260px;

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(212,175,55,.08),
    transparent);

}

/*======================================================
PREMIUM CARD EFFECT
======================================================*/

.timeline-content,
.project,
.education-card,
.interest{

    transition:
    transform .35s,
    box-shadow .35s,
    border-color .35s;

}

.timeline-content:hover,
.project:hover,
.education-card:hover,
.interest:hover{

    border-color:

    rgba(212,175,55,.35);

}

/*======================================================
IMAGE OVERLAY
======================================================*/

.profile-card{

    position:relative;
}

.profile-card::after{

    content:"";

    position:absolute;

   right:52%;
    left:auto;
    transform:translateX(50%);

    top:-6px;

    width:240px;
    height:240px;

    border-radius:50%;

    border:

    1px dashed rgba(255,255,255,.15);

    pointer-events:none;

}

/*======================================================
PROJECT ICON
======================================================*/

.project::before{

    transition:.4s;

}

.project:hover::before{

    height:10px;

}

/*======================================================
TIMELINE EFFECT
======================================================*/

.timeline-dot{

    transition:.35s;

}

.timeline-item:hover .timeline-dot{

    transform:scale(1.25);

    background:white;

    border-color:var(--accent);

}

/*======================================================
FOCUS STATES
======================================================*/

a:focus,
button:focus{

    outline:none;

    box-shadow:

    0 0 0 4px rgba(212,175,55,.25);

}

/*======================================================
SMOOTH ICONS
======================================================*/

i{

    transition:.3s;

}

.project:hover i,
.footer-links a:hover i,
.contact-item:hover i{

    transform:scale(1.15);

}

/*======================================================
PREMIUM SHADOWS
======================================================*/

.resume{

    box-shadow:

    0 45px 120px rgba(0,0,0,.15);

}

.hero{

    position:relative;

}

.hero::after{

    content:"";

    position:absolute;

    right:0;
    left:auto;
    bottom:-2px;

    width:180px;

    height:4px;

    border-radius:100px;

    background:

    linear-gradient(
    270deg,
    var(--accent),
    transparent);

}

/*======================================================
LIGHT MODE IMPROVEMENTS
======================================================*/

body{

    background:

    radial-gradient(circle at top left,#ffffff,#eef3f9);

}

/*======================================================
PREMIUM PRINT
======================================================*/

@page{

    size:A4;

    margin:10mm;

}

/*======================================================
ACCESSIBILITY
======================================================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

button{

    font-family:inherit;

}

body{
    direction: rtl;
}

.hero,
.timeline-content,
.project,
.education-card,
.coming,
.resume-footer,
.contact-item{
    text-align:right;
}

.language-switch{

    position:absolute;

    top:30px;

    left:35px;

    right:auto;

    z-index:100;

    display:flex;

    align-items:center;

    padding:5px;

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

    backdrop-filter:blur(14px);

    border:1px solid rgba(20,33,61,.08);

    border-radius:999px;

    box-shadow:
        0 12px 30px rgba(0,0,0,.08);

}

.language-switch a{

    padding:7px 17px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;

    color:var(--primary);

    transition:.35s;

}

.language-switch a:hover{

    background:#F5F7FB;

}

.language-switch a.active{

    background:linear-gradient(
        135deg,
        var(--accent),
        #E9C95B);

    color:#111;

    box-shadow:
        0 8px 20px rgba(212,175,55,.35);

}

@media(max-width:768px){

.language-switch{

    position:static;

    margin-bottom:25px;

    width:fit-content;

}

}

/*======================================================
END
======================================================*/