/* =========================================================
   ROOT
========================================================= */

:root{

    --navy:#08111f;
    --navy-2:#0c1728;
    --navy-3:#101e32;

    --gold:#d7ad4f;
    --gold-light:#f1d88a;
    --gold-dark:#a77b22;

    --white:#ffffff;
    --white-soft:#f4f6f9;

    --text:#182235;
    --text-light:#6e7786;

    --border:rgba(255,255,255,.10);
    --border-dark:rgba(15,25,40,.10);

    --shadow:
        0 25px 80px rgba(5,15,30,.12);

    --shadow-dark:
        0 25px 80px rgba(0,0,0,.35);

    --radius:22px;

    --transition:
        .45s cubic-bezier(.2,.8,.2,1);

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    background:
        var(--white);

    color:
        var(--text);

    overflow-x:hidden;

}


body.menu-open{

    overflow:hidden;

}


img{

    max-width:100%;
    display:block;

}


a{

    color:inherit;
    text-decoration:none;

}


button,
input,
textarea{

    font-family:inherit;

}


button{

    border:none;
    cursor:pointer;

}


ul{

    list-style:none;

}


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

.container{

    width:
        min(1180px, calc(100% - 40px));

    margin:auto;

}


/* =========================================================
   PRELOADER
========================================================= */

.preloader{

    position:fixed;

    inset:0;

    z-index:99999;

    background:
        var(--navy);

    display:flex;

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

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


.preloader.hide{

    opacity:0;
    visibility:hidden;

}


.loader-content{

    width:220px;

    text-align:center;

}


.loader-logo{

    color:
        var(--white);

    font-size:42px;

    font-weight:900;

    letter-spacing:4px;

    margin-bottom:20px;

}


.loader-logo span{

    color:
        var(--gold);

}


.loader-line{

    width:100%;

    height:2px;

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

    overflow:hidden;

}


.loader-line span{

    display:block;

    width:0;

    height:100%;

    background:
        var(--gold);

    animation:
        loader 1.5s ease forwards;

}


@keyframes loader{

    to{
        width:100%;
    }

}


/* =========================================================
   HEADER
========================================================= */

.header{

    position:fixed;

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

    z-index:1000;

    padding:22px 0;

    transition:
        var(--transition);

}


.header.scrolled{

    padding:12px 0;

    background:
        rgba(8,17,31,.92);

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 10px 40px rgba(0,0,0,.18);

}


.nav-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}


/* =========================================================
   LOGO
========================================================= */

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

}


.logo-symbol{

    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    background:
        var(--gold);

    color:
        var(--navy);

    font-weight:900;

    font-size:20px;

    transform:
        rotate(45deg);

    border-radius:5px;

}


.logo-symbol::first-letter{

    display:block;

}


.logo-text{

    color:
        var(--white);

    font-size:18px;

    font-weight:800;

    letter-spacing:1px;

}


.logo-text span{

    color:
        var(--gold);

}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar{

    display:flex;

    align-items:center;

    gap:28px;

}


.nav-link{

    position:relative;

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

    font-size:13px;

    font-weight:600;

    transition:
        var(--transition);

}


.nav-link::after{

    content:"";

    position:absolute;

    bottom:-8px;

    right:0;

    width:0;

    height:2px;

    background:
        var(--gold);

    transition:
        var(--transition);

}


.nav-link:hover,
.nav-link.active{

    color:
        var(--white);

}


.nav-link:hover::after,
.nav-link.active::after{

    width:100%;

}


/* =========================================================
   NAV ACTIONS
========================================================= */

.nav-actions{

    display:flex;

    align-items:center;

    gap:15px;

}


.nav-cv{

    display:flex;

    align-items:center;

    gap:9px;

    padding:11px 18px;

    border:1px solid
        rgba(215,173,79,.55);

    color:
        var(--gold-light);

    font-size:12px;

    font-weight:700;

    transition:
        var(--transition);

}


.nav-cv:hover{

    background:
        var(--gold);

    color:
        var(--navy);

    border-color:
        var(--gold);

    transform:
        translateY(-2px);

}


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

.menu-btn{

    display:none;

    width:42px;
    height:42px;

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

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

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

    flex-direction:column;

    gap:5px;

}


.menu-btn span{

    width:19px;

    height:2px;

    background:
        var(--white);

    transition:
        var(--transition);

}


.menu-btn.active span:nth-child(1){

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-btn.active span:nth-child(2){

    opacity:0;

}


.menu-btn.active span:nth-child(3){

    transform:
        translateY(-7px)
        rotate(-45deg);

}


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

.hero{

    position:relative;

    min-height:
        100vh;

    background:
        var(--navy);

    color:
        var(--white);

    overflow:hidden;

    display:flex;

    align-items:center;

    padding:
        130px 0 80px;

}


.hero-grid{

    position:absolute;

    inset:0;

    opacity:.18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.06) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.06) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent
        );

}


.hero-glow{

    position:absolute;

    width:550px;
    height:550px;

    border-radius:50%;

    filter:
        blur(100px);

    pointer-events:none;

}


.hero-glow-one{

    top:-250px;
    right:-150px;

    background:
        rgba(215,173,79,.15);

}


.hero-glow-two{

    bottom:-350px;
    left:-150px;

    background:
        rgba(30,100,170,.15);

}


.hero-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items:center;

    gap:80px;

}


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

.hero-content{

    max-width:650px;

}


.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:9px;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(215,173,79,.25);

    background:
        rgba(215,173,79,.06);

    color:
        var(--gold-light);

    font-size:11px;

    margin-bottom:22px;

}


.badge-dot{

    width:7px;
    height:7px;

    border-radius:50%;

    background:
        #55d88b;

    box-shadow:
        0 0 12px #55d88b;

}


.hero-small-title{

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

    font-size:15px;

    margin-bottom:4px;

}


.hero-title{

    font-size:
        clamp(58px, 8vw, 105px);

    line-height:.9;

    font-weight:900;

    letter-spacing:-5px;

}


.hero-title span{

    display:block;

    color:
        transparent;

    -webkit-text-stroke:
        1.5px var(--gold);

}


.hero-role{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:24px;

    font-size:19px;

    font-weight:700;

    color:
        var(--white-soft);

}


.hero-role span{

    width:42px;

    height:2px;

    background:
        var(--gold);

}


.hero-description{

    max-width:580px;

    margin-top:22px;

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

    line-height:2;

    font-size:14px;

}


.hero-buttons{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:30px;

    flex-wrap:wrap;

}


.btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:50px;

    padding:
        0 22px;

    font-size:13px;

    font-weight:800;

    transition:
        var(--transition);

}


.btn-primary{

    background:
        var(--gold);

    color:
        var(--navy);

}


.btn-primary:hover{

    background:
        var(--gold-light);

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 35px rgba(215,173,79,.22);

}


.btn-outline{

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

    color:
        var(--white);

}


.btn-outline:hover{

    border-color:
        var(--gold);

    color:
        var(--gold-light);

    transform:
        translateY(-4px);

}


.hero-social{

    display:flex;

    align-items:center;

    gap:9px;

    margin-top:35px;

}


.hero-social a{

    width:36px;
    height:36px;

    display:grid;

    place-items:center;

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

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

    transition:
        var(--transition);

}


.hero-social a:hover{

    color:
        var(--navy);

    background:
        var(--gold);

    border-color:
        var(--gold);

    transform:
        translateY(-4px);

}


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

.hero-visual{

    position:relative;

    min-height:610px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        transform .2s ease-out;

}


.visual-number{

    position:absolute;

    top:20px;

    left:0;

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

    font-size:100px;

    font-weight:900;

    line-height:1;

}


.photo-frame{

    position:relative;

    width:
        min(430px, 100%);

    aspect-ratio:
        4 / 5;

}


.photo-border{

    position:absolute;

    inset:25px -20px -20px 20px;

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

    opacity:.7;

}


.photo-wrapper{

    position:absolute;

    inset:0;

    overflow:hidden;

    background:
        #18243a;

    z-index:2;

}


.profile-image{

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        grayscale(15%);

    transition:
        transform 1s ease;

}


.photo-frame:hover
.profile-image{

    transform:
        scale(1.05);

}


.photo-wrapper::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(8,17,31,.5),
            transparent 45%
        );

}


.photo-label{

    position:absolute;

    z-index:4;

    bottom:25px;

    right:-30px;

    display:flex;

    flex-direction:column;

    padding:
        12px 18px;

    background:
        var(--gold);

    color:
        var(--navy);

}


.photo-label span{

    font-size:9px;

    letter-spacing:2px;

    font-weight:700;

}


.photo-label strong{

    font-size:17px;

    letter-spacing:1px;

}


.floating-card{

    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:12px;

    padding:
        13px 16px;

    background:
        rgba(17,29,48,.85);

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

    backdrop-filter:
        blur(15px);

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

}


.card-top{

    top:105px;

    right:-30px;

}


.card-bottom{

    bottom:100px;

    left:-35px;

}


.floating-icon{

    width:40px;
    height:40px;

    display:grid;

    place-items:center;

    background:
        rgba(215,173,79,.12);

    color:
        var(--gold);

}


.floating-card strong{

    display:block;

    color:
        var(--white);

    font-size:18px;

    line-height:1.2;

}


.floating-card small{

    display:block;

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

    font-size:9px;

}


.visual-circle{

    position:absolute;

    border:
        1px solid
        rgba(215,173,79,.20);

    border-radius:50%;

}


.circle-one{

    width:520px;
    height:520px;

    z-index:0;

}


.circle-two{

    width:620px;
    height:620px;

    opacity:.5;

}


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

.hero-scroll{

    position:absolute;

    bottom:30px;

    right:50%;

    transform:
        translateX(50%);

    display:flex;

    align-items:center;

    gap:12px;

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

    font-size:8px;

    letter-spacing:3px;

    writing-mode:
        vertical-rl;

}


.scroll-line{

    width:1px;

    height:45px;

    background:
        linear-gradient(
            to bottom,
            var(--gold),
            transparent
        );

}


/* =========================================================
   STATS
========================================================= */

.stats-section{

    background:
        var(--white);

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

}


.stats-grid{

    display:grid;

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

}


.stat-item{

    position:relative;

    padding:
        38px 25px;

    text-align:center;

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

}


.stat-item:last-child{

    border-left:none;

}


.stat-number{

    font-size:40px;

    font-weight:900;

    color:
        var(--navy);

}


.stat-plus{

    color:
        var(--gold-dark);

    font-size:22px;

    font-weight:800;

}


.stat-item p{

    color:
        var(--text-light);

    font-size:12px;

    margin-top:2px;

}


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

.section{

    padding:
        120px 0;

}


.section-heading{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:65px;

}


.section-number{

    color:
        var(--gold-dark);

    font-size:13px;

    font-weight:900;

    letter-spacing:2px;

    padding-top:7px;

}


.section-label{

    display:block;

    color:
        var(--gold-dark);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:9px;

}


.section-heading h2{

    font-size:
        clamp(34px, 5vw, 58px);

    line-height:1.2;

    font-weight:900;

    color:
        var(--navy);

}


.section-heading h2 span{

    color:
        var(--gold-dark);

}


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

.about-section{

    background:
        var(--white-soft);

}


.about-grid{

    display:grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:80px;

    align-items:center;

}


.about-image{

    position:relative;

    min-height:540px;

}


.about-image img{

    position:absolute;

    inset:
        0 35px 35px 0;

    width:
        calc(100% - 35px);

    height:
        calc(100% - 35px);

    object-fit:cover;

    filter:
        grayscale(20%);

}


.image-decoration{

    position:absolute;

    right:0;
    bottom:0;

    width:90%;

    height:90%;

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

}


.image-caption{

    position:absolute;

    left:-15px;

    bottom:30px;

    background:
        var(--navy);

    color:
        var(--white);

    padding:
        18px 25px;

    display:flex;

    flex-direction:column;

}


.image-caption span{

    font-size:9px;

    color:
        var(--gold);

    letter-spacing:2px;

}


.image-caption strong{

    font-size:20px;

    letter-spacing:2px;

}


.about-content h3{

    font-size:
        clamp(28px,4vw,45px);

    line-height:1.35;

    color:
        var(--navy);

    margin-bottom:22px;

}


.about-content p{

    color:
        var(--text-light);

    line-height:2;

    font-size:14px;

    margin-bottom:15px;

}


.about-details{

    display:grid;

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

    margin-top:30px;

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

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

}


.detail{

    padding:
        16px;

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

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

}


.detail span{

    display:block;

    color:
        var(--text-light);

    font-size:10px;

    margin-bottom:4px;

}


.detail strong{

    color:
        var(--navy);

    font-size:12px;

}


.text-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    color:
        var(--navy);

    font-size:12px;

    font-weight:800;

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

    padding-bottom:6px;

}


.text-link i{

    color:
        var(--gold-dark);

    transition:
        var(--transition);

}


.text-link:hover i{

    transform:
        translateX(-6px);

}


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

.skills-section{

    background:
        var(--navy);

    color:
        var(--white);

}


.skills-section
.section-heading h2{

    color:
        var(--white);

}


.skills-section
.section-label{

    color:
        var(--gold-light);

}


.skills-section
.section-number{

    color:
        var(--gold);

}


.skills-layout{

    display:grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:100px;

    align-items:start;

}


.skills-intro{

    position:sticky;

    top:120px;

}


.mini-title{

    font-size:9px;

    color:
        var(--gold);

    letter-spacing:3px;

}


.skills-intro h3{

    font-size:
        clamp(28px,4vw,45px);

    line-height:1.35;

    margin-top:15px;

}


.skills-intro h3 strong{

    color:
        var(--gold);

}


.skills-intro p{

    margin-top:20px;

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

    font-size:13px;

    line-height:2;

}


.skill-tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:25px;

}


.skill-tags span{

    padding:
        7px 12px;

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

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

    font-size:10px;

}


.skills-list{

    display:flex;

    flex-direction:column;

    gap:27px;

}


.skill-info{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}


.skill-info span{

    font-size:13px;

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

}


.skill-info strong{

    font-size:11px;

    color:
        var(--gold-light);

}


.skill-bar{

    height:4px;

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

    overflow:hidden;

}


.skill-bar span{

    display:block;

    height:100%;

    background:
        linear-gradient(
            90deg,
            var(--gold-dark),
            var(--gold-light)
        );

    transform:
        scaleX(0);

    transform-origin:
        right;

    transition:
        transform 1.3s cubic-bezier(.2,.8,.2,1);

}


.revealed .skill-bar span{

    transform:
        scaleX(1);

}


/* =========================================================
   EXPERIENCE
========================================================= */

.experience-section{

    background:
        var(--white);

}


.timeline{

    position:relative;

    max-width:950px;

    margin:auto;

}


.timeline::before{

    content:"";

    position:absolute;

    top:0;
    bottom:0;

    right:145px;

    width:1px;

    background:
        var(--border-dark);

}


.timeline-item{

    position:relative;

    display:grid;

    grid-template-columns:
        120px 1fr;

    gap:55px;

    padding-bottom:65px;

}


.timeline-item:last-child{

    padding-bottom:0;

}


.timeline-dot{

    position:absolute;

    right:140px;

    top:3px;

    width:11px;
    height:11px;

    border-radius:50%;

    background:
        var(--gold);

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

    box-shadow:
        0 0 0 1px var(--gold);

    transform:
        translateX(50%);

}


.timeline-date{

    color:
        var(--gold-dark);

    font-size:11px;

    font-weight:800;

    padding-top:0;

}


.timeline-content{

    padding-right:35px;

}


.timeline-content span{

    font-size:9px;

    color:
        var(--text-light);

    letter-spacing:2px;

}


.timeline-content h3{

    color:
        var(--navy);

    font-size:24px;

    margin-top:7px;

}


.timeline-content h4{

    color:
        var(--gold-dark);

    font-size:12px;

    margin-top:3px;

}


.timeline-content p{

    color:
        var(--text-light);

    font-size:13px;

    line-height:2;

    margin-top:14px;

    max-width:650px;

}


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

.projects-section{

    background:
        var(--white-soft);

}


.projects-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

}


.projects-header
.section-heading{

    margin-bottom:65px;

}


.view-all{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:11px;

    font-weight:800;

    color:
        var(--navy);

    margin-bottom:70px;

}


.view-all i{

    color:
        var(--gold-dark);

    transition:
        var(--transition);

}


.view-all:hover i{

    transform:
        translateX(-6px);

}


.projects-grid{

    display:grid;

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

    gap:20px;

}


.project-card{

    position:relative;

    height:390px;

    overflow:hidden;

    background:
        var(--navy);

}


.project-large{

    grid-row:
        span 2;

    height:800px;

}


.project-wide{

    grid-column:
        span 2;

}


.project-image{

    position:absolute;

    inset:0;

}


.project-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .9s
        cubic-bezier(.2,.8,.2,1);

}


.project-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(5,12,22,.95),
            rgba(5,12,22,.05) 70%
        );

    z-index:1;

}


.project-card:hover
.project-image img{

    transform:
        scale(1.08);

}


.project-overlay{

    position:absolute;

    z-index:2;

    right:0;
    left:0;

    bottom:0;

    padding:30px;

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

}


.project-overlay span{

    font-size:9px;

    color:
        var(--gold-light);

    letter-spacing:2px;

}


.project-overlay h3{

    color:
        var(--white);

    font-size:25px;

    margin-top:6px;

}


.project-overlay a{

    width:45px;
    height:45px;

    display:grid;

    place-items:center;

    background:
        var(--gold);

    color:
        var(--navy);

    transition:
        var(--transition);

}


.project-overlay a:hover{

    background:
        var(--white);

    transform:
        rotate(-45deg);

}


/* =========================================================
   SERVICES
========================================================= */

.services-section{

    background:
        var(--white);

}


.services-grid{

    display:grid;

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

    gap:15px;

}


.service-card{

    position:relative;

    min-height:350px;

    padding:30px;

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

    background:
        var(--white);

    transition:
        var(--transition);

    overflow:hidden;

}


.service-card::before{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:0;
    height:4px;

    background:
        var(--gold);

    transition:
        var(--transition);

}


.service-card:hover{

    transform:
        translateY(-10px);

    box-shadow:
        var(--shadow);

}


.service-card:hover::before{

    width:100%;

}


.service-number{

    position:absolute;

    top:20px;
    left:20px;

    color:
        rgba(8,17,31,.08);

    font-size:42px;

    font-weight:900;

}


.service-icon{

    width:55px;
    height:55px;

    display:grid;

    place-items:center;

    background:
        var(--navy);

    color:
        var(--gold);

    font-size:19px;

    margin-bottom:40px;

}


.service-card h3{

    color:
        var(--navy);

    font-size:20px;

}


.service-card p{

    color:
        var(--text-light);

    font-size:12px;

    line-height:2;

    margin-top:12px;

}


.service-card a{

    position:absolute;

    bottom:25px;
    right:30px;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:10px;

    font-weight:800;

    color:
        var(--navy);

}


.service-card a i{

    color:
        var(--gold-dark);

    transition:
        var(--transition);

}


.service-card:hover a i{

    transform:
        translateX(-5px);

}


.featured-service{

    background:
        var(--navy);

    border-color:
        var(--navy);

}


.featured-service h3{

    color:
        var(--white);

}


.featured-service p{

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

}


.featured-service a{

    color:
        var(--white);

}


.featured-service .service-icon{

    background:
        var(--gold);

    color:
        var(--navy);

}


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

.education-section{

    background:
        var(--white-soft);

}


.education-grid{

    display:grid;

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

    gap:18px;

}


.education-card{

    display:flex;

    gap:20px;

    padding:28px;

    background:
        var(--white);

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

    transition:
        var(--transition);

}


.education-card:hover{

    transform:
        translateY(-8px);

    box-shadow:
        var(--shadow);

}


.education-icon{

    width:55px;
    height:55px;

    flex-shrink:0;

    display:grid;

    place-items:center;

    background:
        rgba(215,173,79,.10);

    color:
        var(--gold-dark);

}


.education-card span{

    font-size:9px;

    color:
        var(--gold-dark);

    font-weight:800;

}


.education-card h3{

    color:
        var(--navy);

    font-size:18px;

    margin-top:5px;

}


.education-card h4{

    color:
        var(--text-light);

    font-size:11px;

    margin-top:3px;

}


.education-card p{

    color:
        var(--text-light);

    font-size:11px;

    margin-top:7px;

}


/* =========================================================
   TESTIMONIAL
========================================================= */

.testimonial-section{

    background:
        var(--navy);

    padding:
        100px 0;

}


.testimonial-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}


.quote-icon{

    width:60px;
    height:60px;

    display:grid;

    place-items:center;

    margin:
        0 auto 25px;

    border:
        1px solid
        rgba(215,173,79,.35);

    color:
        var(--gold);

}


.testimonial-box blockquote{

    color:
        var(--white);

    font-size:
        clamp(25px,4vw,42px);

    font-weight:700;

    line-height:1.6;

}


.quote-line{

    width:40px;

    height:2px;

    background:
        var(--gold);

    margin:
        25px auto;

}


.testimonial-box > span{

    font-size:9px;

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

    letter-spacing:3px;

}


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

.contact-section{

    background:
        var(--white);

}


.contact-wrapper{

    display:grid;

    grid-template-columns:
        1fr .9fr;

    gap:80px;

    align-items:start;

}


.contact-content h2{

    font-size:
        clamp(42px,6vw,70px);

    line-height:1.2;

    color:
        var(--navy);

    margin-top:10px;

}


.contact-content h2 span{

    display:block;

    color:
        var(--gold-dark);

}


.contact-content > p{

    max-width:500px;

    color:
        var(--text-light);

    font-size:14px;

    line-height:2;

    margin-top:20px;

}


.contact-links{

    margin-top:40px;

    display:flex;

    flex-direction:column;

    gap:12px;

}


.contact-link{

    display:flex;

    align-items:center;

    gap:15px;

    padding:12px;

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

    transition:
        var(--transition);

}


.contact-link:hover{

    border-color:
        var(--gold);

    transform:
        translateX(-5px);

}


.contact-icon{

    width:45px;
    height:45px;

    display:grid;

    place-items:center;

    background:
        var(--navy);

    color:
        var(--gold);

}


.contact-link small{

    display:block;

    font-size:8px;

    color:
        var(--text-light);

    letter-spacing:2px;

}


.contact-link strong{

    display:block;

    color:
        var(--navy);

    font-size:12px;

    margin-top:2px;

}


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

.contact-card{

    padding:35px;

    background:
        var(--navy);

    color:
        var(--white);

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

}


.contact-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:30px;

}


.contact-card-top span{

    font-size:10px;

    letter-spacing:3px;

    color:
        var(--gold);

}


.contact-card-top i{

    color:
        var(--gold);

}


.form-group{

    margin-bottom:18px;

}


.form-group label{

    display:block;

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

    font-size:10px;

    margin-bottom:7px;

}


.form-group input,
.form-group textarea{

    width:100%;

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

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

    color:
        var(--white);

    padding:
        13px 14px;

    outline:none;

    font-size:12px;

    transition:
        var(--transition);

}


.form-group input:focus,
.form-group textarea:focus{

    border-color:
        var(--gold);

    background:
        rgba(215,173,79,.04);

}


.form-group textarea{

    resize:vertical;

    min-height:120px;

}


.form-group input::placeholder,
.form-group textarea::placeholder{

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

}


.submit-btn{

    width:100%;

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:
        var(--gold);

    color:
        var(--navy);

    font-weight:900;

    font-size:12px;

    transition:
        var(--transition);

}


.submit-btn:hover{

    background:
        var(--gold-light);

    transform:
        translateY(-3px);

}


.submit-btn.success{

    background:
        #4dcf85;

}


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

.footer{

    background:
        #050c16;

    color:
        var(--white);

    padding:
        40px 0;

}


.footer-container{

    display:grid;

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

    align-items:center;

    gap:30px;

}


.footer-brand p{

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

    font-size:10px;

    margin-top:12px;

}


.footer-social{

    display:flex;

    gap:8px;

}


.footer-social a{

    width:36px;
    height:36px;

    display:grid;

    place-items:center;

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

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

    transition:
        var(--transition);

}


.footer-social a:hover{

    background:
        var(--gold);

    color:
        var(--navy);

    border-color:
        var(--gold);

}


.footer-copy{

    text-align:left;

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

    font-size:9px;

}


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

.back-top{

    position:fixed;

    bottom:25px;

    left:25px;

    z-index:500;

    width:45px;
    height:45px;

    display:grid;

    place-items:center;

    background:
        var(--gold);

    color:
        var(--navy);

    opacity:0;

    visibility:hidden;

    transform:
        translateY(20px);

    transition:
        var(--transition);

}


.back-top.show{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0);

}


.back-top:hover{

    background:
        var(--navy);

    color:
        var(--gold);

}


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

.reveal{

    opacity:0;

    transform:
        translateY(35px);

    transition:
        opacity .8s ease,
        transform .8s
        cubic-bezier(.2,.8,.2,1);

}


.reveal.revealed{

    opacity:1;

    transform:
        translateY(0);

}


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

::selection{

    background:
        var(--gold);

    color:
        var(--navy);

}


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

::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-track{

    background:
        var(--navy);

}


::-webkit-scrollbar-thumb{

    background:
        var(--gold-dark);

}


::-webkit-scrollbar-thumb:hover{

    background:
        var(--gold);

}


/* =========================================================
   RESPONSIVE — 1100px
========================================================= */

@media(max-width:1100px){

    .navbar{

        gap:17px;

    }


    .nav-link{

        font-size:11px;

    }


    .hero-container{

        gap:40px;

    }


    .hero-visual{

        min-height:550px;

    }


    .services-grid{

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

    }

}


/* =========================================================
   RESPONSIVE — 900px
========================================================= */

@media(max-width:900px){

    .navbar{

        position:fixed;

        top:0;
        right:0;

        width:
            min(320px,85%);

        height:100vh;

        background:
            var(--navy);

        flex-direction:column;

        align-items:flex-start;

        justify-content:center;

        padding:40px;

        gap:24px;

        transform:
            translateX(100%);

        transition:
            var(--transition);

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

    }


    .navbar.active{

        transform:
            translateX(0);

    }


    .nav-link{

        font-size:16px;

    }


    .nav-link::after{

        bottom:-5px;

    }


    .menu-btn{

        display:flex;

    }


    .hero{

        padding-top:130px;

    }


    .hero-container{

        grid-template-columns:
            1fr;

        text-align:center;

    }


    .hero-content{

        max-width:750px;

        margin:auto;

    }


    .hero-role,
    .hero-buttons,
    .hero-social{

        justify-content:center;

    }


    .hero-description{

        margin-left:auto;
        margin-right:auto;

    }


    .hero-visual{

        max-width:500px;

        width:100%;

        margin:auto;

        min-height:550px;

    }


    .hero-scroll{

        display:none;

    }


    .about-grid{

        grid-template-columns:
            1fr;

        gap:50px;

    }


    .about-image{

        max-width:550px;

        width:100%;

        margin:auto;

    }


    .skills-layout{

        grid-template-columns:
            1fr;

        gap:50px;

    }


    .skills-intro{

        position:static;

    }


    .contact-wrapper{

        grid-template-columns:
            1fr;

        gap:50px;

    }


    .education-grid{

        grid-template-columns:
            1fr;

    }


    .footer-container{

        grid-template-columns:
            1fr;

        text-align:center;

    }


    .footer-brand .logo{

        justify-content:center;

    }


    .footer-social{

        justify-content:center;

    }


    .footer-copy{

        text-align:center;

    }

}


/* =========================================================
   RESPONSIVE — 700px
========================================================= */

@media(max-width:700px){

    .container{

        width:
            min(
                100% - 28px,
                600px
            );

    }


    .header{

        padding:15px 0;

    }


    .nav-cv{

        display:none;

    }


    .logo-symbol{

        width:35px;
        height:35px;

        font-size:17px;

    }


    .logo-text{

        font-size:15px;

    }


    .hero{

        padding:
            115px 0 60px;

    }


    .hero-title{

        font-size:
            clamp(52px,16vw,82px);

        letter-spacing:-3px;

    }


    .hero-role{

        font-size:16px;

    }


    .hero-description{

        font-size:12px;

    }


    .hero-buttons{

        flex-direction:column;

        width:100%;

    }


    .btn{

        width:100%;

    }


    .hero-visual{

        min-height:480px;

    }


    .photo-frame{

        width:80%;

    }


    .card-top{

        right:-5px;

        top:60px;

    }


    .card-bottom{

        left:-5px;

        bottom:65px;

    }


    .visual-number{

        font-size:65px;

    }


    .stats-grid{

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

    }


    .stat-item{

        padding:
            25px 10px;

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

    }


    .stat-item:nth-child(2){

        border-left:none;

    }


    .stat-item:nth-child(3){

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

    }


    .section{

        padding:
            80px 0;

    }


    .section-heading{

        margin-bottom:45px;

    }


    .section-heading h2{

        font-size:36px;

    }


    .about-image{

        min-height:430px;

    }


    .about-details{

        grid-template-columns:
            1fr;

    }


    .timeline::before{

        right:7px;

    }


    .timeline-item{

        display:block;

        padding-right:35px;

    }


    .timeline-dot{

        right:2px;

        transform:
            translateX(50%);

    }


    .timeline-date{

        margin-bottom:12px;

    }


    .timeline-content{

        padding-right:0;

    }


    .projects-header{

        display:block;

    }


    .projects-header
    .section-heading{

        margin-bottom:20px;

    }


    .view-all{

        margin-bottom:40px;

    }


    .projects-grid{

        grid-template-columns:
            1fr;

    }


    .project-large{

        grid-row:auto;

        height:450px;

    }


    .project-wide{

        grid-column:auto;

    }


    .project-card{

        height:350px;

    }


    .services-grid{

        grid-template-columns:
            1fr;

    }


    .service-card{

        min-height:320px;

    }


    .contact-card{

        padding:25px;

    }

}


/* =========================================================
   RESPONSIVE — 480px
========================================================= */

@media(max-width:480px){

    .hero-badge{

        font-size:9px;

    }


    .hero-title{

        font-size:52px;

    }


    .hero-visual{

        min-height:410px;

    }


    .photo-frame{

        width:76%;

    }


    .photo-border{

        inset:
            15px -10px -10px 10px;

    }


    .floating-card{

        padding:
            9px 11px;

    }


    .floating-icon{

        width:33px;
        height:33px;

    }


    .floating-card strong{

        font-size:14px;

    }


    .floating-card small{

        font-size:8px;

    }


    .card-top{

        right:-8px;

    }


    .card-bottom{

        left:-8px;

    }


    .photo-label{

        right:-15px;

        bottom:15px;

        padding:
            9px 13px;

    }


    .photo-label strong{

        font-size:15px;

    }


    .section-heading{

        gap:12px;

    }


    .section-number{

        font-size:10px;

    }


    .section-heading h2{

        font-size:31px;

    }


    .about-image{

        min-height:350px;

    }


    .image-caption{

        left:0;

        bottom:20px;

    }


    .timeline-content h3{

        font-size:20px;

    }


    .project-overlay{

        padding:20px;

    }


    .project-overlay h3{

        font-size:20px;

    }


    .testimonial-section{

        padding:
            75px 0;

    }


    .testimonial-box blockquote{

        font-size:22px;

    }


    .contact-content h2{

        font-size:45px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    *{

        scroll-behavior:auto !important;

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}