/* ==========================================================
   VARIABLES
   ========================================================== */

:root{

    --primary:#0A2947;
    --secondary:#0A2947;
    --light:#D3D4C0;
    --accent:#8B5E3C;

    --white:#ffffff;
    --gray:#f8f9fa;
    --dark:#222;

    --transition:.35s ease;
    --shadow:0 15px 35px rgba(0,0,0,.15);

}


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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#333;
    overflow-x:hidden;
}


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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#efefef;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#184d82;

}


/* ==========================================================
   PROGRESS BAR
   ========================================================== */

#progress-bar{

    position:fixed;

    top:0;
    left:0;

    width:0%;

    height:5px;

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

    z-index:99999;

}


/* ==========================================================
   COMMON
   ========================================================== */

.section-padding{

    padding:110px 0;

}

.section-title{

    text-align:center;
    margin-bottom:70px;

}

.section-title h2{

    font-weight:700;
    color:var(--primary);
    font-size:44px;

}

.section-title p{

    color:#777;
    margin-top:15px;

}


/* ==========================================================
   NAVBAR
   ========================================================== */

#navbar{

    transition:var(--transition);
    padding:20px 0;

    background:transparent;

}

#navbar.scrolled{

    background:rgba(10,41,71,.90);

    backdrop-filter:blur(12px);

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

    padding:12px 0;

}

.navbar-brand{

    font-size:26px;
    color:#fff !important;

}

.nav-link{

    position:relative;

    color:#ffffff !important;

    font-weight:500;

    padding:10px 18px !important;

    border-radius:50px;

    overflow:hidden;

    transition:
        color .35s ease,
        transform .25s ease;

    z-index:1;

}

.nav-link:hover{

    color:var(--light);

}

/* .nav-link::after{

    content:"";

    position:absolute;

    bottom:-6px;
    left:0;

    width:0%;

    height:2px;

    background:var(--light);

    transition:.3s;

} */

/* .nav-link:hover::after{

    width:100%;

} */

.nav-link::before{

    content:"";

    position:absolute;

    inset:0;

    background:#8B5E3C;

    border-radius:50px;

    transform:scaleX(0);

    transform-origin:left;

    transition:transform .35s ease;

    z-index:-1;

}

.nav-link:hover{

    color:#fff !important;
    transform:translateY(-2px);

}

.nav-link:hover::before{

    transform:scaleX(1);

}

.nav-link.active{

    color:#fff !important;

}

.nav-link.active::before{

    transform:scaleX(1);

}


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

.hero-section{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    color:#fff;

    background:
    linear-gradient(
        135deg,
        #0A2947,
        #12385e,
        #1d4f7c
    );

}


/* ==========================================================
   Animated Gradient
   ========================================================== */

.hero-section::before{

    content:"";

    position:absolute;

    width:180%;

    height:180%;

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

    animation:heroMove 15s linear infinite;

}

@keyframes heroMove{

    from{

        transform:
        rotate(0deg)
        translateX(-10%);

    }

    to{

        transform:
        rotate(360deg)
        translateX(10%);

    }

}


/* ==========================================================
   Floating Shapes
   ========================================================== */

.hero-section::after{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    /* background-image:

    radial-gradient(circle,#ffffff22 2px,transparent 2px); */

    background-size:80px 80px;

    animation:bgMove 40s linear infinite;

    opacity:.35;

}

@keyframes bgMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-400px);

    }

}


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

.hero-section .container{

    position:relative;
    z-index:2;

}

.small-title{

    font-size:18px;

    letter-spacing:2px;

    text-transform:uppercase;

    color:var(--light);

}

.hero-section h1{

    font-size:72px;
    font-weight:700;

    margin-top:10px;

}

.typing-text{

    font-weight:600;

    color:var(--light);

    min-height:40px;

}

.hero-section .lead{

    max-width:600px;

    opacity:.9;

    line-height:1.8;

}


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

.contact-list{

    display:flex;

    flex-direction:column;

    gap:18px;

    font-size:18px;

}

.contact-list div{

    display:flex;

    align-items:center;

}

.contact-list i{

    width:45px;

    color:var(--light);

    font-size:22px;

}

.contact-list a{

    color:white;

    text-decoration:none;

}

.contact-list a:hover{

    color:var(--light);

}


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

.btn-primary{

    background:var(--accent);

    border:none;

    padding:15px 40px;

    border-radius:40px;

    transition:.35s;

    font-weight:600;

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:

    0 15px 30px rgba(0,0,0,.25);

    background:#6e472d;

}


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

.profile-wrapper{

    position:relative;

    display:inline-block;

}

.profile-image{

    width:370px;
    height:370px;

    object-fit:cover;

    border:8px solid rgba(255,255,255,.18);

    box-shadow:

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

    transition:.4s;

}

.profile-image:hover{

    transform:

    scale(1.04)
    rotate(-2deg);

}


/* ==========================================================
   GLOW
   ========================================================== */

.profile-wrapper::before{

    content:"";

    position:absolute;

    width:390px;
    height:390px;

    left:-10px;
    top:-10px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,255,255,.25),

        transparent

    );

    animation:pulse 4s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(.95);

        opacity:.4;

    }

    50%{

        transform:scale(1.05);

        opacity:.8;

    }

    100%{

        transform:scale(.95);

        opacity:.4;

    }

}


/* ==========================================================
   SCROLL INDICATOR
   ========================================================== */

.scroll-indicator{

    position:absolute;

    bottom:25px;

    width:100%;

    text-align:center;

    z-index:10;

}

.scroll-indicator i{

    color:white;

    font-size:34px;

    animation:bounce 2s infinite;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{

        transform:translateY(0);

    }

    40%{

        transform:translateY(-15px);

    }

    60%{

        transform:translateY(-8px);

    }

}


/* ==========================================================
   UTILITIES
   ========================================================== */

.text-primary{

    color:var(--primary)!important;

}

.bg-primary{

    background:var(--primary)!important;

}

.shadow-custom{

    box-shadow:var(--shadow);

}

.rounded-xl{

    border-radius:24px;

}

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

#skills{

    position:relative;

    background:#ffffff;

    overflow:hidden;

}


/* Decorative background */

#skills::before{

    content:"";

    position:absolute;

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

    width:350px;
    height:350px;

    border-radius:50%;

    background:rgba(211,212,192,.15);

}

#skills::after{

    content:"";

    position:absolute;

    bottom:-200px;
    left:-150px;

    width:450px;
    height:450px;

    border-radius:50%;

    background:rgba(10,41,71,.04);

}


/* ==========================================================
   FLOATING ICON CONTAINER
   ========================================================== */

.floating-icons{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    overflow:hidden;

    pointer-events:none;

}


/* ==========================================================
   FLOATING TECH ICON
   ========================================================== */

.tech-icon{

    position:absolute;

    top:-120px;

    color:var(--primary);

    opacity:.12;

    animation-name:fallingIcon;

    animation-timing-function:linear;

    animation-iteration-count:infinite;

    user-select:none;

    will-change:transform;

}


/* Different sizes */

.tech-icon.small{

    font-size:24px;

}

.tech-icon.medium{

    font-size:36px;

}

.tech-icon.large{

    font-size:52px;

}


/* ==========================================================
   Falling Animation
   ========================================================== */

@keyframes fallingIcon{

    0%{

        transform:
        translateY(-120px)
        rotate(0deg);

        opacity:0;

    }

    10%{

        opacity:.08;

    }

    30%{

        transform:
        translateY(300px)
        translateX(-25px)
        rotate(120deg);

    }

    50%{

        transform:
        translateY(650px)
        translateX(30px)
        rotate(220deg);

    }

    70%{

        transform:
        translateY(1000px)
        translateX(-35px)
        rotate(300deg);

    }

    100%{

        transform:
        translateY(1500px)
        translateX(20px)
        rotate(360deg);

        opacity:0;

    }

}


/* ==========================================================
   Skills Grid
   ========================================================== */

.skills-grid{

    position:relative;

    z-index:5;

    margin-top:70px;

}


/* ==========================================================
   Skill Card
   ========================================================== */

.skill-card{

    position:relative;

    background:#fff;

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:.35s;

    overflow:hidden;

    border:1px solid rgba(10,41,71,.08);

    box-shadow:

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

}


/* top accent */

.skill-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:6px;

    background:

    linear-gradient(

        90deg,

        var(--primary),

        var(--accent)

    );

}


/* glass highlight */

.skill-card::after{

    content:"";

    position:absolute;

    top:-60px;
    right:-60px;

    width:150px;
    height:150px;

    border-radius:50%;

    background:

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

}


/* Hover */

.skill-card:hover{

    transform:

    translateY(-12px);

    box-shadow:

    0 25px 50px rgba(0,0,0,.15);

}


/* ==========================================================
   Skill Title
   ========================================================== */

.skill-card h4{

    color:var(--primary);

    font-weight:700;

    margin-bottom:25px;

}


/* ==========================================================
   Skill Items
   ========================================================== */

.skill-card p{

    line-height:2.1;

    color:#666;

    margin-bottom:0;

}


/* ==========================================================
   Optional badge list
   ========================================================== */

.skill-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:20px;

}

.skill-tags span{

    background:rgba(10,41,71,.08);

    color:var(--primary);

    padding:8px 16px;

    border-radius:50px;

    font-size:14px;

    transition:.3s;

}

.skill-tags span:hover{

    background:var(--primary);

    color:#fff;

}


/* ==========================================================
   Hover Glow
   ========================================================== */

.skill-card:hover::before{

    height:100%;

    opacity:.04;

}


/* ==========================================================
   Floating Decoration
   ========================================================== */

.skill-circle{

    position:absolute;

    border-radius:50%;

    background:rgba(10,41,71,.05);

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

}

.skill-circle.one{

    width:80px;
    height:80px;

    top:15%;
    left:8%;

}

.skill-circle.two{

    width:140px;
    height:140px;

    bottom:12%;
    right:8%;

    animation-delay:4s;

}

.skill-circle.three{

    width:60px;
    height:60px;

    top:60%;
    left:25%;

    animation-delay:7s;

}

@keyframes floatCircle{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-25px);

    }

    100%{

        transform:translateY(0px);

    }

}


/* ==========================================================
   Skill Card Fade
   ========================================================== */

.skill-card{

    animation-duration:.8s;

}


/* ==========================================================
   Responsive
   ========================================================== */

@media(max-width:991px){

    .skill-card{

        margin-bottom:30px;

    }

}

@media(max-width:768px){

    .tech-icon{

        opacity:.08;

    }

    .skill-card{

        padding:25px;

    }

}

@media(max-width:576px){

    .skill-card h4{

        font-size:22px;

    }

    .skill-card p{

        font-size:15px;

    }

}

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

#experience{

    position:relative;

    background:var(--gray);

    overflow:hidden;

}


/* Decorative background */

#experience::before{

    content:"";

    position:absolute;

    top:-180px;
    left:-180px;

    width:420px;
    height:420px;

    border-radius:50%;

    background:rgba(10,41,71,.05);

}

#experience::after{

    content:"";

    position:absolute;

    bottom:-220px;
    right:-220px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:rgba(139,94,60,.06);

}


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

.timeline{

    position:relative;
    width:100%;
    max-width:1400px;
    margin:auto;
    padding:40px 0;

}


/* Vertical Line */

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

.timeline {

    position: relative;

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

    margin: auto;

    padding: 40px 0;

    /* Scroll-controlled value */
    --timeline-progress: 0%;

}


/* ----------------------------------------------------------
   Timeline Base
   ---------------------------------------------------------- */

.timeline::before {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 4px;

    margin-left: -2px;

    border-radius: 20px;

    background: rgba(10, 41, 71, .12);

}


/* ----------------------------------------------------------
   Timeline Growing Line
   ---------------------------------------------------------- */

.timeline::after {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    width: 4px;

    height: var(--timeline-progress);

    margin-left: -2px;

    border-radius: 20px;

    background: linear-gradient(

        to bottom,

        var(--primary),

        var(--accent)

    );

    box-shadow:

        0 0 8px rgba(139, 94, 60, .35);

    z-index: 1;

    transition: height .08s linear;

}

/* ==========================================================
   ITEM
   ========================================================== */

.timeline-item{

    position:relative;

    width:50%;

    padding:20px 40px;

}


/* Left */

.timeline-item.left{

    left:0;

    text-align:left;

}


/* Right */

.timeline-item.right{

    left:50%;

}


/* ==========================================================
   DOT
   ========================================================== */

.timeline-item::before {

    content: "";

    position: absolute;

    top: 40px;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: #ffffff;

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

    box-shadow:

        0 0 0 6px rgba(10, 41, 71, .12);

    z-index: 5;

    transition:

        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


/* Left dot */

.timeline-item.left::before{

    right:-12px;

}


/* Right dot */

.timeline-item.right::before{

    left:-12px;

}

/* ==========================================================
   ACTIVE TIMELINE POINT
   ========================================================== */

.timeline-item.timeline-active::before {

    background: var(--accent);

    transform: scale(1.15);

    box-shadow:

        0 0 0 6px rgba(10, 41, 71, .12),

        0 0 0 12px rgba(139, 94, 60, .08),

        0 0 20px rgba(139, 94, 60, .45);

}


/* ==========================================================
   CARD
   ========================================================== */

.timeline-content{

    position:relative;

    background:#ffffff;

    border-radius:22px;

    padding:35px;

    box-shadow:

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

    transition:.35s;

    overflow:hidden;

}


/* top accent */

.timeline-content::before{

    content:"";

    position:absolute;

    left:0;
    top:0;

    width:100%;
    height:6px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--accent)

    );

}


/* Decorative */

.timeline-content::after{

    content:"";

    position:absolute;

    right:-45px;
    top:-45px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:rgba(10,41,71,.05);

}


/* ==========================================================
   Hover
   ========================================================== */

.timeline-content:hover{

    transform:

        translateY(-10px);

    box-shadow:

        0 25px 55px rgba(0,0,0,.15);

}


/* ==========================================================
   Typography
   ========================================================== */

.timeline-content h4{

    color:var(--primary);

    font-weight:700;

    margin-bottom:10px;

}

.timeline-content span{

    display:inline-block;

    color:var(--accent);

    font-weight:600;

    margin-bottom:18px;

}

.timeline-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:0;

}


/* ==========================================================
   Connector Line
   ========================================================== */

.timeline-item.left .timeline-content{

    margin-right:25px;

}

.timeline-item.right .timeline-content{

    margin-left:25px;

}


/* ==========================================================
   Card Arrow
   ========================================================== */

.timeline-item.left .timeline-content::after{

    box-shadow:none;

}

.timeline-item.left .timeline-content:before{

    border-top-left-radius:22px;

    border-top-right-radius:22px;

}

.timeline-item.right .timeline-content:before{

    border-top-left-radius:22px;

    border-top-right-radius:22px;

}


/* ==========================================================
   Glow Pulse
   ========================================================== */

/* ==========================================================
   TIMELINE POINT GLOW
   ========================================================== */

.timeline-item::after {

    content: "";

    position: absolute;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    top: 33px;

    background: rgba(139, 94, 60, .15);

    opacity: 0;

    transform: scale(.6);

    z-index: 2;

    pointer-events: none;

}


/* Left */

.timeline-item.left::after {

    right: -19px;

}


/* Right */

.timeline-item.right::after {

    left: -19px;

}


/* Active */

.timeline-item.timeline-active::after {

    animation: timelinePointPulse 1.5s ease-out;

}


@keyframes timelinePointPulse {

    0% {

        opacity: .8;

        transform: scale(.6);

    }

    70% {

        opacity: .2;

        transform: scale(1.5);

    }

    100% {

        opacity: 0;

        transform: scale(1.7);

    }

}

.timeline-item.left::after{

    right:-19px;

}

.timeline-item.right::after{

    left:-19px;

}

@keyframes timelinePulse{

    0%{

        transform:scale(.8);

        opacity:.4;

    }

    50%{

        transform:scale(1.4);

        opacity:0;

    }

    100%{

        transform:scale(.8);

        opacity:.4;

    }

}


/* ==========================================================
   Year Badge (Optional)
   ========================================================== */

.timeline-year{

    display:inline-block;

    background:var(--primary);

    color:white;

    padding:6px 16px;

    border-radius:40px;

    font-size:14px;

    margin-bottom:15px;

}


/* ==========================================================
   Mobile
   ========================================================== */

@media(max-width:992px){

    .timeline::before,
    .timeline::after {

        left:35px;

    }

    .timeline-item{

        width:100%;

        padding-left:80px;

        padding-right:25px;

        margin-bottom:35px;

    }

    .timeline-item.left,

    .timeline-item.right{

        left:0;

        text-align:left;

    }

    .timeline-item.left::before,

    .timeline-item.right::before{

        left:23px;

    }

    .timeline-item.left::after,

    .timeline-item.right::after{

        left:16px;

    }

    .timeline-item.left .timeline-content,

    .timeline-item.right .timeline-content{

        margin:0;

    }

}

/* ========================= */
/* Experience Company */
/* ========================= */

.timeline-company {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.company-logo {
    width: 150px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 12px;
}

.company-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;

}

.timeline-company h4 {
    margin-bottom: 5px;
}

.timeline-company span {
    display: block;
    margin-bottom: 5px;
}

.timeline-year {
    margin-bottom: 0;
    }

/* ========================= */
/* Experience List */
/* ========================= */

.experience-list {
    margin: 0;
    padding-left: 20px;
}

.experience-list li {
    margin-bottom: 10px;
    line-height: 1.7;
}

.experience-list li:last-child {
    margin-bottom: 0;
}

/* ========================= */
/* Mobile */
/* ========================= */

@media (max-width: 576px) {

    .company-logo {
        width: 80px;
        height: 60px;
        margin-bottom: 10px;
    }

    .experience-list {
        padding-left: 18px;
    }

    .experience-list li {
        line-height: 1.6;
        margin-bottom: 8px;
    }

}



/* ==========================================================
   Small Devices
   ========================================================== */

@media(max-width:576px){

    .timeline-content{

        padding:25px;

    }

    .timeline-content h4{

        font-size:20px;

    }

    .timeline-content span{

        font-size:14px;

    }
}

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

.timeline-visual {

    position: absolute;

    top: 25%;

    width: calc(100% - 40px);
    height: 280px;

    transform: translateY(-50%);

    pointer-events: none;

    z-index: 2;

}

.timeline-image-solo {
    top: 35%!important;
}


/* ==========================================================
   LEFT ITEM
   Visual appears on RIGHT
   ========================================================== */

.timeline-item.left .timeline-visual {

    left: 100%;
    margin-left: 20px;

}


/* ==========================================================
   RIGHT ITEM
   Visual appears on LEFT
   ========================================================== */

.timeline-item.right .timeline-visual {

    right: 100%;
    margin-right: 20px;

}


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

.experience-image {

    position: absolute;
    width: 500px;
    background: #ffffff;
    padding: 8px;
    border-radius: 16px;
    box-shadow:
        0 20px 45px rgba(0,0,0,.16);

    overflow: hidden;
    opacity: 0;
    transition:
        transform .45s ease,
        box-shadow .35s ease;

}


/* Image */

.experience-image img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 10px;

}


/* ==========================================================
   MAIN IMAGE
   ========================================================== */

.image-main {

    top: 20px;
    left: 50%;
    transform:
        translateX(-50%)
        translateY(50px)
        rotate(-4deg);

}


/* ==========================================================
   SECONDARY IMAGE
   ========================================================== */

.image-secondary {

    top: 400px;
    left: 50%;
    transform:
        translateX(-50%)
        translateY(50px)
        rotate(5deg);

}


/* ==========================================================
   LEFT EXPERIENCE
   Images enter from LEFT
   ========================================================== */

.timeline-item.left .image-main {

    transform:
        translateX(-50%)
        translateX(-100px)
        rotate(-8deg);

}

.timeline-item.left .image-secondary {

    transform:
        translateX(-50%)
        translateX(-140px)
        rotate(8deg);

}


/* ==========================================================
   RIGHT EXPERIENCE
   Images enter from RIGHT
   ========================================================== */

.timeline-item.right .image-main {

    transform:
        translateX(-50%)
        translateX(100px)
        rotate(8deg);

}

.timeline-item.right .image-secondary {

    transform:
        translateX(-50%)
        translateX(140px)
        rotate(-8deg);

}


/* ==========================================================
   ACTIVE STATE
   ========================================================== */

.timeline-item.visual-visible .experience-image {

    opacity: 1;

}


.timeline-item.visual-visible.left .image-main {

    transform:
        translateX(-50%)
        translateX(0)
        rotate(-4deg);

}


.timeline-item.visual-visible.left .image-secondary {

    transform:
        translateX(-50%)
        translateX(0)
        rotate(5deg);

}


.timeline-item.visual-visible.right .image-main {

    transform:
        translateX(-50%)
        translateX(0)
        rotate(8deg);

}


.timeline-item.visual-visible.right .image-secondary {

    transform:
        translateX(-50%)
        translateX(0)
        rotate(-8deg);

}


/* ==========================================================
   Stagger
   ========================================================== */

.timeline-item.visual-visible .image-main {

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

}


.timeline-item.visual-visible .image-secondary {

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

}


/* ==========================================================
   Hover
   ========================================================== */

.timeline-item.visual-visible .image-main:hover {

    transform:
        translateX(-50%)
        translateY(-8px)
        rotate(-2deg);

    box-shadow:
        0 30px 60px rgba(0,0,0,.22);

}


.timeline-item.visual-visible .image-secondary:hover {

    transform:
        translateX(-50%)
        translateY(-8px)
        rotate(2deg);

    box-shadow:
        0 30px 60px rgba(0,0,0,.22);

}

/* ==========================================================
   Hide Experience Visuals
   ========================================================== */

@media (max-width: 992px) {

    .timeline-visual {

        display: none;

    }

}

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

footer{

    background:var(--primary);

    color:#ffffff;

    padding:70px 0 35px;

    text-align:center;

}

footer h4{

    font-weight:700;

    margin-bottom:15px;

}

footer p{

    opacity:.85;

    margin-bottom:12px;

}

footer small{

    opacity:.6;

}


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

.footer-social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin:30px 0;

}

.footer-social a{

    width:48px;
    height:48px;

    display:flex;

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

    border-radius:50%;

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

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.footer-social a:hover{

    background:var(--accent);

    transform:translateY(-5px);

}


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

a{

    transition:.3s;

}

a:hover{

    text-decoration:none;

}


/* ==========================================================
   IMAGES
   ========================================================== */

img{

    max-width:100%;

    display:block;

}


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

::selection{

    background:var(--accent);

    color:white;

}


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

button:focus,
.btn:focus,
a:focus{

    box-shadow:none;

}


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

.mt-80{

    margin-top:80px;

}

.mb-80{

    margin-bottom:80px;

}

.py-120{

    padding-top:120px;
    padding-bottom:120px;

}


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

.shadow-lg-custom{

    box-shadow:

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

}

.shadow-hover:hover{

    box-shadow:

        0 30px 65px rgba(0,0,0,.18);

}


/* ==========================================================
   ANIMATION HELPERS
   ========================================================== */

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

            translateY(30px);

    }

    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


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

@media(max-width:1200px){

    .hero-section h1{

        font-size:60px;

    }

}

@media(max-width:992px){

    .hero-section{

        text-align:center;

        padding-top:120px;

    }

    .hero-section .lead{

        margin:auto;

    }

    .contact-list{

        align-items:center;

    }

    .profile-image{

        width:300px;
        height:300px;

        margin-top:60px;

    }

    .carousel-control-prev{

        left:0;

    }

    .carousel-control-next{

        right:0;

    }

}

@media(max-width:768px){

    .section-padding{

        padding:90px 0;

    }

    .section-title h2{

        font-size:36px;

    }

    .hero-section h1{

        font-size:46px;

    }

    .typing-text{

        font-size:24px;

    }

    .project-card{

        margin-bottom:25px;

    }

}

@media(max-width:576px){

    .navbar-brand{

        font-size:22px;

    }

    .hero-section h1{

        font-size:38px;

    }

    .hero-section .lead{

        font-size:16px;

    }

    .profile-image{

        width:240px;
        height:240px;

    }

    .carousel-control-prev,
    .carousel-control-next{

        display:none;

    }

    footer{

        padding:55px 0 30px;

    }

}

.skill-bottle{

    position:relative;

    width:270px;

    height:420px;

    margin:auto;

}

.bottle-neck{

    width:80px;

    height:60px;

    margin:auto;

    border:8px solid #d6d6d6;

    border-bottom:none;

    border-radius:20px 20px 0 0;

}

.bottle-body{

    position:relative;

    width:270px;

    height:360px;

    border:8px solid #d6d6d6;

    border-radius:40px;

    overflow:hidden;

    background:

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

    backdrop-filter:blur(12px);

}

.icon-container{

    position:absolute;

    inset:0;

}

.skill-group{

    margin-bottom:22px;

}

.skill-group h5{

    color:#0A2947;

    font-weight:700;

}

.skill-group p{

    color:#555;

    margin:0;

    line-height:1.8;

}

.skill-icon{

    position:absolute;

    font-size:34px;

    animation-fill-mode:forwards;

}


/* ==========================================================
   TECH STACK
   ========================================================== */

.tech-stack-wrapper {

    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;

}

.tech-stack-title {

    color: #ffffff;

    font-size: 18px;

    font-weight: 600;

    letter-spacing: 1px;

    margin-bottom: 25px;

}


/* ==========================================================
   TECH STACK GRID
   ========================================================== */

.tech-stack-grid {

    display: grid;

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

    gap: 14px;

}


/* ==========================================================
   TECH ITEM
   ========================================================== */

.tech-item {

    min-height: 82px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 5px;

    border-radius: 14px;

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

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

    backdrop-filter:
        blur(8px);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}


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

.tech-item i {

    font-size: 30px;

    transition:
        transform .3s ease;

}


/* ==========================================================
   LABEL
   ========================================================== */

.tech-item span {

    font-size: 11px;

    font-weight: 500;

    color: #ffffff;

    white-space: nowrap;

}


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

.tech-item:hover {

    transform:
        translateY(-6px);

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

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

}

.tech-item:hover i {

    transform:
        scale(1.15);

}


/* ==========================================================
   ACTUAL TECHNOLOGY COLORS
   ========================================================== */

.tech-item:nth-child(1) i {
    color: #777BB4;
}

.tech-item:nth-child(2) i {
    color: #FF2D20;
}

.tech-item:nth-child(3) i {
    color: #F14F29;
}

.tech-item:nth-child(4) i {
    color: #68A063;
}

.tech-item:nth-child(5) i {
    color: #F7DF1E;
}

.tech-item:nth-child(6) i {
    color: #0769AD;
}

.tech-item:nth-child(7) i {
    color: #E34F26;
}

.tech-item:nth-child(8) i {
    color: #1572B6;
}

.tech-item:nth-child(9) i {
    color: #7952B3;
}

.tech-item:nth-child(10) i {
    color: #00758F;
}

.tech-item:nth-child(11) i {
    color: #F05032;
}

.tech-item:nth-child(12) i {
    color: #ffffff;
}

.tech-item:nth-child(13) i {
    color: #2684FF;
}

.tech-item:nth-child(14) i {
    color: #2496ED;
}

.tech-item:nth-child(15) i {
    color: #2684FF;
}

.tech-item:nth-child(16) i {
    color: #FF6C37;
}

.tech-item:nth-child(17) i {
    color: #FF9900;
}

.tech-item:nth-child(18) i {
    color: #FF9900;
}

.tech-item:nth-child(19) i {
    color: #569A31;
}

.tech-item:nth-child(20) i {
    color: #FF9900;
}

.tech-item:nth-child(21) i {
    color: #E34F26;
}

.tech-item:nth-child(22) i {
    color: #009639;
}

.tech-item:nth-child(23) i {
    color: #10A37F;
}

.tech-item:nth-child(24) i {
    color: #4285F4;
}

.tech-item:nth-child(25) i {
    color: #8B5E3C;
}

.tech-item:nth-child(26) i {
    color: #0A2947;
}

.tech-item:nth-child(27) i {
    color: #555555;
}

.tech-item:nth-child(28) i {
    color: #0078D4;
}

.tech-item:nth-child(29) i {
    color: #ffffff;
}

@media (max-width: 1199px) {

    .tech-stack-grid {

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

    }

}


@media (max-width: 991px) {

    .tech-stack-wrapper {

        max-width: 650px;

    }

    .tech-stack-grid {

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

    }

}


@media (max-width: 767px) {

    .tech-stack-grid {

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

    }

}


@media (max-width: 480px) {

    .tech-stack-grid {

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

        gap: 10px;

    }

    .tech-item {

        min-height: 75px;

    }

    .tech-item i {

        font-size: 25px;

    }

    .tech-item span {

        font-size: 10px;

    }

}


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

#projects {
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

/* Decorative background */

#projects::before {
    content: "";
    position: absolute;
    top: -180px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(10, 41, 71, .05);
}

#projects::after {
    content: "";
    position: absolute;
    bottom: -220px;
    left: -220px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: rgba(139, 94, 60, .05);
}

/* ==========================================================
CAROUSEL
========================================================== */

#projectCarousel {
    position: relative;
    margin-top: 60px;
    padding-bottom: 90px;
}

#projectCarousel .carousel-inner {
    overflow: visible;
}

#projectCarousel .carousel-item {
    padding: 20px 70px;
}

/* ==========================================================
   PROJECT CAROUSEL FADE ANIMATION
   ========================================================== */

#projectCarousel .carousel-item {
    transition:none !important;
}


/* ----------------------------------------------------------
   Screenshot - Fade Right
   ---------------------------------------------------------- */

#projectCarousel .project-preview.project-animate-right {
    animation:
        projectFadeRight .9s ease both;
}


/* ----------------------------------------------------------
   Project Info - Fade Left
   ---------------------------------------------------------- */

#projectCarousel .project-info.project-animate-left {
    animation:
        projectFadeLeft .9s ease both;
}


/* ==========================================================
   FADE RIGHT
   Similar to AOS fade-right
   ========================================================== */

@keyframes projectFadeRight {
    from {
        opacity:0;
        transform:
            translate3d(-100px, 0, 0);
    }

    to {
        opacity:1;
        transform:
            translate3d(0, 0, 0);
    }
}


/* ==========================================================
   FADE LEFT
   Similar to AOS fade-left
   ========================================================== */

@keyframes projectFadeLeft {
    from {
        opacity:0;
        transform:
            translate3d(100px, 0, 0);
    }

    to {
        opacity:1;
        transform:
            translate3d(0, 0, 0);
    }
}

/* ==========================================================
PROJECT SHOWCASE
========================================================== */

.project-showcase {
    display: grid;
    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(360px, .75fr);
    align-items: center;
    gap: 70px;
    max-width: 1200px;
    margin: auto;
}

/* ==========================================================
PROJECT IMAGE
========================================================== */

.project-preview {
    position: relative;
}

.project-image {
    position: relative;
    padding: 12px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.project-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .18),
            transparent 50%
        );
    pointer-events: none;
}

.project-image img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px;
    transition: transform .6s ease;
}

.project-showcase:hover .project-image img {
    transform: scale(1.025);
}

/* ==========================================================
PROJECT INFORMATION
========================================================== */

.project-info {
    position: relative;
}

.project-brand {
    display: flex;
    align-items: center;
    height: 55px;
    margin-bottom: 20px;
}

.project-brand img {
    max-width: 150px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.project-label {
    display: inline-block;
    margin-bottom: 10px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
}

.project-info h3 {
    margin: 0 0 18px;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary);
}

.project-description {
    margin-bottom: 25px;
    color: #666;
    line-height: 1.8;
}

/* ==========================================================
CONTRIBUTION
========================================================== */

.project-contribution {
    padding-left: 18px;
    margin-bottom: 28px;
    border-left: 3px solid var(--accent);
}

.project-contribution h6,
.project-stack h6 {
    margin-bottom: 8px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary);
}

.project-contribution p {
    margin: 0;
    color: #666;
    line-height: 1.7;
}

/* ==========================================================
   PROJECT TECHNOLOGIES
   ========================================================== */

#projects .project-stack {
    position:relative;
    display:block;
    width:100%;
    margin-top:25px;
}


#projects .project-stack h6 {
    display:block;
    margin:0 0 12px;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--primary);
}


/* Technology icon container */

#projects .project-stack .tech-icons {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:10px;
    width:100%;
}


/* Individual icon */

#projects .project-stack .p-tech-icon {

    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 42px;
    width:42px;
    height:42px;
    margin:0;
    padding:0;
    border:1px solid rgba(0,0,0,.08);
    border-radius:10px;
    background:#fff;
    box-sizing:border-box;
    opacity:1;
    transform:none;
    box-shadow:none;
    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


/* Font Awesome icon */

#projects .project-stack .p-tech-icon i {
    display:block;
    position:static;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    font-size:22px;
    line-height:1;
    opacity:1;
}


/* Hover */

#projects .project-stack .p-tech-icon:hover {

    transform:translateY(-4px);
    box-shadow:
        0 8px 18px rgba(0,0,0,.10);

}

/* ==========================================================
   PROJECT CAROUSEL TRANSITION
   ========================================================== */

#projectCarousel .project-showcase {
    opacity: 1;
    transition: opacity 0.18s ease;
}

#projectCarousel .carousel-item.project-fading-out .project-showcase {
    opacity: 0;
}

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

#projectCarousel .carousel-control-prev,
#projectCarousel .carousel-control-next {
    width: 48px;
    height: 48px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    opacity: 1;
    background: transparent;
}

#projectCarousel .carousel-control-prev {
    left: 0;
}

#projectCarousel .carousel-control-next {
    right: 0;
}

.project-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    transition:
        background .3s ease,
        transform .3s ease;
}

.project-arrow:hover {
    background: var(--accent);
    transform: scale(1.08);
}

/* ==========================================================
   PROJECT LOGO INDICATORS
   ========================================================== */

#projectCarousel .project-indicators {
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
}


/* Individual logo */

#projectCarousel .project-indicator {
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin:0;
    padding:8px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:50%;
    background:#ffffff;
    text-indent:0;
    opacity:.45;
    transition:
        opacity .3s ease,
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

}


/* Logo */

#projectCarousel .project-indicator img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}


/* Hover */

#projectCarousel .project-indicator:hover {
    opacity:.8;
    transform:translateY(-3px);
}


/* Active project */

#projectCarousel .project-indicator.active {
    opacity:1;
    transform:scale(1.15);
    border-color:var(--accent);
    box-shadow:
        0 8px 20px rgba(0,0,0,.12);
}

/* ==========================================================
CAROUSEL TRANSITION
========================================================== */

#projectCarousel .carousel-item {
    transition:
        transform .65s ease-in-out,
        opacity .35s ease;
}

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

@media (max-width: 991px) {
    .project-showcase {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .8fr);
        gap: 40px;
    }

    #projectCarousel .carousel-item {
        padding-left: 60px;
        padding-right: 60px;
    }

    .project-info h3 {
        font-size: 1.9rem;
    }
}

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

@media (max-width: 767px) {
    #projectCarousel {
        margin-top: 40px;
        padding-bottom: 80px;
    }

    #projectCarousel .carousel-item {
        padding: 10px 25px 20px;
    }

    .project-showcase {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }

    .project-image {
        padding: 8px;
        border-radius: 16px;
    }

    .project-image img {
        border-radius: 10px;
        aspect-ratio: 16 / 10;
    }

    .project-brand {
        height: 45px;
        margin-bottom: 15px;
    }

    .project-brand img {
        max-width: 120px;
        max-height: 45px;
    }

    .project-info h3 {
        font-size: 1.7rem;
    }

    .project-description {
        font-size: .95rem;
    }

    .project-contribution p {
        font-size: .92rem;
    }

    /* Keep arrows outside the content */

    #projectCarousel .carousel-control-prev {
        left: -5px;
    }

    #projectCarousel .carousel-control-next {
        right: -5px;
    }

    .project-arrow {
        width: 38px;
        height: 38px;
    }

    .project-indicators {
        gap: 9px;
    }

    .project-indicator {
        width: 42px;
        height: 42px;
        padding: 6px;
    }
}

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

@media (max-width: 480px) {
    #projectCarousel .carousel-item {
        padding-left: 20px;
        padding-right: 20px;
    }

    .project-showcase {
        gap: 25px;
    }

    .project-indicators {
        gap: 6px;
    }

    .project-indicator {
        width: 37px;
        height: 37px;
        padding: 5px;
    }
}


/* ==========================================================
   TECHNOLOGY BRAND COLORS
   ========================================================== */

#projects .project-stack .fa-php {
    color:#777bb4;
}


#projects .project-stack .fa-laravel {
    color:#ff2d20;
}


#projects .project-stack .fa-js {
    color:#f7df1e;
}


#projects .project-stack .fa-database {
    color:#4479a1;
}


#projects .project-stack .fa-aws {
    color:#ff9900;
}

#projects .project-stack .fa-html5 {
    color: rgb(227, 79, 38);
}

#projects .project-stack .fa-css3-alt {
    color: rgb(21, 114, 182);
}

#projects .project-stack .fa-bootstrap {
    color:  rgb(121, 82, 179);
}

#projects .project-stack .fa-fire {
    color:  rgb(241, 79, 41);
}

#projects .project-stack .fa-node-js{
    color:  rgb(104, 160, 99);
}


/* ==========================================================
   PROJECT LINK
   ========================================================== */

.project-link {

    margin-top:25px;

}


/* ==========================================================
   ACTIVE LINK
   ========================================================== */

.project-link-button {

    display:inline-flex;

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

    gap:9px;

    min-width:155px;

    padding:10px 18px;

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

    border-radius:8px;

    background:var(--primary);

    color:#ffffff;

    font-size:.85rem;

    font-weight:600;

    text-decoration:none;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;

}


.project-link-button:hover {

    background:var(--accent);

    border-color:var(--accent);

    color:#ffffff;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(0,0,0,.12);

}


.project-link-button i {

    font-size:.8rem;

}


/* ==========================================================
   DISABLED / PRIVATE PROJECT
   ========================================================== */

.project-link-button.project-link-disabled {

    border-color:rgba(0,0,0,.12);

    background:#f3f3f3;

    color:#999;

    cursor:not-allowed;

    box-shadow:none;

}


.project-link-button.project-link-disabled:hover {

    transform:none;

    background:#f3f3f3;

    border-color:rgba(0,0,0,.12);

    color:#999;

    box-shadow:none;

}