/* =====================================================
   PORTFOLIO HOME PAGE
   Designed according to your existing Portfolio.html
   ===================================================== */


/* =========================
   GLOBAL
   ========================= */

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

html{
    scroll-behavior: smooth;
}

body.home-page{
    min-height: 100vh;
    width: 100%;
    overflow: hidden;

    font-family: Arial, Helvetica, sans-serif;
    color: white;

    position: relative;

    background-image: url(background-image2.jpg);
    background-size: cover;

    /* background:
        radial-gradient(
            circle at 78% 18%,
            rgba(45, 174, 255, 0.50),
            transparent 28%
        ),

        radial-gradient(
            circle at 95% 22%,
            rgba(185, 55, 255, 0.48),
            transparent 27%
        ),

        linear-gradient(
            105deg,
            #020518 0%,
            #07122f 35%,
            #123c68 68%,
            #42236d 100%
        ); */
}


/* subtle dark layer */

body.home-page::before{
    content: "";
    position: fixed;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.22),
            rgba(0,0,0,0.03)
        );

    pointer-events: none;
    z-index: 0;
}


/* bottom grid */

body.home-page::after{
    content: "";
    position: fixed;

    width: 82%;
    height: 62%;

    right: -4%;
    bottom: -28%;

    background-image:
        linear-gradient(
            rgba(112, 168, 255, 0.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(112, 168, 255, 0.18) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    transform:
        perspective(650px)
        rotateX(67deg);

    transform-origin: bottom;

    opacity: 0.70;

    pointer-events: none;

    z-index: 0;
}


/* Make content appear above background */

header,
.hero-sec,
article,
.hero-btn,
.social-links{
    position: relative;
    z-index: 2;
}



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

header{
    width: 100%;
    padding-top: 8px;
}


.Navbar{
    width: calc(100% - 52px);
    height: 84px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    padding: 0 39px 0 22px;

    border-radius: 45px;

    background: rgba(6, 14, 35, 0.92);

    border: 2px solid rgba(76, 99, 196, 0.55);

    box-shadow:
        0 0 18px rgba(30, 77, 185, 0.08);
}


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

.nav-box1{
    display: flex;
    align-items: center;

    width: 210px;
}


.logo{
    font-size: 30px;
    font-weight: 800;

    color: #f4f5f8;

    letter-spacing: -1px;
}


.logo span{
    color: #39bafa;
}



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

.links{
    flex: 1;

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

    gap: 63px;
}


.links a{
    color: #cbd1dd;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;

    text-decoration: none;

    transition: color 0.25s ease;
}


.links a:hover{
    color: #43bdff;
}



/* =========================
   HIRE ME BUTTON
   ========================= */

.hire-btn{
    margin-left: 38px;
}


.hirebtn{
    width: 125px;
    height: 43px;

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

    gap: 10px;

    text-decoration: none;

    color: #081323;

    background: #4cc4ff;

    border-radius: 25px;

    border: 1px solid #0c9ce3;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 15px;
    font-weight: bold;

    box-shadow:
        0 3px 8px rgba(43, 185, 255, 0.18);
}


.hirebtn i{
    font-size: 15px;
}



/* Desktop hamburger hidden */

.menu-icon{
    display: none;
}



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

.hero-sec{
    width: 100%;
    height: 252px;

    position: relative;
}


.hero-content{
    position: relative;

    width: 100%;
    height: 100%;
}



/* =====================================================
   AVAILABLE FOR WORK
   ===================================================== */

.availablebtn{
    position: absolute;

    top: 85px;
    left: 9.55%;

    width: 175px;
    height: 39px;

    border: 1px solid rgba(51, 183, 255, 0.48);

    border-radius: 25px;

    display: flex;
    align-items: center;

    padding-left: 18px;

    gap: 13px;

    color: #ffffff;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 13px;

    background: rgba(0, 8, 31, 0.25);
}


.statusbtn{
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;

    background: #00da65;

    box-shadow: 0 0 8px rgba(0, 218, 101, 0.6);
}



/* =====================================================
   HELLO I'M
   ===================================================== */

.msg1{
    position: absolute;

    top: 148px;
    left: 9.55%;
}


.msg1 h3{
    font-size: 29px;

    font-weight: 700;

    color: #f8f8fb;

    line-height: 1;
}



/* =====================================================
   NAME
   ===================================================== */

.msg2{
    position: absolute;

    top: 183px;
    left: 9.55%;
}


.msg2 h2{
    font-size: 61px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

    white-space: nowrap;

    color: #ffffff;
}


.msg2 h2 span{
    color: #38b9f7;
}



/* =====================================================
   RIGHT SIDE TECHNOLOGY ICONS
   ===================================================== */

.hero-img{
    position: absolute;

    top: 70px;
    right: 8%;

    width: 390px;
    height: 360px;

    z-index: 1;
}


.hero-img i{
    position: absolute;

    color: #3cc4ff;

    filter:
        drop-shadow(
            0 0 5px rgba(55, 194, 255, 0.08)
        );
}



/* CODE */

.code-s{
    top: 121px;
    left: 145px;

    font-size: 82px;
}



/* NODE JS */

.java-s{
    top: 39px;
    left: 28px;

    font-size: 66px;

    transform: rotate(14deg);
}



/* CSS */

.css-s{
    top: 256px;
    left: 186px;

    font-size: 67px;
}



/* HTML */

.html-s{
    top: -1px;
    right: 13px;

    font-size: 70px;

    transform: rotate(32deg);
}



/* =====================================================
   ARTICLE
   ===================================================== */

article{
    width: 620px;

    margin-left: 10.3%;

    margin-top: 1px;
}


article h3{
    font-size: 19px;

    font-weight: 700;

    line-height: 1.3;

    color: white;
}


article h3 span{
    color: #35baff;
}


.short-des{
    width: 630px;

    margin-top: 20px;

    font-size: 16px;

    line-height: 1.65;

    color: #c3cedd;
}



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

.hero-btn{
    margin-left: 10.65%;

    margin-top: 19px;

    display: flex;
    align-items: center;

    gap: 15px;
}


.hero-btn1,
.hero-btn2{
    height: 42px;

    border-radius: 10px;

    text-decoration: none;

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

    gap: 10px;

    font-size: 15px;

    font-weight: 700;
}



/* View My Work */

.hero-btn1{
    width: 204px;

    color: #07111f;

    background: #4cc4ff;

    border: 2px solid #1ea9eb;

    box-shadow:
        0 3px 8px rgba(39, 181, 251, 0.22);
}



/* Contact me */

.hero-btn2{
    width: 159px;

    color: white;

    background: rgba(0, 9, 27, 0.35);

    border: 2px solid #34bdff;
}



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

.social-links{
    margin-left: 10.65%;

    margin-top: 35px;

    display: flex;

    align-items: center;

    gap: 17px;
}


.social-links a{
    width: 50px;
    height: 50px;

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

    border: 1.5px solid #243cff;

    border-radius: 13px;

    background: rgba(0, 7, 27, 0.64);

    text-decoration: none;

    color: #f6f7fc;

    font-size: 23px;
}


.social-links a i{
    pointer-events: none;
}



/* =====================================================
   SMALL HOVER EFFECTS
   Only simple effects — no redesign
   ===================================================== */

.links a,
.hirebtn,
.hero-btn1,
.hero-btn2,
.social-links a{
    transition: 0.25s ease;
}


.hirebtn:hover,
.hero-btn1:hover{
    filter: brightness(1.06);
}


.hero-btn2:hover{
    background: rgba(45, 185, 255, 0.10);
}


.social-links a:hover{
    border-color: #3fc1ff;
}


/* ==========================================================
   ABOUT PAGE BACKGROUND
   ========================================================== */

.remaining-page{
    width: 100%;
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;

    font-family: Arial, Helvetica, sans-serif;

    color: #ffffff;

   

       
    position: relative;
}

body:not(.home-page) {
    background:
        radial-gradient(circle at 20% 20%, rgba(0, 119, 255, 0.22), transparent 38%),
        radial-gradient(circle at 85% 70%, rgba(0, 255, 255, 0.08), transparent 35%),
        linear-gradient(135deg, #050816 0%, #08152f 45%, #0b2350 100%);

    background-attachment: fixed;
    min-height: 100vh;
}

/* soft light effects */

.remaining-page::before{
    content: "";

    position: fixed;
    inset: 0;

    background:
        linear-gradient(
            140deg,
            transparent 0%,
            rgba(0, 111, 255, 0.04) 45%,
            rgba(0, 130, 255, 0.12) 100%
        );

    pointer-events: none;

    z-index: 0;
}




/* ==========================================================
   MAIN ABOUT INTRO SECTION
   ========================================================== */

.remaining-page .About-file{
    width: 100%;
    height: 405px;

    position: relative;

    z-index: 2;
}


.remaining-page .about-content{
    position: absolute;

    top: 37px;
    left: 8.7%;

    width: 610px;
}


/* ABOUT ME SMALL PILL */

.remaining-page .abt-msg1{
    display: flex;
    align-items: center;
    justify-content: center;

    width: 103px;
    height: 29px;

    margin-bottom: 11px;

    border-radius: 18px;

    background:
        linear-gradient(
            90deg,
            #126bd8,
            #087dff
        );

    color: #ffffff;

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

    box-shadow:
        0 0 15px rgba(0, 114, 255, 0.35);
}


/* HI I'M */

.remaining-page .abt-msg2 h3{
    margin: 0;

    font-size: 43px;

    line-height: 1;

    font-weight: 700;

    color: #ffffff;
}


/* NAME */

.remaining-page .abt-msg3 h2{
    margin: 0;

    font-size: 54px;

    line-height: 0.98;

    font-weight: 800;

    color: #1398ff;

    letter-spacing: -1px;
}


/* SUBTITLE */

.remaining-page .abt-msg4{
    margin-top: 13px;

    color: #f0f5ff;

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

    white-space: nowrap;
}


/* DESCRIPTION */

.remaining-page .abt-des{
    width: 565px;

    margin-top: 14px;

    color: #e0e9f7;

    font-size: 16px;

    line-height: 1.48;

    font-weight: 400;
}


/* handwritten message shown in reference */

/* .remaining-page .about-content::after{
    content: "Let's Build Something Great  ↗";

    display: block;

    margin-top: 17px;

    color: #1da8ff;

    font-family: "Segoe Script", "Brush Script MT", cursive;

    font-size: 22px;

    font-style: italic;

    transform: rotate(-3deg);

    transform-origin: left center;

    text-shadow:
        0 0 7px rgba(0, 145, 255, 0.25);
} */



/* ==========================================================
   RIGHT VISUAL AREA
   ========================================================== */

/*
   Your HTML currently has no element/image for the laptop + AI
   illustration.

   This creates the correct empty area so nothing overlaps it.
   Later we can place your image here without moving the left text.
*/

.remaining-page .About-file::after{
    content: "";

    position: absolute;

    top: 42px;
    right: 8%;

    width: 510px;
    height: 335px;

    border-radius: 24px;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 108, 255, 0.11),
            transparent 65%
        );

    z-index: -1;
}



/* ==========================================================
   INFORMATION BAR
   ========================================================== */

.remaining-page .about-box{
    width: calc(100% - 142px);
    height: 114px;

    margin: -2px auto 0;

    padding: 0 38px;

    display: grid;

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

    align-items: center;

    border: 1px solid rgba(0, 127, 255, 0.60);

    border-radius: 24px;

    background:
        linear-gradient(
            90deg,
            rgba(3, 26, 60, 0.72),
            rgba(4, 33, 77, 0.62)
        );

    box-shadow:
        0 0 14px rgba(0, 105, 255, 0.10);

    position: relative;

    z-index: 4;
}


/* each info column */

.remaining-page .mcontainer1,
.remaining-page .mcontainer2{
    height: 72px;

    display: flex;
    align-items: center;

    gap: 28px;

    position: relative;
}


/* vertical separators */

.remaining-page .mcontainer1::after{
    content: "";

    position: absolute;

    right: 18px;

    top: 4px;

    width: 1px;
    height: 65px;

    background:
        linear-gradient(
            transparent,
            rgba(0, 122, 255, 0.60),
            transparent
        );
}


/* ICON BOX */

.remaining-page .container1{
    width: 67px;
    height: 67px;

    min-width: 67px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #0556c7,
            #00388b
        );

    border:
        1px solid rgba(0, 133, 255, 0.50);

    box-shadow:
        0 0 18px rgba(0, 105, 255, 0.42),
        inset 0 0 17px rgba(0, 161, 255, 0.16);
}


.remaining-page .container1 i{
    color: #63d7ff;

    font-size: 34px;

    filter:
        drop-shadow(
            0 0 6px rgba(0, 198, 255, 0.40)
        );
}

.remaining-page .container1 .name {
    background: linear-gradient(135deg, #fff3d6, #f4c27a, #c98b45);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

 .remaining-page .container1 .location  {
    color: #ef4444;
}

.remaining-page .container1 .education  {
    color: #fbbf24;
}

.remaining-page .container1 .experience {
    color: #d97706;
}



/* info text */

.remaining-page .about-box p{
    margin: 0;

    line-height: 1;
}


.remaining-page .line1{
    color: #ffffff;

    font-size: 16px;

    font-weight: 700;
}


.remaining-page .line2{
    color: #d1ddf0;

    font-size: 14px;

    font-weight: 400;
}



/* ==========================================================
   THREE BOTTOM SECTIONS
   ========================================================== */

.remaining-page .about-sections{
    width: calc(100% - 142px);

    margin: 28px auto 0;

    display: grid;

    grid-template-columns:
        1.14fr 1.18fr 0.78fr;

    min-height: 330px;

    position: relative;

    z-index: 3;
}


/* JOURNEY */

.remaining-page .JOURNEY{
    padding: 5px 43px 0 14px;

    border-right:
        1px solid rgba(0, 105, 255, 0.37);
}


.remaining-page .journey-heading{
    margin-bottom: 18px;
}


.remaining-page .journey-heading h2{
    font-size: 21px;

    font-weight: 700;

    color: #bce5ff;
}




/* timeline */

.remaining-page .journey-item{
    position: relative;

    display: flex;

    min-height: 85px;

    padding-left: 51px;
}


.remaining-page .journey-point{
    position: absolute;

    left: 2px;
    top: 5px;

    width: 19px;
    height: 19px;

    border-radius: 50%;

    background: #27c7ff;

    box-shadow:
        0 0 12px rgba(39, 199, 255, 0.92);
}


/* timeline vertical line */

.remaining-page .journey-item:not(:last-child)::after{
    content: "";

    position: absolute;

    left: 10px;
    top: 28px;

    width: 2px;
    height: 54px;

    background:
        linear-gradient(
            #24c6ff,
            rgba(15, 103, 255, 0.75)
        );

    box-shadow:
        0 0 4px rgba(24, 171, 255, 0.50);
}


.remaining-page .journey-content h3{
    margin: 0 0 7px;

    color: #17b5ff;

    font-size: 16px;
}


.remaining-page .journey-content p{
    margin: 0;

    color: #d5e2f3;

    font-size: 13px;

    line-height: 1.4;
}



/* ==========================================================
   WHAT I DO
   ========================================================== */

.remaining-page .doing{
    padding: 0 46px;

    border-right:
        1px solid rgba(0, 105, 255, 0.37);
}


.remaining-page .doing-heading{
    margin-bottom: 15px;
}


.remaining-page .doing-heading h2{
    margin: 0;

    font-size: 21px;

    color: #bce5ff;
}


.remaining-page .doing-item{
    display: flex;

    gap: 22px;

    margin-bottom: 12px;

    min-height: 64px;
}


.remaining-page .doing-content1{
    width: 65px;
    height: 65px;

    min-width: 65px;

    border-radius: 16px;

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

    background:
        linear-gradient(
            145deg,
            #0758c8,
            #003887
        );

    border:
        1px solid rgba(0, 136, 255, 0.53);

    box-shadow:
        0 0 14px rgba(0, 110, 255, 0.35);
}


.remaining-page .doing-content1 i{
    color: #61d8ff;

    font-size: 31px;

    filter:
        drop-shadow(
            0 0 5px rgba(50, 207, 255, 0.42)
        );
        opacity: 1;
        filter: none;
        text-shadow: none;
}

.remaining-page .doing-content1 .web {
    color: #38bdf8;
}

.remaining-page .doing-content1 .ai {
    color: #a855f7;
}

.remaining-page .doing-content1 .problem {
    color: #0e9787;
}

.remaining-page .doing-content1 .office-icon {
    color: #a7b0ba;
    filter: drop-shadow(0 0 3px rgba(167, 176, 186, 0.25));
}

.remaining-page .doing-content2{
    padding-top: 4px;
}


.remaining-page .doing-content2 h3{
    margin: 0 0 4px;

    color: #dceeff;

    font-size: 16px;

    font-weight: 700;
}


.remaining-page .doing-content2 p{
    margin: 0;

    max-width: 265px;

    color: #cfdaeb;

    font-size: 13px;

    line-height: 1.33;
}



/* ==========================================================
   HOBBIES
   ========================================================== */

.remaining-page .hobbies-sec{
    padding-left: 45px;
}


.remaining-page .hobbies-heading{
    margin-bottom: 20px;
}


.remaining-page .hobbies-heading h2{
    margin: 0;

    color: #bce5ff;

    font-size: 21px;

    font-weight: 700;
}


/* make your existing hobby items wrap 2 per row */
/* Technology */


.remaining-page .hobbies-sec{
    padding-left: 45px;

    display: grid;

    /* left column slightly wider */
    grid-template-columns: 1.25fr 0.95fr;

    column-gap: 15px;
    row-gap: 15px;

    align-content: start;
}

.remaining-page .hobbies-heading{
    grid-column: 1 / -1;
    margin-bottom: 5px;
}

.remaining-page .hobbies-item{
    width: 100%;
}

.remaining-page .hobbies-tech,
.remaining-page .hobbies-content{
    width: 100%;
    height: 50px;

    padding: 0 15px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-radius: 27px;

    white-space: nowrap;
}






.remaining-page .hobbies-tech i,
 .remaining-page .hobbies-content i{
    color: #70dcff;

    font-size: 21px;

    filter:
        drop-shadow(
            0 0 4px rgba(57, 209, 255, 0.43)
        );
}

.remaining-page .hobbies-tech .tech {

    background: linear-gradient(
        135deg,
        #f8fafc,
        #94a3b8,
        #475569
    );

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

}

.remaining-page .hobbies-content .travel {
    color: #60a5fa;
}

.remaining-page .hobbies-content .learning {
    color: #22c55e;
}

.remaining-page .hobbies-content .design {
    color: #c084fc;
}

.remaining-page .hobbies-content .cricket {
    color: #84cc16;
}

/* handwritten text below hobbies */

/* .remaining-page .hobbies-sec::after{
    content: "Dream  →  Learn  →  Build";

    flex-basis: 100%;

    margin-top: 27px;
    margin-left: 17px;

    color: #158dff;

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size: 23px;

    font-style: italic;

    transform: rotate(-7deg);

    text-shadow:
        0 0 8px rgba(0, 119, 255, 0.45);
} */



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

.remaining-page .links a,
.remaining-page .hirebtn,
.remaining-page .hobbies-content,
.remaining-page .hobbies-tech{
    transition: 0.25s ease;
}


.remaining-page .links a:hover{
    color: #35bdff;
}


.remaining-page .hobbies-content:hover,
.remaining-page .hobbies-tech:hover{
    border-color: #26c6ff;

    background:
        linear-gradient(
            90deg,
            rgba(0, 75, 165, 0.90),
            rgba(0, 57, 130, 0.86)
        );
}


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

.skills-page{
    width: calc(100% - 142px);
    margin: 0 auto;

    padding-top: 45px;
    padding-bottom: 50px;

    position: relative;
    z-index: 3;
}


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

.skills-title{
    text-align: center;

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

    color: #ffffff;

    margin: 0;
}


.skills-title span{
    color: #24b9ff;
}


/* ===== INTRO TEXT ===== */

.skills-intro{
    width: 650px;

    margin: 12px auto 35px;

    text-align: center;

    color: #cbd8ea;

    font-size: 15px;
    line-height: 1.6;
}


/* ==========================================================
   SKILLS GRID
   3 cards in first row
   3 cards in second row
   ========================================================== */

.skills-grid{
    width: 100%;

    display: grid;

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

    gap: 25px;
}


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

.skill-card{
    min-height: 235px;

    padding: 24px 23px 21px;

    border-radius: 19px;

    position: relative;

    background:
        linear-gradient(
            145deg,
            rgba(3, 28, 63, 0.92),
            rgba(3, 19, 47, 0.88)
        );

    border:
        1px solid rgba(39, 143, 255, 0.40);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


/* simple hover */

.skill-card:hover{
    transform: translateY(-5px);
}


/* ==========================================================
   TOP CONTENT
   ICON + TEXT
   ========================================================== */

.skill-top{
    display: flex;

    align-items: flex-start;

    gap: 18px;

    min-height: 145px;
}


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

.skill-icon{
    width: 68px;
    height: 68px;

    min-width: 68px;

    display: flex;

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

    border-radius: 17px;

    background:
        rgba(4, 24, 54, 0.85);

    border: 1px solid;

    font-size: 37px;
}


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

.html-icon{
    color: #ff6b3d;

    border-color:
        rgba(255, 107, 61, 0.75);

    box-shadow:
        0 0 20px rgba(255, 107, 61, 0.20);
}


.skill-card:has(.html-icon):hover{
    border-color:
        rgba(255, 107, 61, 0.75);

    box-shadow:
        0 0 22px rgba(255, 107, 61, 0.12);
}


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

.css-icon{
    color: #33b8ff;

    border-color:
        rgba(51, 184, 255, 0.75);

    box-shadow:
        0 0 20px rgba(51, 184, 255, 0.22);
}


.skill-card:has(.css-icon):hover{
    border-color:
        rgba(51, 184, 255, 0.75);

    box-shadow:
        0 0 22px rgba(51, 184, 255, 0.13);
}


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

.js-icon{
    color: #ffd43b;

    border-color:
        rgba(255, 212, 59, 0.70);

    box-shadow:
        0 0 20px rgba(255, 212, 59, 0.18);
}


.skill-card:has(.js-icon):hover{
    border-color:
        rgba(255, 212, 59, 0.75);

    box-shadow:
        0 0 22px rgba(255, 212, 59, 0.12);
}


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

.responsive-icon{
    color: #61dcff;

    border-color:
        rgba(97, 220, 255, 0.70);

    box-shadow:
        0 0 20px rgba(97, 220, 255, 0.18);
}


.skill-card:has(.responsive-icon):hover{
    border-color:
        rgba(97, 220, 255, 0.75);

    box-shadow:
        0 0 22px rgba(97, 220, 255, 0.12);
}


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

.ai-icon{
    color: #b375ff;

    border-color:
        rgba(179, 117, 255, 0.75);

    box-shadow:
        0 0 20px rgba(179, 117, 255, 0.20);
}


.skill-card:has(.ai-icon):hover{
    border-color:
        rgba(179, 117, 255, 0.75);

    box-shadow:
        0 0 22px rgba(179, 117, 255, 0.13);
}


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

.git-icon{
    color: #e5e7ef;

    border-color:
        rgba(229, 231, 239, 0.55);

    box-shadow:
        0 0 20px rgba(229, 231, 239, 0.12);
}


.skill-card:has(.git-icon):hover{
    border-color:
        rgba(229, 231, 239, 0.75);

    box-shadow:
        0 0 22px rgba(229, 231, 239, 0.10);
}


/* ==========================================================
   SKILL INFORMATION
   ========================================================== */

.skill-info{
    flex: 1;
}


.skill-info h2{
    margin: 2px 0 9px;

    color: #ffffff;

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

    line-height: 1.15;
}


.skill-info p{
    margin: 0;

    color: #bfcce0;

    font-size: 13px;

    line-height: 1.55;
}


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

.skill-bar{
    width: 100%;
    height: 9px;

    margin-top: 17px;

    border-radius: 20px;

    position: relative;

    background:
        rgba(106, 133, 168, 0.25);

    overflow: visible;
}


/* coloured part */

.skill-progress{
    height: 100%;

    border-radius: 20px;

    position: absolute;

    top: 0;
    left: 0;
}


/* percentage at END OF FULL BAR */

.skill-bar span{
    position: absolute;

    right: 0;
    top: -25px;

    color: #dce9f6;

    font-size: 12px;
    font-weight: 700;
}


/* HTML 90% */

.html-progress{
    width: 90%;

    background:
        linear-gradient(
            90deg,
            #ff6638,
            #ff8a61
        );

    box-shadow:
        0 0 8px rgba(255, 102, 56, 0.35);
}


/* CSS 85% */

.css-progress{
    width: 85%;

    background:
        linear-gradient(
            90deg,
            #087eff,
            #39c6ff
        );

    box-shadow:
        0 0 8px rgba(57, 198, 255, 0.35);
}


/* JavaScript 80% */

.js-progress{
    width: 80%;

    background:
        linear-gradient(
            90deg,
            #e6b900,
            #ffd93e
        );

    box-shadow:
        0 0 8px rgba(255, 217, 62, 0.28);
}


/* Responsive 85% */

.responsive-progress{
    width: 85%;

    background:
        linear-gradient(
            90deg,
            #129bdc,
            #63dfff
        );

    box-shadow:
        0 0 8px rgba(99, 223, 255, 0.28);
}


/* AI 85% */

.ai-progress{
    width: 85%;

    background:
        linear-gradient(
            90deg,
            #7548e8,
            #bd79ff
        );

    box-shadow:
        0 0 8px rgba(189, 121, 255, 0.30);
}


/* GitHub 70% */

.git-progress{
    width: 70%;

    background:
        linear-gradient(
            90deg,
            #aeb6c3,
            #e0e6ef
        );

    box-shadow:
        0 0 8px rgba(224, 230, 239, 0.22);
}


/* ==========================================================
   SKILLS NAV ACTIVE LINK
   Keeps SAME navbar design as About page
   ========================================================== */

/* remove About active state on Skills page */

body:has(.skills-page)
.links a[href="About.html"]{
    color: #ffffff;
}


body:has(.skills-page)
.links a[href="About.html"]::after{
    display: none;
}


/* Skills active */

body:has(.skills-page)
.links a[href="Skills.html"]{
    color: #21a6ff;
}


/* ==========================================================
   PROJECTS PAGE
   Navbar/header is NOT changed here
   ========================================================== */


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

.projects-page{
    width: calc(100% - 230px);
    margin: 0 auto;

    padding-top: 58px;
    padding-bottom: 70px;

    position: relative;
    z-index: 3;
}


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

.projects-title{
    margin: 0;

    text-align: center;

    color: #ffffff;

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

    line-height: 1.1;
}


.projects-title span{
    color: #109dff;
}


/* =========================
   INTRO
   ========================= */

.project-intro{
    width: 590px;

    margin: 18px auto 43px;

    text-align: center;

    color: #d4dfed;

    font-size: 18px;
    line-height: 1.45;
}


/* ==========================================================
   PROJECT CARDS GRID
   ========================================================== */

.projects-grid{
    width: 100%;
}


.project-mcontainer{
    width: 100%;

    display: grid;

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

    gap: 25px;
}


/* ==========================================================
   ALL PROJECT CARDS
   ========================================================== */
.project-card,
.project-card2{
    height: 566px;

    position: relative;

    padding: 28px 28px 25px;

    border-radius: 17px;

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

    background:
        linear-gradient(
            150deg,
            rgba(2, 28, 64, 0.92),
            rgba(2, 22, 53, 0.92)
        );

    box-shadow:
        0 0 18px rgba(0, 112, 255, 0.08);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.project-card3{
    height: 570px;

    position: relative;

    padding: 28px 28px 25px;

    border-radius: 17px;

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

    background:
        linear-gradient(
            150deg,
            rgba(2, 28, 64, 0.92),
            rgba(2, 22, 53, 0.92)
        );

    box-shadow:
        0 0 18px rgba(0, 112, 255, 0.08);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.project-card3:hover,
.project-card:hover,
.project-card2:hover{
    transform: translateY(-4px);

    border-color: #1aa8ff;

    box-shadow:
        0 0 22px rgba(0, 131, 255, 0.16);
}


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

.project-image{
    width: 100%;
    height: 207px;

    overflow: hidden;

    border-radius: 11px;

    border: 1px solid rgba(19, 148, 255, 0.65);

    background: #031631;
}


.project-image img{
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


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

.project-icon{
    width: 68px;
    height: 68px;

    position: relative;

    margin-top: -36px;

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

    border-radius: 15px;

    border: 1px solid #159cff;

    background:
        linear-gradient(
            145deg,
            #074f9f,
            #042e68
        );

    box-shadow:
        0 0 16px rgba(0, 133, 255, 0.42);

    z-index: 4;
}



.project-icon i{

    font-size: 42px;

    background: linear-gradient(
        135deg,
        #f8fafc,
        #94a3b8,
        #38bdf8,
        #64748b
    );

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

    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
}


.utensils-icon {


 width: 68px;
    height: 68px;

    position: relative;

    margin-top: -36px;

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

    border-radius: 15px;

    border: 1px solid #159cff;

    background:
        linear-gradient(
            145deg,
            #074f9f,
            #042e68
        );

    box-shadow:
        0 0 16px rgba(0, 133, 255, 0.42);

    z-index: 4;

}

.utensils-icon i {

    font-size: 42px;

    display: inline-block;

    background: linear-gradient(
        135deg,
        #ffffff,
        #cbd5e1,
        #6b7280,
        #e5e7eb
    );

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

    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
/* ==========================================================
   AMAZON SVG LOGO
   ========================================================== */

.amazon-logo{
    width: 61px;
    height: 61px;

    display: block;
}


.amazon-letter{
    fill: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 76px;
    font-weight: 700;
}


.amazon-arrow{
    fill: #f5a900;
}


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

.project-heading{
    margin: 16px 0 10px;

    color: #ffffff;

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

    line-height: 1.15;
}


/* ==========================================================
   PROJECT DESCRIPTION
   ========================================================== */

.project-info{
    min-height: 102px;

    margin: 0;

    color: #c3d2e6;

    font-size: 16px;
    line-height: 1.48;
}


/* ==========================================================
   TECHNOLOGY TAGS
   ========================================================== */

.project-properties{
    width: 100%;

    margin-top: 10px;

    display: flex;
    align-items: center;

    gap: 10px;
}


.project-properties-content,
.project-properties-content1{
    min-width: 74px;
    height: 32px;

    padding: 0 17px;

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

    border-radius: 18px;

    border: 1px solid #087dff;

    background:
        rgba(0, 61, 126, 0.40);

    color: #72d5ff;

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
}


.project-properties-content1{
    min-width: 106px;
}


/* ==========================================================
   VIEW PROJECT BUTTON
   ========================================================== */

.project-link{
    width: 194px;
    height: 47px;

    margin-top: 22px;

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

    gap: 22px;

    border-radius: 25px;

    text-decoration: none;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #0589ff,
            #056dff
        );

    font-size: 15px;
    font-weight: 600;

    box-shadow:
        0 0 14px rgba(0, 110, 255, 0.20);

    transition: 0.25s ease;
}


.project-link i{
    font-size: 14px;
}


.project-link:hover{
    filter: brightness(1.08);
}


/* ==========================================================
   PROJECTS ACTIVE NAV LINK
   Blue text only — NO underline
   ========================================================== */

body:has(.projects-page)
.links a[href="About.html"]{
    color: #ffffff;
}


body:has(.projects-page)
.links a[href="About.html"]::after{
    display: none;
}


body:has(.projects-page)
.links a[href="Skills.html"]{
    color: #ffffff;
}


body:has(.projects-page)
.links a[href="Skills.html"]::after{
    display: none;
}


body:has(.projects-page)
.links a[href="Projects.html"]{
    color: #21a6ff;
}


body:has(.projects-page)
.links a[href="Projects.html"]::after{
    display: none;
}




/* ==========================================================
   SERVICES PAGE
   Navbar/header remains exactly the shared design
   ========================================================== */


/* =========================
   MAIN SERVICES SECTION
   ========================= */

.services-page{
    width: calc(100% - 320px);
    margin: 0 auto;

    padding-top: 48px;
    padding-bottom: 55px;

    position: relative;
    z-index: 3;
}


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

.services-title{
    margin: 0;

    text-align: center;

    color: #ffffff;

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

    line-height: 1.1;
}


.services-title span{
    color: #149cff;
}


/* =========================
   INTRO TEXT
   ========================= */

.services-info{
    width: 650px;

    margin: 17px auto 38px;

    text-align: center;

    color: #d0dbea;

    font-size: 18px;
    line-height: 1.5;
}


.services-info span{
    color: #d0dbea;
}


/* ==========================================================
   SIX SERVICES GRID
   ========================================================== */

.services-grid{
    width: 100%;

    display: grid;

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

    gap: 26px 32px;
}


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

.services-card{
    height: 310px;

    padding: 26px 32px;

    border-radius: 18px;

    border: 1px solid rgba(14, 124, 255, 0.68);

    background:
        linear-gradient(
            145deg,
            rgba(3, 30, 67, 0.91),
            rgba(2, 23, 55, 0.91)
        );

    box-shadow:
        0 0 18px rgba(0, 108, 255, 0.07);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.services-card:hover{
    transform: translateY(-4px);

    border-color: #19aaff;

    box-shadow:
        0 0 22px rgba(0, 128, 255, 0.15);
}


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

.services-icon{
    width: 79px;
    height: 79px;

    margin-bottom: 18px;

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

    border-radius: 18px;

    border: 1px solid #078dff;

    background:
        linear-gradient(
            145deg,
            #0751a5,
            #032d67
        );

    box-shadow:
        0 0 18px rgba(0, 125, 255, 0.42);
}


.services-icon i{

    font-size: 37px;

    filter:
        drop-shadow(
            0 0 6px rgba(65, 209, 255, 0.43)
        );
}

.services-icon .web {
    color: #38bdf8;
}

.services-icon .responsive  {
    color: #2dd4bf;
}

.services-icon .UI{
    color: #c084fc;
}

.services-icon .ai  {
    color: #a855f7;
}

.services-icon .optimization {
    color: #f59e0b;
}

.services-icon .maintenance  {
    color: #cbd5e1;
}


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

.service-heading{
    margin: 0 0 14px;

    color: #ffffff;

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

    line-height: 1.2;
}


/* ==========================================================
   SERVICE DESCRIPTION
   ========================================================== */

.service-info{
    width: 100%;

    margin: 0;

    color: #c7d3e5;

    font-size: 17px;

    line-height: 1.48;
}


/* ==========================================================
   MATCH SCREENSHOT SECOND ROW ORDER
   Your HTML has Optimization before AI.
   This switches only their visual positions.
   HTML stays untouched.
   ========================================================== */

.services-card:nth-child(4){
    grid-column: 2;
    grid-row: 2;
}


.services-card:nth-child(5){
    grid-column: 1;
    grid-row: 2;
}


.services-card:nth-child(6){
    grid-column: 3;
    grid-row: 2;
}


/* ==========================================================
   SERVICES ACTIVE NAV LINK
   BLUE TEXT ONLY — NO UNDERLINE
   ========================================================== */

/* reset other remaining-page active links */

body:has(.services-page)
.links a[href="About.html"],
body:has(.services-page)
.links a[href="Skills.html"],
body:has(.services-page)
.links a[href="Projects.html"],
body:has(.services-page)
.links a[href="Contact.html"]{
    color: #ffffff;
}


/* remove every possible underline */

body:has(.services-page)
.links a::after{
    display: none !important;
}


/* Services active */

body:has(.services-page)
.links a[href="Services.html"]{
    color: #21a6ff;
}
/* ==========================================================
   CONTACT PAGE
   Shared navbar/header remains untouched
   ========================================================== */


/* =========================
   MAIN CONTACT SECTION
   ========================= */

.contact-page{
    width: calc(100% - 300px);

    margin: 0 auto;

    padding-top: 42px;
    padding-bottom: 60px;

    position: relative;
    z-index: 3;
}


/* =========================
   SMALL TOP HEADING
   ========================= */

.contact-badge{
    margin: 0;

    text-align: center;

    color: #18aaff;

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

    letter-spacing: 3px;
}


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

.contact-title{
    margin: 12px 0 0;

    text-align: center;

    color: #ffffff;

    font-size: 52px;
    font-weight: 800;
}


.contact-title span{
    color: #159eff;
}


/* =========================
   INTRO TEXT
   ========================= */

.contact-info{
    width: 650px;

    margin: 20px auto 42px;

    text-align: center;

    color: #ccd8e9;

    font-size: 17px;
    line-height: 1.55;
}


/* ==========================================================
   LEFT + RIGHT LAYOUT
   ========================================================== */

.contact-flex{
    width: 100%;

    display: grid;

    grid-template-columns: 37% 63%;

    gap: 32px;

    align-items: start;
}


/* ==========================================================
   LEFT CONTACT CARDS
   ========================================================== */

.contact-mcontainer{
    display: flex;

    flex-direction: column;

    gap: 18px;
}


.contact-card{
    min-height: 128px;

    padding: 24px;

    display: flex;

    align-items: center;

    gap: 24px;

    border-radius: 16px;

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

    background:
        linear-gradient(
            145deg,
            rgba(4, 29, 66, 0.91),
            rgba(3, 22, 52, 0.91)
        );

    box-shadow:
        0 0 15px rgba(0, 110, 255, 0.07);
}


/* CONTACT CARD ICON */

.contact-icon{
    width: 72px;
    height: 72px;

    min-width: 72px;

    display: flex;

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

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0759cc,
            #07348a
        );

    box-shadow:
        0 0 18px rgba(0, 114, 255, 0.30);
}


.contact-icon i{

    font-size: 31px;

    filter:
        drop-shadow(
            0 0 5px rgba(38, 196, 255, 0.45)
        );
}

.contact-icon .email {
    background: linear-gradient(135deg, #ff6b6b, #ea4335, #b91c1c);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-icon .location {
    background: linear-gradient(135deg, #ff8a8a, #ef4444, #b91c1c);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.location-link {
    color: #d5e2f3;
    text-decoration: none;
    transition: 0.3s ease;
}

.location-link:hover {
    color: #00aaff;
}
.contact-icon .availability {
    background: linear-gradient(135deg, #86efac, #22c55e, #15803d);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* CONTACT TEXT */

.contact-card-content{
    flex: 1;
}


.contact-card-heading{
    margin: 0 0 8px;

    color: #ffffff;

    font-size: 17px;
    font-weight: 700;
}


.my-email{
    color: #d8e4f2;

    font-size: 15px;

    text-decoration: none;
}


.my-email:hover{
    color: #36c0ff;
}


.contact-card-text{
    margin: 0;

    color: #d7e1ed;

    font-size: 15px;
}


.contact-card-info{
    margin: 10px 0 0;

    color: #9fb0c8;

    font-size: 13px;

    line-height: 1.4;
}


/* ==========================================================
   RIGHT FORM CONTAINER
   ========================================================== */

.contact-form-box{
    min-height: 440px;

    padding: 31px 39px 36px;

    border-radius: 18px;

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

    background:
        linear-gradient(
            145deg,
            rgba(4, 29, 66, 0.91),
            rgba(3, 22, 52, 0.91)
        );

    box-shadow:
        0 0 18px rgba(0, 110, 255, 0.07);
}


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

.form-heading{
    display: flex;

    align-items: center;

    gap: 16px;
}


.form-heading i{
    color: #159eff;

    font-size: 25px;
}


.form-heading h2{
    margin: 0;

    color: #ffffff;

    font-size: 23px;
}


.form-info{
    margin: 9px 0 21px;

    color: #b8c8dc;

    font-size: 14px;
}


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

.contact-form-box form{
    width: 100%;
}


.form-row{
    width: 100%;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-bottom: 16px;
}


/* =========================
   INPUT BOX
   ========================= */

.input-box{
    height: 55px;

    padding: 0 18px;

    display: flex;

    align-items: center;

    gap: 13px;

    border-radius: 9px;

    border: 1px solid rgba(89, 138, 202, 0.55);

    background:
        rgba(6, 29, 67, 0.65);
}


.input-box i{
    color: #9fbde0;

    font-size: 17px;
}


.input-box input{
    width: 100%;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 14px;
}


.input-box input::placeholder{
    color: #879bb8;
}


/* SUBJECT */

.full-input{
    width: 100%;

    margin-bottom: 16px;
}

.project-select {
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;

    background: transparent;
    color: #879bb8;

    border: none;
    outline: none;

    font-size: 16px;
    font-family: inherit;

    padding: 0 45px 0 10px;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}
.project-select option {
    background: #101a35;
    color: #ffffff;
    padding: 10px;
}
.input-box {
    position: relative;
}

.input-box:has(.project-select)::after {
    content: "⌄";
    position: absolute;

    right: 20px;
    top: 50%;
    transform: translateY(-55%);

    color: #879bb8;
    font-size: 22px;
    pointer-events: none;
}

/* ==========================================================
   TEXTAREA
   ========================================================== */

.message-box{
    width: 100%;
    height: 150px;

    padding: 17px 18px;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    border-radius: 9px;

    border: 1px solid rgba(89, 138, 202, 0.55);

    background:
        rgba(6, 29, 67, 0.65);
}


.message-box i{
    margin-top: 2px;

    color: #9fbde0;

    font-size: 17px;
}


.message-box textarea{
    width: 100%;
    height: 100%;

    resize: none;

    border: none;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    line-height: 1.5;
}


.message-box textarea::placeholder{
    color: #879bb8;
}


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

.send-btn{
    width: 100%;
    height: 52px;

    margin-top: 17px;

    display: flex;

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

    gap: 12px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #149eff,
            #086cff
        );

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

    box-shadow:
        0 0 16px rgba(0, 113, 255, 0.20);

    transition: 0.25s ease;
}


.send-btn:hover{
    filter: brightness(1.08);
}
.form-status {
    display: none;
    margin-top: 15px;
    padding: 12px 18px;

    border-radius: 8px;
    font-size: 14px;
    text-align: center;
}

.form-status.success {
    display: block;
    color: #4ade80;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.35);
}


/* ==========================================================
   CONTACT ACTIVE NAV LINK
   BLUE ONLY — NO UNDERLINE
   ========================================================== */

body:has(.contact-page)
.links a{
    color: #ffffff;
}


body:has(.contact-page)
.links a::after{
    display: none !important;
}


body:has(.contact-page)
.links a[href="Contact.html"]{
    color: #21a6ff;
}







@media (max-width: 767px){

    /* Keep whole navbar above page content */
    header{
        position: relative;
        z-index: 9999;
    }

    .Navbar{
        position: relative;
        overflow: visible;
        z-index: 9999;
    }

    /* Hide Hire Me on mobile */
    .hire-btn{
        display: none;
    }

    /* Hamburger */
    .menu-icon{
        display: block;
        margin-left: auto;

        position: relative;
        z-index: 10002;

        color: white;
        font-size: 23px;

        cursor: pointer;
        pointer-events: auto;
    }

    /* CLOSED MENU */
    .links{
        display: none;

        position: absolute;

        top: 68px;
        right: 0;
        left: auto;

        width: 230px;

        padding: 10px;

        flex-direction: column;
        gap: 4px;

        background: #071426;

        border: 1px solid #168cff;
        border-radius: 14px;

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

        z-index: 10001;

        pointer-events: auto;
    }

    /* OPEN MENU */
    .links.open{
        display: flex;
    }

    /* ACTUAL CLICKABLE LINKS */
    .links a{
        display: block;

        width: 100%;

        padding: 13px 15px;

        color: white;
        background: transparent;

        text-decoration: none;
        text-align: left;

        border-radius: 8px;

        position: relative;
        z-index: 10003;

        cursor: pointer;
        pointer-events: auto;
    }

    .links a:hover,
    .links a:active{
        background: #102b4d;
        color: #39bfff;
    }

    /* Don't let hero layers block navbar taps */
    .hero-sec,
    .hero-content,
    article,
    .hero-btn,
    .social-links{
        z-index: 1;
    }

    body::before,
    body::after{
        pointer-events: none;
    }
}






/* ==========================================================
   ==========================================================
             MRABD PORTFOLIO RESPONSIVE DESIGN
   ==========================================================
   ========================================================== */


/* ==========================================================
   SMALL LAPTOP / LARGE TABLET LANDSCAPE
   992px - 1199px
   ========================================================== */

@media (max-width: 1199px){

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

    .home-page .Navbar,
    .remaining-page .Navbar{
        width: calc(100% - 40px);

        padding-left: 25px;
        padding-right: 25px;
    }


    .home-page .nav-box1,
    .remaining-page .nav-box1{
        width: 190px;
    }


    .home-page .links,
    .remaining-page .links{
        gap: 32px;
    }


    /* ======================================================
       HOME
       ====================================================== */

    .home-page .availablebtn,
    .home-page .msg1,
    .home-page .msg2{
        left: 7%;
    }


    .home-page article{
        margin-left: 7.5%;
    }


    .home-page .hero-btn,
    .home-page .social-links{
        margin-left: 7.8%;
    }


    .home-page .hero-img{
        right: 3%;

        transform: scale(.85);

        transform-origin: right top;
    }


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

    .remaining-page .about-content{
        left: 7%;
    }


    .remaining-page .about-box,
    .remaining-page .about-sections{
        width: calc(100% - 80px);
    }


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

    .skills-page{
        width: calc(100% - 80px);
    }


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

    .projects-page{
        width: calc(100% - 80px);
    }


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

    .services-page{
        width: calc(100% - 90px);
    }


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

    .contact-page{
        width: calc(100% - 90px);
    }
}



/* ==========================================================
   IPAD / TABLET
   768px - 991px
   ========================================================== */

@media (max-width: 991px){

    body{
        overflow-x: hidden;
    }


    body::before,
    body::after{
        pointer-events: none;
    }


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

    .home-page header,
    .remaining-page header{
        width: 100%;

        padding: 12px 18px 0;

        position: relative;

        z-index: 9999;
    }


    .home-page .Navbar,
    .remaining-page .Navbar{
        width: 100%;
        height: 66px;

        margin: 0;

        padding: 0 22px;

        position: relative;

        display: flex;
        align-items: center;

        border-radius: 22px;

        overflow: visible;

        z-index: 9999;
    }


    .home-page .nav-box1,
    .remaining-page .nav-box1{
        width: auto;

        flex: 1;
    }


    .home-page .logo,
    .remaining-page .logo{
        font-size: 26px;
    }


    /* ======================================================
       REMOVE HIRE ME ON IPAD + MOBILE
       ====================================================== */

    .home-page .hire-btn,
    .remaining-page .hire-btn{
        display: none;
    }


    /* ======================================================
       HAMBURGER
       ====================================================== */

    .home-page .menu-icon,
    .remaining-page .menu-icon{
        display: block;

        margin-left: auto;

        position: relative;

        z-index: 10002;

        color: #ffffff;

        font-size: 24px;

        cursor: pointer;

        pointer-events: auto;
    }


    /* ======================================================
       CLOSED DROPDOWN
       ====================================================== */

    .home-page .links,
    .remaining-page .links{
        display: none;

        position: absolute;

        top: 76px;

        right: 0;
        left: auto;

        width: 240px;

        padding: 10px;

        flex-direction: column;

        align-items: stretch;

        gap: 4px;

        /* FULLY SOLID */
        background: #071426;

        border: 1px solid #168cff;

        border-radius: 14px;

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

        z-index: 10001;

        pointer-events: auto;
    }


    /* OPEN */

    .home-page .links.open,
    .remaining-page .links.open{
        display: flex;
    }


    /* LINKS */

    .home-page .links a,
    .remaining-page .links a{
        display: block;

        width: 100%;

        padding: 13px 15px;

        color: #ffffff;

        background: transparent;

        text-decoration: none;

        text-align: left;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 15px;

        border-radius: 8px;

        position: relative;

        z-index: 10003;

        pointer-events: auto;

        cursor: pointer;
    }


    .home-page .links a::after,
    .remaining-page .links a::after{
        display: none !important;
    }


    .home-page .links a:hover,
    .home-page .links a:active,
    .remaining-page .links a:hover,
    .remaining-page .links a:active{
        background: #102b4d;

        color: #39bfff;
    }



    /* ======================================================
       HOME — IPAD
       ====================================================== */

    .home-page{
        min-height: 100vh;

        overflow-x: hidden;

        background:
            radial-gradient(
                circle at 88% 12%,
                rgba(59, 102, 255, 0.22),
                transparent 34%
            ),

            radial-gradient(
                circle at 8% 90%,
                rgba(0, 180, 255, 0.10),
                transparent 32%
            ),

            linear-gradient(
                150deg,
                #020617 0%,
                #07132e 52%,
                #101d46 100%
            );
    }


    .home-page .hero-sec{
        width: 100%;

        height: auto;

        min-height: 0;
    }


    .home-page .hero-content{
        width: 100%;

        height: auto;

        padding:
            90px 8%
            0;

        position: relative;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        text-align: left;
    }


    /* Remove tech icons on tablets too */

    .home-page .hero-img{
        display: none;
    }


    .home-page .availablebtn{
        position: static;

        width: auto;

        height: 37px;

        margin: 0 0 28px;

        padding: 0 16px;

        display: inline-flex;

        align-items: center;

        justify-content: center;
    }


    .home-page .msg1{
        position: static;

        width: 100%;

        margin: 0 0 7px;
    }
     

    .home-page .msg1 h3{
        font-size: 29px;
    }


    .home-page .msg2{
        position: static;

        width: 100%;
    }


    .home-page .msg2 h2{
        width: 100%;

        margin: 0;

        font-size: 56px;

        line-height: 1.05;

        white-space: normal;
    }


    .home-page .rehman-name{
        display: inline;
        margin-left: 0;
    }

     

    .home-page article{
        width: 100%;

        margin: 0;

        padding:
            23px 8%
            0;

        text-align: left;
    }


    .home-page article h3{
        font-size: 19px;

        margin-bottom: 14px;
    }


    .home-page .short-des{
        width: 560px;

        max-width: 80%;

        font-size: 15px;
    }


    .home-page .hero-btn{
        width: 100%;

        margin: 28px 0 0;

        padding: 0 8%;

        display: flex;

        gap: 14px;
    }


    .home-page .hero-btn1,
    .home-page .hero-btn2{
        width: 190px;

        height: 47px;
    }


    .home-page .social-links{
        width: 100%;

        margin:
            30px 0
            50px;

        padding: 0 8%;

        justify-content: flex-start;
    }
 @media (max-width:360px){
      .home-page .surname {
        display: block;
        margin-left: 130px;
    }
    }
    

    /* ======================================================
       ABOUT — IPAD
       ====================================================== */

    .remaining-page .About-file{
        width: 100%;

        height: auto;

        min-height: 0;
    }


    .remaining-page .about-content{
        position: relative;

        top: auto;
        left: auto;

        width: calc(100% - 80px);

        margin:
            55px auto
            45px;
    }


    .remaining-page .abt-msg2 h3{
        font-size: 38px;
    }


    .remaining-page .abt-msg3 h2{
        font-size: 49px;
    }


    .remaining-page .abt-msg4{
        white-space: normal;

        font-size: 20px;
    }


    .remaining-page .abt-des{
        width: 75%;
    }


    /* Information bar */

    .remaining-page .about-box{
        width: calc(100% - 60px);

        height: auto;

        padding: 25px;

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

        row-gap: 26px;
    }


    .remaining-page .mcontainer1::after{
        display: none;
    }


    /* Bottom About sections */

    .remaining-page .about-sections{
        width: calc(100% - 60px);

        margin-top: 35px;

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

        row-gap: 40px;
    }


    .remaining-page .JOURNEY{
        padding:
            5px 35px
            0 5px;
    }


    .remaining-page .doing{
        padding:
            0 10px
            0 35px;

        border-right: none;
    }


    .remaining-page .hobbies-sec{
        grid-column: 1 / -1;

        padding:
            30px 0
            0;

        border-top:
            1px solid rgba(0,105,255,.25);

        display: grid;

        grid-template-columns:
            1.25fr 1fr;

        gap: 15px;
    }


    .remaining-page .hobbies-heading{
        grid-column: 1 / -1;
    }



    /* ======================================================
       SKILLS — IPAD
       ====================================================== */

    .skills-page{
        width: calc(100% - 60px);

        padding-top: 48px;
    }


    .skills-title{
        font-size: 40px;
    }


    .skills-intro{
        width: 80%;
    }


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

        gap: 22px;
    }


    .skill-card{
        min-height: 230px;
    }



    /* ======================================================
       PROJECTS — IPAD
       ====================================================== */

    .projects-page{
        width: calc(100% - 60px);

        padding-top: 48px;
    }


    .projects-title{
        font-size: 48px;
    }


    .project-intro{
        width: 75%;

        font-size: 16px;
    }


    .project-mcontainer{
        grid-template-columns:
            repeat(2, 1fr);

        gap: 22px;
    }


    .project-card,
    .project-card2{
        height: auto;

        min-height: 560px;
    }



    /* ======================================================
       SERVICES — IPAD
       ====================================================== */

    .services-page{
        width: calc(100% - 60px);

        padding-top: 48px;
    }


    .services-title{
        font-size: 44px;
    }


    .services-info{
        width: 80%;

        font-size: 16px;
    }


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

        gap: 22px;
    }


    /* Reset desktop manual positions */

    .services-card:nth-child(4),
    .services-card:nth-child(5),
    .services-card:nth-child(6){
        grid-column: auto;

        grid-row: auto;
    }


    .services-card{
        height: 290px;
    }



    /* ======================================================
       CONTACT — IPAD
       ====================================================== */

    .contact-page{
        width: calc(100% - 60px);

        padding-top: 48px;
    }


    .contact-title{
        font-size: 46px;
    }


    .contact-info{
        width: 75%;
    }


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

        gap: 28px;
    }


    /* Three contact cards side by side */

    .contact-mcontainer{
        display: grid;

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

        gap: 16px;
    }


    .contact-card{
        min-height: 185px;

        padding: 22px;

        flex-direction: column;

        align-items: flex-start;

        gap: 17px;
    }
}



/* ==========================================================
   MOBILE
   481px - 767px
   ========================================================== */

@media (max-width: 767px){

    /* ======================================================
       SHARED MOBILE NAVBAR
       ====================================================== */

    .home-page header,
    .remaining-page header{
        padding:
            10px 12px
            0;
    }


    .home-page .Navbar,
    .remaining-page .Navbar{
        height: 61px;

        padding: 0 17px;

        border-radius: 20px;
    }


    .home-page .logo,
    .remaining-page .logo{
        font-size: 23px;
    }


    /* Hire Me remains hidden */

    .home-page .hire-btn,
    .remaining-page .hire-btn{
        display: none;
    }


    .home-page .menu-icon,
    .remaining-page .menu-icon{
        font-size: 22px;
    }


    /* Compact right-side menu */

    .home-page .links,
    .remaining-page .links{
        top: 70px;

        right: 0;

        width: 225px;

        background: #071426;

        border-radius: 14px;
    }



    /* ======================================================
       HOME — MOBILE
       ====================================================== */

    .home-page .hero-content{
        width: 100%;

        padding:
            80px 24px
            0;

        align-items: flex-start;

        text-align: left;
    }


    /* Completely remove technology visual */

    .home-page .hero-img{
        display: none;
    }


    .home-page .availablebtn{
        position: static;

        width: auto;

        height: 34px;

        margin:
            0 0
            25px;

        padding:
            0 14px;

        font-size: 12px;
    }


    .home-page .msg1{
        position: static;

        width: 100%;

        margin:
            0 0
            6px;
    }


    .home-page .msg1 h3{
        margin: 0;

        font-size: 23px;

        font-weight: 600;
    }


    .home-page .msg2{
        position: static;

        width: 100%;

        margin: 0;
    }


    .home-page .msg2 h2{
        width: 100%;

        max-width: 350px;

        margin: 0;

        font-size:
            clamp(38px, 11vw, 46px);

        line-height: 1.03;

        letter-spacing: -1.4px;

        white-space: normal;
    }


    /* Only affects your separated Rehman span */

    .home-page .rehman-name{
        display: block;

        margin-left: 60px;
    }


    .home-page article{
        width: 100%;

        margin: 0;

        padding:
            22px 24px
            0;

        text-align: left;
    }


    .home-page article h3{
        width: 100%;

        max-width: 350px;

        margin:
            0 0
            13px;

        font-size: 16px;

        line-height: 1.45;
    }


    .home-page .short-des{
        width: 100%;

        max-width: 355px;

        margin: 0;

        font-size: 14px;

        line-height: 1.7;
    }


    /* CTA Buttons */

    .home-page .hero-btn{
        width: 100%;

        margin:
            27px 0
            0;

        padding:
            0 24px;

        display: grid;

        grid-template-columns:
            1.08fr .92fr;

        gap: 10px;
    }


    .home-page .hero-btn1,
    .home-page .hero-btn2{
        width: 100%;

        height: 47px;

        border-radius: 10px;

        font-size: 13px;

        white-space: nowrap;
    }


    /* Social links */

    .home-page .social-links{
        width: calc(100% - 48px);

        margin:
            27px 24px
            48px;

        padding-top: 20px;

        display: flex;

        justify-content: flex-start;

        gap: 12px;

        border-top:
            1px solid rgba(110,145,190,.18);
    }


    .home-page .social-links a{
        width: 43px;
        height: 43px;

        font-size: 18px;

        border-radius: 10px;
    }



    /* ======================================================
       ABOUT — MOBILE
       ====================================================== */

    .remaining-page .about-content{
        width: calc(100% - 40px);

        margin:
            42px auto
            35px;
    }


    .remaining-page .abt-msg1{
        width: 96px;

        height: 29px;
    }


    .remaining-page .abt-msg2 h3{
        font-size: 33px;
    }


    .remaining-page .abt-msg3 h2{
        font-size: 39px;

        line-height: 1.05;
    }


    .remaining-page .abt-msg4{
        margin-top: 12px;

        font-size: 17px;

        line-height: 1.45;
    }


    .remaining-page .abt-des{
        width: 100%;

        font-size: 14px;

        line-height: 1.6;
    }


    /* Info cards */

    .remaining-page .about-box{
        width: calc(100% - 40px);

        padding: 20px;

        grid-template-columns: 1fr;

        gap: 18px;

        border-radius: 18px;
    }


    .remaining-page .mcontainer1,
    .remaining-page .mcontainer2{
        width: 100%;

        min-height: 76px;
    }


    /* About bottom sections */

    .remaining-page .about-sections{
        width: calc(100% - 40px);

        grid-template-columns: 1fr;

        gap: 38px;
    }


    .remaining-page .JOURNEY{
        padding: 0;

        border-right: none;
    }


    .remaining-page .doing{
        padding: 0;

        border-right: none;
    }


    .remaining-page .hobbies-sec{
        grid-column: auto;

        padding: 0;

        border-top: none;

        display: grid;

        grid-template-columns:
            1.25fr 1fr;

        gap: 13px;
    }


    .remaining-page .hobbies-heading{
        grid-column: 1 / -1;
    }


    .remaining-page .hobbies-item{
        width: 100%;
    }


    .remaining-page .hobbies-tech,
    .remaining-page .hobbies-content{
        width: 100%;

        min-width: 0;

        padding:
            0 13px;

        font-size: 13px;
    }



    /* ======================================================
       SKILLS — MOBILE
       ====================================================== */

    .skills-page{
        width: calc(100% - 40px);

        padding-top: 42px;
    }


    .skills-title{
        font-size: 36px;
    }


    .skills-intro{
        width: 100%;

        margin:
            12px auto
            30px;

        font-size: 14px;
    }


    .skills-grid{
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .skill-card{
        width: 100%;

        min-height: 0;

        padding: 22px;
    }


    .skill-top{
        min-height: 0;

        margin-bottom: 28px;
    }


    .skill-info h2{
        font-size: 20px;
    }


    .skill-info p{
        font-size: 13px;
    }



    /* ======================================================
       PROJECTS — MOBILE
       ====================================================== */

    .projects-page{
        width: calc(100% - 40px);

        padding-top: 42px;
    }


    .projects-title{
        font-size: 39px;
    }


    .project-intro{
        width: 100%;

        margin:
            15px auto
            30px;

        font-size: 15px;
    }


    .project-mcontainer{
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .project-card,
    .project-card2{
        width: 100%;

        height: auto;

        min-height: 0;

        padding: 20px;
    }


    .project-image{
        height: 200px;
    }


    .project-heading{
        font-size: 22px;
    }


    .project-info{
        min-height: 0;

        margin-bottom: 20px;

        font-size: 14px;
    }


    .project-properties{
        flex-wrap: wrap;
    }


    .project-link{
        width: 100%;

        margin-top: 20px;
    }



    /* ======================================================
       SERVICES — MOBILE
       ====================================================== */

    .services-page{
        width: calc(100% - 40px);

        padding-top: 42px;
    }


    .services-title{
        font-size: 38px;
    }


    .services-info{
        width: 100%;

        margin:
            15px auto
            30px;

        font-size: 15px;
    }


    .services-grid{
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .services-card{
        width: 100%;

        height: auto;

        min-height: 245px;

        padding: 24px;
    }


    .services-icon{
        width: 70px;
        height: 70px;
    }


    .services-icon i{
        font-size: 32px;
    }


    .service-heading{
        font-size: 21px;
    }


    .service-info{
        font-size: 15px;
    }



    /* ======================================================
       CONTACT — MOBILE
       ====================================================== */

    .contact-page{
        width: calc(100% - 40px);

        padding-top: 42px;
    }


    .contact-badge{
        font-size: 13px;

        letter-spacing: 2px;
    }


    .contact-title{
        font-size: 39px;
    }


    .contact-info{
        width: 100%;

        margin:
            17px auto
            32px;

        font-size: 14px;
    }


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

        gap: 24px;
    }


    .contact-mcontainer{
        display: flex;

        flex-direction: column;

        gap: 15px;
    }


    .contact-card{
        width: 100%;

        min-height: 115px;

        padding: 19px;

        flex-direction: row;

        align-items: center;

        gap: 18px;
    }


    .contact-icon{
        width: 58px;
        height: 58px;

        min-width: 58px;
    }


    .contact-icon i{
        font-size: 25px;
    }


    .contact-form-box{
        min-height: 0;

        padding: 24px 20px;
    }


    /* Name and email become vertical */

    .form-row{
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .input-box{
        height: 53px;
    }


    .message-box{
        height: 145px;
    }


    .send-btn{
        height: 50px;
    }
}



/* ==========================================================
   SMALL MOBILE
   320px - 480px
   ========================================================== */

@media (max-width: 480px){

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

    .home-page header,
    .remaining-page header{
        padding:
            9px 9px
            0;
    }


    .home-page .Navbar,
    .remaining-page .Navbar{
        height: 59px;

        padding:
            0 15px;

        border-radius: 19px;
    }


    .home-page .logo,
    .remaining-page .logo{
        font-size: 21px;
    }


    .home-page .links,
    .remaining-page .links{
        top: 68px;

        width: 215px;
    }



    /* ======================================================
       HOME
       ====================================================== */
     .home-page {
        height: 700px;
     }
    .home-page .hero-content{
        padding:
            70px 20px
            0;
    }


    .home-page .msg1 h3{
        font-size: 21px;
    }


    .home-page .msg2 h2{
        font-size: 37px;
    }


    .home-page .rehman-name{
        margin-left: 55px;
    }


    .home-page article{
        padding-left: 20px;
        padding-right: 20px;
    }


    .home-page article h3{
        font-size: 15px;
    }


    .home-page .short-des{
        font-size: 13px;
    }


    .home-page .hero-btn{
        padding-left: 20px;
        padding-right: 20px;

        gap: 8px;
    }


    .home-page .hero-btn1,
    .home-page .hero-btn2{
        height: 45px;

        font-size: 12px;
    }


    .home-page .social-links{
        width: calc(100% - 40px);

        margin-left: 20px;
        margin-right: 20px;
    }



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

    .remaining-page .abt-msg3 h2{
        font-size: 34px;
    }


    .remaining-page .hobbies-sec{
        grid-template-columns: 1fr;
    }



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

    .skill-card{
        padding: 19px;
    }


    .skill-top{
        gap: 13px;
    }


    .skill-icon{
        width: 57px;
        height: 57px;

        min-width: 57px;

        font-size: 30px;
    }


    .skill-info h2{
        font-size: 18px;
    }



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

    .projects-title{
        font-size: 34px;
    }


    .project-image{
        height: 175px;
    }


    .project-heading{
        font-size: 20px;
    }



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

    .services-title{
        font-size: 34px;
    }


    .services-card{
        min-height: 230px;

        padding: 21px;
    }



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

    .contact-title{
        font-size: 34px;
    }


    .contact-card{
        padding: 17px;

        gap: 14px;
    }


    .contact-form-box{
        padding:
            21px 16px;
    }
}






/* =========================================
   ABOUT PAGE - MOBILE REFINEMENT
   ========================================= */

@media (max-width: 767px){

    /* Darker background for readability */
    .remaining-page{
        position: relative;
    }

    .remaining-page::before{
        content: "";
        position: fixed;
        inset: 0;

        background: rgba(2, 10, 30, 0.32);

        pointer-events: none;

        z-index: 0;
    }

    @media (max-width: 667px) {
    .abt-msg3 .name {
        font-size: clamp(32px, 10vw, 42px);
        line-height: 1.05;
        white-space: nowrap;
        margin: 5px 0 10px;
    }
}
/* Small phones — iPhone SE etc. */
@media (max-width: 390px) {

    .abt-msg3 .name {
        font-size: 40px;
        line-height: 1.05;
        white-space: normal;
    }

    .name .surname {
        display: block;
        margin-left: 130px;
    }
}

    /* Main About intro */
    .remaining-page .about-content{
        width: calc(100% - 40px);

        margin: 48px auto 38px;

        position: relative;

        z-index: 2;
    }


    .remaining-page .abt-msg1{
        margin-bottom: 16px;
    }


    .remaining-page .abt-msg2 h3{
        font-size: 32px;

        line-height: 1.15;
    }


    .remaining-page .abt-msg3 h2{
        margin-top: 4px;

        font-size: 39px;

        line-height: 1.05;
    }


    .remaining-page .abt-msg4{
        margin-top: 16px;

        font-size: 17px;

        line-height: 1.5;
    }


    .remaining-page .abt-des{
        width: 100%;

        margin-top: 18px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* =====================================
       INFO CARDS
       ===================================== */

    .remaining-page .about-box{
        width: calc(100% - 40px);

        margin: 0 auto;

        padding: 17px;

        display: grid;

        grid-template-columns: 1fr;

        gap: 13px;

        border-radius: 18px;
    }


    .remaining-page .mcontainer1,
    .remaining-page .mcontainer2{
        min-height: 70px;

        gap: 18px;
    }


    .remaining-page .container1{
        width: 57px;
        height: 57px;

        min-width: 57px;

        border-radius: 14px;
    }


    .remaining-page .container1 i{
        font-size: 27px;
    }


    /* =====================================
       LOWER ABOUT SECTIONS
       ===================================== */

    .remaining-page .about-sections{
        width: calc(100% - 40px);

        margin: 38px auto 0;

        display: grid;

        grid-template-columns: 1fr;

        gap: 42px;
    }


    .remaining-page .JOURNEY,
    .remaining-page .doing,
    .remaining-page .hobbies-sec{
        width: 100%;

        padding: 0;

        border: none;
    }


    .remaining-page .journey-heading,
    .remaining-page .doing-heading,
    .remaining-page .hobbies-heading{
        margin-bottom: 22px;
    }


    .remaining-page .journey-heading h2,
    .remaining-page .doing-heading h2,
    .remaining-page .hobbies-heading h2{
        font-size: 22px;
    }


    /* Journey */

    .remaining-page .journey-item{
        min-height: 82px;

        padding-left: 46px;
    }


    .remaining-page .journey-content h3{
        font-size: 16px;
    }


    .remaining-page .journey-content p{
        font-size: 13px;

        line-height: 1.5;
    }


    /* =====================================
       WHAT I DO
       ===================================== */

    .remaining-page .doing-item{
        margin-bottom: 17px;

        gap: 17px;
    }


    .remaining-page .doing-content1{
        width: 58px;
        height: 58px;

        min-width: 58px;

        border-radius: 14px;
    }


    .remaining-page .doing-content1 i{
        font-size: 27px;
    }


    .remaining-page .doing-content2 h3{
        font-size: 15px;
    }


    .remaining-page .doing-content2 p{
        font-size: 12px;

        line-height: 1.45;
    }


    /* =====================================
       HOBBIES
       ===================================== */

    .remaining-page .hobbies-sec{
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 12px;
    }


    .remaining-page .hobbies-heading{
        grid-column: 1 / -1;
    }


    .remaining-page .hobbies-item{
        width: 100%;
    }


    .remaining-page .hobbies-tech,
    .remaining-page .hobbies-content{
        width: 100%;
        height: 48px;

        padding: 0 14px;

        display: flex;

        align-items: center;

        gap: 10px;

        border-radius: 24px;

        background: #09264d;

        border: 1px solid rgba(34, 147, 255, 0.55);

        color: #ffffff;

        font-size: 13px;

        white-space: nowrap;
    }


    .remaining-page .hobbies-tech i,
    .remaining-page .hobbies-content i{
        color: #62d5ff;

        font-size: 18px;
    }
}


/* =========================================
   PAGE TRANSITION
   ========================================= */

body{
    animation: pageEnter 0.35s ease forwards;
}

body.page-leaving{
    animation: pageLeave 0.25s ease forwards;
}


/* Page opening */

@keyframes pageEnter{

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

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


/* Page closing */

@keyframes pageLeave{

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

    to{
        opacity: 0;
        transform: translateY(-8px);
    }
}


/* Accessibility */

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

    body,
    body.page-leaving{
        animation: none;
    }
}
@media (max-width: 600px) {

    .home-page-content {
        min-height: calc(100svh - 90px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        transform: translateY(-35px);
    }

}