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

        html{
            scroll-behavior: smooth;
        }

        body{
            font-family: 'Poppins', sans-serif;
            overflow-x: hidden;
            background: #f5f5f5;
        }

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

.navbar{

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

    width: 100%;

    z-index: 1000;

    padding: 18px 70px;

    /* SAME TONE AS BACKGROUND */

    background:
    linear-gradient(
    to right,
    rgba(235,235,235,0.75) 45%,
    rgba(246,210,209,0.75) 100%
    );

    /* GLASS EFFECT */

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    /* THIN LINE SEPARATOR */

    border-bottom:
    1px solid rgba(255,255,255,0.35);

    transition: 0.4s ease;
}

/* LOGO */

.navbar-brand{

    font-size: 1.6rem;
    font-weight: 700;

    color: #111;
}

.navbar-brand span{
  font-size: 1.6rem;
    font-weight: 700;
    color: #e58e98;
    margin-left: 70px;
}

/* NAV LINKS */

.navbar-nav .nav-link{

    color: rgba(0,0,0,0.65);

    font-weight: 500;

    margin-left: 28px;

    position: relative;

    transition: 0.4s ease;
}

/* HOVER EFFECT */

.navbar-nav .nav-link:hover{
    color: #e58e98;
}

/* UNDERLINE EFFECT */

.navbar-nav .nav-link::after{

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0%;
    height: 1.5px;

    background: #e58e98;

    transition: 0.4s ease;
}

.navbar-nav .nav-link:hover::after{
    width: 100%;
}

/* NAVBAR SHADOW ON SCROLL */

.navbar.scrolled{

    box-shadow:
    0 8px 30px rgba(0,0,0,0.05);

}

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

.hero-section{

    min-height: 100vh;

    display: flex;

    align-items: center;

    background:
    linear-gradient(
    to right,
    #ebebeb 45%,
    #f6d2d1 100%
    );

    /* REDUCED TOP SPACE */

    padding:
    90px 80px 50px;

    position: relative;

    overflow: hidden;
}

        /* =========================
           LEFT CONTENT
        ========================== */

        .intro{
            font-size: 1.3rem;
            color: #444;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .wave{
            font-size: 2.3rem;
            display: inline-block;
            animation: waveAnimation 2s infinite;
            transform-origin: 70% 70%;
        }

        .typing-text{
            font-size: 5rem;
            font-weight: 700;
            line-height: 1.1;
            color: #111;
        }

        .typing-text span{
            color: #e58e98;
        }

        .hero-paragraph{
            margin-top: 35px;
            font-size: 1.1rem;
            line-height: 2;
            color: #444;
            max-width: 620px;
        }
/* =========================
   BUTTONS
========================== */

.hero-buttons{

    margin-top: 45px;

    display: flex;

    gap: 18px;

    flex-wrap: wrap;
}

.btn-main{

    padding: 15px 35px;

    border-radius: 50px;

    text-decoration: none;

    font-weight: 500;

    transition: 0.45s ease;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    position: relative;

    overflow: hidden;
}

/* =========================
   DOWNLOAD CV BUTTON
========================== */

.btn-cv{

    background:
    linear-gradient(
    to right,
    #e88f99,
    #f6b2b8
    );

    color: white;

    border: 1px solid transparent;

    box-shadow:
    0 10px 30px rgba(232,143,153,0.30);
}

/* HOVER SWITCH */

.btn-cv:hover{

    background: rgba(255,255,255,0.35);

    backdrop-filter: blur(12px);

    color: #111;

    border: 1px solid rgba(0,0,0,0.1);

    transform: translateY(-6px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.08);
}

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

.btn-contact{

    background: rgba(255,255,255,0.35);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(0,0,0,0.1);

    color: #111;
}

/* HOVER SWITCH */

.btn-contact:hover{

    background:
    linear-gradient(
    to right,
    #e88f99,
    #f6b2b8
    );

    color: white;

    border: 1px solid transparent;

    transform: translateY(-6px);

    box-shadow:
    0 18px 40px rgba(232,143,153,0.35);
}

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

        .hero-image-container{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* GLOW EFFECT */

        .hero-image-container::before{

            content: "";

            position: absolute;

            width: 500px;
            height: 500px;

            background:
            radial-gradient(circle,
            rgba(246,210,209,0.55) 0%,
            rgba(246,210,209,0.15) 45%,
            transparent 75%);

            filter: blur(30px);

            z-index: 1;

            animation: glowFloat 6s ease-in-out infinite;
        }

        /* ORGANIC SHAPE */

        .hero-image{

            width: 520px;

            position: relative;

            z-index: 2;

            overflow: hidden;

            

         
            animation: popImage 1.5s ease;

            transition: 0.5s ease;
        }

        .hero-image:hover{
            transform: translateY(-10px);
        }

        .hero-image img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

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

        .fade-one,
        .fade-two,
        .fade-three,
        .fade-four{
            opacity: 0;
            transform: translateY(40px);
            animation: smoothFade 1s ease forwards;
        }

        .fade-one{
            animation-delay: 0.3s;
        }

        .fade-two{
            animation-delay: 0.7s;
        }

        .fade-three{
            animation-delay: 1.1s;
        }

        .fade-four{
            animation-delay: 1.5s;
        }

        @keyframes smoothFade{

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

        }

        /* =========================
           WAVE ANIMATION
        ========================== */

        @keyframes waveAnimation{

            0%{
                transform: rotate(0deg);
            }

            15%{
                transform: rotate(14deg);
            }

            30%{
                transform: rotate(-8deg);
            }

            40%{
                transform: rotate(14deg);
            }

            50%{
                transform: rotate(-4deg);
            }

            60%{
                transform: rotate(10deg);
            }

            70%{
                transform: rotate(0deg);
            }

            100%{
                transform: rotate(0deg);
            }

        }

        /* =========================
           IMAGE POP EFFECT
        ========================== */

        @keyframes popImage{

            0%{
                transform: scale(0.2);
                opacity: 0;
                filter: blur(10px);
            }

            70%{
                transform: scale(1.05);
                opacity: 1;
                filter: blur(0px);
            }

            100%{
                transform: scale(1);
            }

        }

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

        @keyframes glowFloat{

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

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

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

        }

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

/* LARGE TABLETS */

@media(max-width: 1200px){

    .typing-text{
        font-size: 4rem;
    }

    .hero-image{
        width: 450px;
    }

}

/* TABLETS */

@media(max-width: 992px){
  .hero-image-container{
    margin-bottom: 50px;
}

    .navbar{
        padding: 18px 30px;
    }

    .hero-section{

    padding:
    90px 30px 60px;
    text-align: center;
}
    .typing-text{
        font-size: 3.3rem;
    }

    .hero-paragraph{

        max-width: 100%;

        margin:
        30px auto 0;
    }
    
    .hero-buttons{

        justify-content: center;

        margin-top: 35px;
    }

.hero-image{

        width: 350px;

        margin-top: 70px;
    }

.hero-image-container::before{

        width: 320px;
        height: 320px;
    }

.intro{
        justify-content: center;
    }

.navbar-collapse{

        margin-top: 20px;

        padding: 20px;

        border-radius: 20px;

        background:
        rgba(255,255,255,0.25);

        backdrop-filter: blur(14px);
    }

.navbar-nav .nav-link{
        margin: 12px 0;
    }

}

/* MOBILE DEVICES */

@media(max-width: 576px){
.hero-image{
    width: 260px;
}
    .hero-section{

    padding: 30px 20px 50px;
}

.typing-text{

        font-size: 2.5rem;

        line-height: 1.2;
    }
.hero-paragraph{

        font-size: 0.96rem;

        line-height: 1.8;
    }

.hero-image{

        width: 280px;
    }

.hero-image-container::before{

        width: 250px;
        height: 250px;
    }

.btn-main{

        width: 100%;

        justify-content: center;
    }

.hero-buttons{
        gap: 15px;
    }

.navbar-brand{
        font-size: 1.3rem;
    }
}


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

.skills-section{

    background:#fff;

    padding:120px 0;

    position:relative;

    overflow:hidden;
}

/* SECTION TITLE */

.section-heading{

    margin-bottom:80px;
}

.section-heading h2{

    font-size:3.5rem;

    font-weight:600;

    color:#111;
}

.section-heading span{

    color:#d98792;
}
/* =========================
   PUZZLES
========================== */

.skill-puzzle{

    position: relative;

    width: 100%;
    max-width: 380px;
     height: 520px;
  

    margin: auto;
    padding: 30px 25px;

    display: flex;
    flex-direction: column;

    background: rgba(255,255,255,0.65);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(246,210,209,.6);

    box-shadow:
    0 15px 40px rgba(246,210,209,.15);
    border-radius:
    38% 38% 35% 35% /
    25% 25% 25% 25%;

    overflow: hidden;

    transition: all .4s ease;

    opacity: 0;

    transform: translateY(50px);

    animation: fadeUp 1s forwards;
}


.skill-puzzle:hover{

    transform:
    translateY(-10px)
    scale(1.02);

    box-shadow:
    0 25px 45px rgba(246,210,209,.35);
}
/* =========================
   ICON
========================== */

.skill-icon{

    width: 80px;
    height: 80px;

    margin: 0 auto 25px;

    border-radius: 50%;

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

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

    color: #d98792;

    font-size: 1.8rem;

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

/* =========================
   TITLE
========================== */

.skill-puzzle h3{

    text-align: center;
    min-height: 65px;

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

    margin-bottom: 20px;

    color: #111;

    font-size: 2rem;

    line-height: 1.2;

    font-weight: 600;
}
/* =========================
   LISTS
========================== */
.skill-puzzle ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.skill-puzzle li{
    width:80%;
    max-width:260px;
    padding:10px 12px;
    text-align:center;
    font-size:.9rem;
    box-sizing:border-box;
    border-radius:12px;
    border:2px solid rgba(246,210,209,.35);
    background:rgba(255,255,255,.8);
    backdrop-filter: blur(10px);
     box-shadow:0 5px 15px rgba(0,0,0,.03);
    transition: all .3s ease;
}



.skill-puzzle li:hover{

    background: #fdf5f5;

    transform: translateY(-3px);

    box-shadow:
    0 10px 20px rgba(246,210,209,.25);
}
/* =========================
   HEADING
========================== */

.section-heading{

    margin-bottom: 80px;
}

.section-heading h2{

    font-size: 3.5rem;

    font-weight: 600;

    color: #111;
}

.section-heading span{

    color: #d98792;
}
/* =========================
   ANIMATION
========================== */

@keyframes fadeUp{

    from{

        opacity: 0;

        transform: translateY(60px);
    }

    to{

        opacity: 1;

        transform: translateY(0);
    }
}
/* =========================
   RESPONSIVE
========================== */

@media(max-width:992px){

    .skill-puzzle{

        max-width: 450px;

        height: auto;

        min-height: 420px;
    }

    .section-heading h2{

        font-size: 2.8rem;
    }
}



   @media(max-width:576px){

    .skill-puzzle{

        padding:35px;
    }

}


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

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(60px);
    }

    to{

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

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

@media(max-width:992px){

    .section-heading h2{

        font-size:2.8rem;
    }

    .skill-puzzle{

        min-height:auto;
    }

    
}

@media(max-width:576px){

    .skills-section{

        padding:80px 0;
    }

    .section-heading h2{

        font-size:2.2rem;
    }

    .skill-puzzle{

        padding:35px;
    }

}

/* ==========================
   JOURNEY SECTION
========================== */
 .journey-section{

    background:
    linear-gradient(
        rgba(255,255,255,.75),
        rgba(255,255,255,.75)
    ),
    url('images/roadmap\ bg.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:450px;

    padding:60px 0;

    transition:
    min-height .5s ease;
}
.journey-section.expanded{
        min-height:700px;
    }
     
.journey-heading{

    margin-bottom:80px;
}

.journey-heading h2{

    font-size:3.5rem;

    font-weight:600;

    color:#111;
}

.journey-heading span{

    color:white;
}

.journey-heading p{

    color:#444;

    margin-top:10px;
}

/* ==========================
   ROADMAP
========================== */

.roadmap-wrapper{
    position:relative;
    width:100%;
    max-width:1400px;
    margin:auto;
    height:260px;
    overflow:visible;

}
/* SVG ROAD */

.road-svg{

    position:absolute;

    width:100%;

    height:100%;
}

.road-path{

    fill:none;

    stroke:white;

    stroke-width:10;

    stroke-linecap:round;

    filter:drop-shadow(0 0 10px rgba(255,255,255,.5));

    stroke-dasharray:2000;

    stroke-dashoffset:2000;
}

/* DRAW ROAD */

.journey-section.active .road-path{

    animation:drawRoad 5s ease forwards;
}

@keyframes drawRoad{

    to{

        stroke-dashoffset:0;
    }
}

/* ==========================
   STOPS
========================== */

.journey-stop{

    position:absolute;

    width:170px;

    padding:18px;

    text-align:center;

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

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    border-radius:25px;

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

    opacity:0;

    transform:scale(.7);

    z-index:2;

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

.journey-stop{

    transition:
    transform .5s ease,
    box-shadow .5s ease;
}

/* Hover / Tap */

.journey-stop:hover,
.journey-stop.active{

    transform:
    translateY(-70px)
    scale(1.05);

    z-index:100;

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);
}

.journey-icon{

    font-size:2rem;

    margin-bottom:10px;
}

.journey-stop h4{

    font-size:1rem;

    margin-bottom:10px;

    color:#111;
}

.journey-content{

    font-size:.85rem;

    line-height:1.6;

    color:#333;

    opacity:0;

    max-height:0;

    overflow:hidden;

    transition:
    opacity .4s ease,
    max-height .4s ease,
    margin-top .4s ease;
}

/* Show description */

.journey-stop:hover .journey-content,
.journey-stop.active .journey-content{

    opacity:1;

    max-height:220px;

    margin-top:10px;
}
/* ==========================
   STOP POSITIONS
========================== */
.stop-1{
    top: 70px;
    left:1%;
}

.stop-2{
    top: 15px;
    left:23%;
}

.stop-3{
    top:150px;
    left:44%;
}

.stop-4{
    top:15px;
    left:65%;
}

.stop-5{
    top:70px;
    right:2%;
}
/* ==========================
   SEQUENTIAL APPEAR
========================== */

.journey-section.active .stop-1{

    animation:appear .6s forwards .1s;
}

.journey-section.active .stop-2{

    animation:appear .6s forwards 0.5s;
}

.journey-section.active .stop-3{

    animation:appear .6s forwards 1.0s;
}

.journey-section.active .stop-4{

    animation:appear .6s forwards 1.5s;
}

.journey-section.active .stop-5{

    animation:appear .6s forwards 2.0s;
}

@keyframes appear{

    to{

        opacity:1;

        transform:scale(1);
    }
}

/* TODAY GLOW */

.stop-5{

    animation:none;
}

.journey-section.active .stop-5{

    animation:
    appear .6s forwards 2.0s,
    pulse 2s infinite 5.5s;
}

@keyframes pulse{

    0%,100%{

        box-shadow:
        0 0 0 rgba(255,255,255,.6);
    }

    50%{

        box-shadow:
        0 0 30px rgba(255,255,255,.9);
    }
}

/* ==========================
   MOBILE
========================== */
@media (max-width: 992px){

    .roadmap-wrapper{

        height:auto;

        display:flex;

        justify-content:center;

        gap:15px;

        flex-wrap:wrap;

    }

    .journey-stop{

        position:relative;

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

        width:180px;

        opacity:1;

        transform:none;
    }

    .road-svg{

        display:none;
    }

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

.journey-section{

        padding:60px 0;
    }

.roadmap-wrapper{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

        height:auto;
    }

.journey-stop{

        width:90%;

        max-width:350px;

        position:relative;

        margin:0 auto;
    }
.journey-stop::after{

        display:none;
    }

    .road-svg{

        display:none;
    }
.journey-heading h2{

        font-size:2.3rem;

        
    }
 .expand-icon{
        display:inline-block;}
        }

    @media (min-width: 769px){

    .journey-stop:hover .journey-content{

        opacity: 1;

        max-height: 300px;

        margin-top: 10px;
        
    }
    
    .expand-icon{
        display:none;

}
}


.expand-icon{

    float:right;

    transition:.3s;
}

.journey-stop.active .expand-icon{

    transform:rotate(45deg);
}

@media (min-width: 993px){

.journey-section{
        min-height:420px;
        transition:min-height .5s ease;
    }
.journey-section.expanded{
        min-height:700px;
    }

}

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

.projects-section{

    padding:100px 4%;

    background:#fff;
}

/* =====================================
   HEADING
====================================== */

.projects-heading{

    margin-bottom:50px;
}

.projects-heading h2{

    font-size:3rem;

    font-weight:700;

    color:#111;
}

.projects-heading span{

    color:#d98792;
}

.projects-heading p{

    max-width:700px;

    margin:auto;

    color:#666;
}

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

.project-filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:60px;
}

.filter-btn{

    border:none;

    padding:12px 28px;

    border-radius:50px;

    background:#f5f5f5;

    color:#444;

    transition:.4s ease;

    font-weight:500;
}

.filter-btn:hover,
.filter-btn.active{

    background:#d98792;

    color:white;

    box-shadow:
    0 8px 20px rgba(217,135,146,.25);
}

/* =====================================
   GRID
====================================== */

.projects-grid{

    display:grid;

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

    gap:25px;
}

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


.project-card{

    position:relative;

    display:flex;
    flex-direction:column;

    min-height:380px;

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(246,210,209,.4);

    border-radius:25px;

    overflow:hidden;

    transition:.5s ease;
 
}
.project-card:hover{

    transform:
    translateY(-12px)
    scale(1.03);

    box-shadow:
    0 25px 45px rgba(217,135,146,.18);
}
/* Animated Border */

.project-card::before{
    pointer-events: none;

    content:"";

    position:absolute;

    inset:0;

    padding:2px;

    border-radius:25px;

    background:
    linear-gradient(
    90deg,
    #e4e4e4,
    #f6d2d1,
    #d98792,
    #f6d2d1,
    #e4e4e4
    );

    background-size:300% 300%;

    animation:borderMove 6s linear infinite;

    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;
}

@keyframes borderMove{

    0%{
        background-position:0% 50%;
    }

    100%{
        background-position:300% 50%;
    }
}

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

.project-image{

  
    height:120px;
    
    overflow:hidden;
}

.project-image img{
    padding: 10px;
    width:100%;
    height: 120px;;
    object-fit:contain;
    transition:.6s ease;
    border-radius: 20px;
}
 
/* =====================================
   CONTENT
====================================== */
.project-content{

    display:flex;

    flex-direction:column;

    flex-grow:1;

    padding:20px;

    height:100%;
}


.project-content h5{

    margin-bottom:15px;

    font-weight:600;

    color:#111;

    min-height:55px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;
}
/* =====================================
   TECH STACK
====================================== */

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    justify-content:center;

    align-content:flex-start;

    min-height:75px;

    margin-bottom:20px;
}
.tech-stack span{

    padding:5px 10px;

    border-radius:20px;

    background:
    rgba(246,210,209,.15);

    border:
    1px solid rgba(246,210,209,.4);

    color:#555;

    font-size:.72rem;
}


/* =====================================
   BUTTON
====================================== */

.project-btn{

    margin-top:auto;

    display:block;

    width:100%;

    text-align:center;

    padding:10px;

    border-radius:30px;

    text-decoration:none;

    color:white;

    font-weight:600;

    background:
    linear-gradient(
        135deg,
        #f6d2d1,
        #d98792
    );
}

.project-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    transition:.6s;
}

.project-btn:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 10px 20px rgba(217,135,146,.35);
}

.project-btn:hover::before{

    left:100%;
}
/* =====================================
   HOVER EFFECT
====================================== */

.project-card:hover{

    transform:
    translateY(-10px);

    box-shadow:
    0 20px 40px rgba(0,0,0,.12);
}

.project-card:hover img{

    transform:scale(1.02);
   
}

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

.reveal{

    opacity:0;

    transform:
    translateY(50px);

    transition:
    .8s ease;
}

.reveal.active{

    opacity:1;

    transform:
    translateY(0);
}

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

/* LARGE TABLETS */

@media(max-width:1200px){

    .projects-grid{

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

/* TABLETS */

@media(max-width:991px){

    .projects-grid{

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

        gap:20px;
    }

    .project-card{

        min-height:320px;
    }
}

/* PHONES */

@media(max-width:768px){

    .projects-grid{

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

        gap:18px;
    }

    .project-card{

        border-radius:22px;
    }

    .project-image{

        height:120px;
    }

    .project-image img{

        height:120px;
    }

    .project-content{

        padding:15px;
    }

    .project-content h5{

        font-size:1rem;
        min-height:48px;
    }

    .tech-stack{

        justify-content:center;
    }

    .project-btn{

        padding:12px;
        font-size:.9rem;
    }
}

/* SMALL PHONES */

@media(max-width:480px){

    .projects-grid{

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

        gap:15px;
    }

    .project-card{

        border-radius:20px;
    }

    .project-image{

        height:100px;
    }

    .project-image img{

        height:100px;
    }

    .project-content{

        padding:12px;
    }

    .project-content h5{

        font-size:.95rem;
        min-height:45px;
        text-align:center;
    }

    .tech-stack{

        gap:5px;
        justify-content:center;
    }

    .tech-stack span{

        font-size:.65rem;
        padding:4px 8px;
    }

    .project-btn{

        font-size:.85rem;
        padding:10px;
    }
}
/* =====================================
   CREATIVE SHOWCASE
===================================== */

.creative-showcase{
    padding: 40px 0;
}

.section-header{
    max-width:700px;
    margin:0 auto 60px;
}

.section-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;
    background:rgba(255,105,180,.12);
    color:#ff69b4;
    font-weight:600;
    margin-bottom:15px;
}

.section-title{
    margin-bottom:15px;
}
 span{
    color:#d98792;
}
.section-description{
    color:#888;
    line-height:1.8;
}

/* Gallery */

.design-gallery{
    column-count:5;
    column-gap:20px;
}

.design-card{
    break-inside:avoid;
    margin-bottom:20px;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
    position:relative;
}

.design-card img{
    width:100%;
    height:auto;
    display:block;
    border-radius:18px;
    transition:all .4s ease;
}

.design-card:hover img{
    transform:scale(1.05);
}
.design-card::after{
    content:"View Design";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    opacity:0;
    transition:.3s ease;
    font-weight:600;
}

.design-card:hover::after{
    opacity:1;
}

.design-card::after{
    pointer-events:none;
}
/* =====================================
   LIGHTBOX
===================================== */
.design-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.75);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.4s ease;

    z-index:9999;
}
.design-modal{

    opacity:0;

    visibility:hidden;
}

.design-modal.active{

    opacity:1;

    visibility:visible;
}

.modal-image{
    max-width:95%;
    max-height:95vh;
    border-radius:20px;
    transform:scale(.8);
    transition:.4s ease;
}
.design-modal.active .modal-image{

    transform:scale(1);
}

.close-modal{

    position:absolute;

    top:25px;

    right:35px;

    font-size:50px;

    color:#fff;

    cursor:pointer;

    z-index:10001;

    transition:.3s ease;
}

.close-modal:hover{

    transform:scale(1.1);
}

.modal-image{

    position:relative;

    z-index:10000;
}


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

@media (max-width:1200px){

    .design-gallery{
        column-count:4;
    }

}

@media (max-width:992px){

    .design-gallery{
        column-count:3;
    }

}

@media (max-width:768px){

    .creative-showcase{
        padding:90px 0;
    }

    .design-gallery{
        column-count:2;
    }

}

@media (max-width:480px){

    .design-gallery{
        column-count:1;
    }

}


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

.footer{
    position:relative;
    overflow:hidden;

    padding:50px 0 15px;

    background:linear-gradient(
        135deg,
        rgba(220,220,220,0.75) 0%,
        rgba(235,235,235,0.75) 45%,
        rgba(246,210,209,0.75) 100%
    );
}

.footer::before{
    content:"";
    position:absolute;

    width:350px;
    height:350px;

    border-radius:50%;

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

    top:-180px;
    right:-100px;

    filter:blur(80px);
}

.footer-content{
    text-align:center;
    max-width:700px;
    margin:0 auto;
}

.footer-tag{
    display:inline-block;
    padding:8px 18px;

    border-radius:50px;

    background:rgba(255,105,180,.12);
    color:#ff69b4;

    font-size:.9rem;
    font-weight:600;

    margin-bottom:15px;
}

.footer-title{
    color:#333;
    font-size:clamp(1.6rem,4vw,2.3rem);
    line-height:1.2;
    margin-bottom:15px;
}

.footer-description{
    color:#555;
    line-height:1.7;
    margin-bottom:20px;
}

.footer-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:12px 28px;

    border-radius:50px;

    background:#fff;
    color:#555;

    text-decoration:none;
    font-weight:600;

    transition:.3s ease;
}

.footer-btn:hover{
    transform:translateY(-4px);

    box-shadow:
    0 10px 25px rgba(246,210,209,.35);
}

/* CONTACT */

.footer-contact{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:25px;

    margin:25px 0;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:8px;

    color:#555;
    font-size:.95rem;
}

.contact-item i{
    color:#d8a2aa;
}

.contact-item a{
    color:#555;
    text-decoration:none;
}

.contact-item a:hover{
    color:#d8a2aa;
}

/* SOCIALS */

.footer-socials{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    width:100%;

    gap:15px;

    margin:25px auto;

}

.footer-content{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.footer-socials a{
    width:45px;
    height:45px;

    border-radius:50%;

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

    color:#555;

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

    text-decoration:none;

    transition:.3s ease;
}

.footer-socials a:hover{
    background:#fff;

    transform:translateY(-4px);

    color:#d8a2aa;
}

/* DIVIDER */

.footer-divider{
    height:1px;

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

    margin-bottom:15px;
}

/* BOTTOM */

.footer-bottom{
    text-align:center;
}

.footer-bottom p{
    color:#666;
    font-size:.85rem;
    margin:0;
}

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

@media (max-width:768px){

    .footer{
        padding:40px 0 15px;
    }

    .footer-contact{
        flex-direction:column;
        gap:12px;
    }

    .footer-socials{
       

        justify-content:center;

        align-items:center;

        width:100%;
    }

    .footer-title{
        font-size:2rem;
    }
    .contact-item{

        flex-direction:column;

        text-align:center;

        gap:5px;

}
}

@media (max-width:480px){

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

}