/* ===== Reset ===== */

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

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: Arial, Helvetica, sans-serif;
     background: #f5f9fc;
 }

 /* ===== Header ===== */

 header {

     position: fixed;
     width: 100%;
     top: 0;
     left: 0;
     z-index: 1000;

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

     padding: 18px 8%;

     background: #012A4A;

     box-shadow: 0 5px 15px rgba(0, 0, 0, .15);

 }

 /* ===== Logo ===== */

 .logo {

     display: flex;
     align-items: center;
     gap: 12px;

 }

 /* Logo Image */

 .logo img {

     width: 52px;
     height: 52px;

     border-radius: 50%;

     object-fit: cover;

     background: white;

     padding: 3px;

     transition: .35s;

 }

 .logo img:hover {

     transform: rotate(8deg) scale(1.08);

     box-shadow:
         0 0 12px #89C2D9,
         0 0 25px #89C2D9;

 }


 /* Logo Text */

 .logo h1 {

     color: white;

     font-size: 30px;

     font-weight: bold;

     letter-spacing: 1px;

     cursor: pointer;

     transition: .3s;

 }

 .logo h1:hover {

     color: #89C2D9;

 }

 /* ===== Navbar ===== */

 .navbar {
     flex: 1;
     display: flex;
     justify-content: center;
 }

 .navbar ul {

     display: flex;

     list-style: none;

     gap: 35px;

 }

 .navbar ul li a {

     color: white;

     text-decoration: none;

     display: flex;

     font-size: 17px;

     font-weight: 600;

     position: relative;

     transition: .3s;

 }

 /* Underline Animation */

 .navbar ul li a::after {

     content: "";

     position: absolute;

     left: 0;

     bottom: -6px;

     width: 0;

     height: 2px;

     background: #89C2D9;

     transition: .3s;

 }

 .navbar ul li a:hover::after {

     width: 100%;

 }

 .navbar ul li.mobile-menu-profile a::after {
     display: none;
 }

 .navbar ul li.mobile-menu-profile a:hover::after {
     width: 0;
 }

 .navbar ul li.mobile-menu-profile a:hover {
     color: #ffffff;
     text-decoration: none;
 }

 .navbar ul li a:hover {

     color: #89C2D9;

 }

 .active {

     color: #89C2D9;

 }

 /* ===== Hire Me Button ===== */

 /* .hire-btn {
            position: relative;
            font-family: inherit;
            font-weight: 700;
            font-size: 18px;
            letter-spacing: 0.04em;
            text-decoration: none;
            border-radius: 0.8em;
            cursor: pointer;
            border: none;
            background: linear-gradient(135deg, #0a2e49, #10587c);
            color: #ffffff;
            overflow: hidden;
            padding: 12px 28px;
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 30px rgba(235, 237, 238, 0.404);
        }

        .hire-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 32px rgba(78, 106, 128, 0.25);
        }

        .hire-btn::before {
            position: absolute;
            top: 0;
            left: -120%;
            width: 120%;
            height: 100%;
            content: "";
            background: rgba(221, 223, 226, 0.651);
            transform: skew(30deg);
            transition: transform 0.9s cubic-bezier(0.3, 1, 0.8, 1);
            z-index: 0;
        }

        .hire-btn:hover::before {
            transform: translate3d(220%, 0, 0) skew(30deg);
        }

        .hire-btn::after {
            position: absolute;
            inset: 0;
            content: "";
            background: linear-gradient(180deg, rgba(11, 38, 110, 0.856), transparent 60%);
            opacity: 0.8;
            z-index: 0;
        }

        .hire-btn {
            color: #ffffff;
        } */

 .user-profile {
     width: 150px;
     height: 51px;
     border-radius: 15px;
     cursor: pointer;
     transition: 0.3s ease;
     background: linear-gradient(to bottom right,
             #2e8eff 0%,
             rgba(46, 142, 255, 0) 30%);
     background-color: rgba(46, 142, 255, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .user-profile:hover,
 .user-profile:focus {
     background-color: rgba(46, 142, 255, 0.7);
     box-shadow: 0 0 10px rgba(46, 142, 255, 0.5);
     outline: none;
 }

 .user-profile-inner {
     width: 227px;
     height: 47px;
     border-radius: 13px;
     background-color: #01497C;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     color: #fff;
     font-weight: 600;
 }

 .user-profile-inner svg {
     width: 27px;
     height: 27px;
     fill: #fff;
 }

 .user-profile-inner a {
     text-decoration: none;
     color: white;
 }

 /* From Uiverse.io by reglobby */


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

 .home {

     padding: 80px 8%;
     padding-top: 150px;

 }

 .home-container {

     display: flex;

     justify-content: center;

     align-items: center;

     gap: 90px;


 }

 .home-content {

     flex: 1;

 }

 .hello {

     display: inline-block;

     font-size: 20px;

     color: #01497C;

     margin-bottom: 15px;

     font-weight: bold;

 }

 .home-content h1 {

     font-size: 60px;

     color: #012A4A;

     margin-bottom: 10px;

     line-height: 1.2;

 }

 .home-content h2 {

     font-size: 32px;

     color: #2C7DA0;

     margin-bottom: 20px;

     overflow: hidden;

 }

 .word {
     display: inline-block;
     margin: auto;
     color: #2C7DA0;
     font-weight: 700;
     font-size: 20px;
     font-family: 'Tahoma', sans-serif;
     overflow: hidden;
     white-space: nowrap;
     width: auto;
 }


 .home-content p {

     font-size: 17px;

     color: #555;

     line-height: 1.9;

     max-width: 600px;

     margin-bottom: 35px;

 }

 /* Buttons */

 .home-buttons {

     display: flex;

     gap: 20px;

     margin-bottom: 35px;

 }

 .btn-primary {

     text-decoration: none;

     text-align: center;

     background: #012A4A;

     color: white;

     padding: 14px 30px;

     border-radius: 40px;

     font-weight: bold;

     transition: .3s;

 }

 .btn-primary:hover {

     background: #01497C;

     transform: translateY(-3px);

 }

 .btn-secondary {

     text-decoration: none;

     border: 2px solid #012A4A;

     color: #012A4A;

     padding: 14px 30px;

     border-radius: 40px;

     font-weight: bold;

     transition: .3s;

 }

 .btn-secondary:hover {

     background: #012A4A;

     color: white;

 }

 /* Social Icons */

 .social-icons {

     display: flex;

     gap: 20px;

 }

 .social-icons a {

     width: 50px;

     height: 50px;

     border-radius: 50%;

     background: #012A4A;

     color: white;

     display: flex;

     justify-content: center;

     align-items: center;

     text-decoration: none;

     font-size: 22px;

     transition: .3s;

     position: relative;

     overflow: visible;

 }

 .social-icons a:hover {

     background: #89C2D9;

     color: #012A4A;

     transform: translateY(-5px);

 }

 .footer-social a {

     width: 50px;

     height: 50px;

     border-radius: 50%;

     background: #012A4A;

     color: white;

     display: inline-flex;

     justify-content: center;

     align-items: center;

     text-decoration: none;

     font-size: 22px;

     transition: .3s;

     position: relative;

     overflow: visible;

     margin-right: 12px;

 }

 .footer-social a:hover {

     background: #89C2D9;

     color: #012A4A;

     transform: translateY(-5px);

 }

 .social-icons a[data-tooltip]::after {

     content: attr(data-tooltip);

     position: absolute;

     bottom: calc(100% + 12px);

     left: 50%;

     transform: translateX(-50%) translateY(10px);

     opacity: 0;

     pointer-events: none;

     background: #012A4A;

     color: #ffffff;

     padding: 7px 12px;

     border-radius: 999px;

     white-space: nowrap;

     font-size: 13px;

     font-weight: 500;

     transition: opacity 0.25s ease, transform 0.25s ease;

     z-index: 10;

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

 }

 .social-icons a[data-tooltip]::before {

     content: "";

     position: absolute;

     bottom: 100%;

     left: 50%;

     transform: translateX(-50%);

     border-width: 6px 6px 0 6px;

     border-style: solid;

     border-color: #012A4A transparent transparent transparent;

     opacity: 0;

     transition: opacity 0.25s ease;

 }

 .social-icons a:hover[data-tooltip]::after {

     opacity: 1;

     transform: translateX(-50%) translateY(0);

 }

 .social-icons a:hover[data-tooltip]::before {

     opacity: 1;

 }

 /* Profile Image */

 .home-image {

     flex: 1;

     display: flex;

     justify-content: end;

     opacity: 0;

     transform: translateX(80px);

     animation: slideInRight 1s ease-out 0.2s forwards;

 }

 .home-image img {

     width: 380px;

     height: 380px;

     object-fit: cover;

     border-radius: 30% 70% 71% 29% / 30% 48% 52% 70%;

     border: 8px solid white;

     box-shadow: 0 15px 35px rgba(0, 0, 0, .18);

     animation: shapeMorph 1s linear infinite;

 }



 .home-image img:hover {

     transform: scale(1.05);

     box-shadow:

         0 0 20px #89C2D9,

         0 0 40px #2C7DA0;

 }



 @keyframes shapeMorph {
     0% {
         border-radius: 60% 40% 72% 28% / 59% 63% 37% 41%;
     }

     20% {
         border-radius: 57% 43% 69% 31% / 61% 60% 40% 39%;
     }

     40% {
         border-radius: 43% 50% 55% 45% / 70% 55% 45% 20%;
     }

     60% {
         border-radius: 58% 42% 68% 32% / 62% 61% 39% 38%;
     }

     80% {
         border-radius: 62% 38% 74% 26% / 58% 64% 36% 42%;
     }

     100% {
         border-radius: 60% 40% 72% 28% / 59% 63% 37% 41%;
     }
 }

 .home-content {

     flex: 1;

     opacity: 0;

     transform: translateX(-80px);

     animation: slideInLeft 1s ease-out 0.1s forwards;

 }

 @keyframes slideInLeft {

     0% {

         opacity: 0;

         transform: translateX(-80px);

     }

     100% {

         opacity: 1;

         transform: translateX(0);

     }

 }

 @keyframes slideInRight {

     0% {

         opacity: 0;

         transform: translateX(80px);

     }

     100% {

         opacity: 1;

         transform: translateX(0);

     }

 }

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

 .about {

     padding: 90px 8%;

     background: #ffffff;

 }

 .about-container {

     display: flex;

     align-items: center;

     justify-content: space-between;

     gap: 200px;

     flex-wrap: wrap;

 }

 .about-image {

     flex: 1;

     display: flex;

     justify-content: start;

     opacity: 0;

     transform: translateY(80px);

     transition: transform .9s ease-out, opacity .9s ease-out;

 }

 .about-image.animate {

     opacity: 1;

     transform: translateY(0);

 }

 .about-image img {

     width: 360px;

     height: 360px;

     object-fit: cover;

     border-radius: 20px;

     border: 6px solid white;

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

     transition: .4s;

 }

 .about-image img:hover {

     transform: scale(1.05);

     box-shadow:
         0 0 20px #89C2D9,
         0 0 40px #2C7DA0;

 }

 .about-content {

     flex: 1;

     opacity: 0;

     transform: translateX(-80px);

     transition: transform .9s ease-out, opacity .9s ease-out;

 }

 .about-content.animate {

     opacity: 1;

     transform: translateX(0);

 }

 .about-subtitle {

     color: #2C7DA0;

     font-weight: bold;

     font-size: 18px;

 }

 .about-content h2 {

     font-size: 42px;

     color: #012A4A;

     margin: 15px 0 25px;

 }

 .about-content p {

     color: #555;

     line-height: 1.9;

     margin-bottom: 20px;

     text-align: justify;

 }

 .about-info {

     display: grid;

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

     gap: 20px;

     margin: 35px 0;

 }

 /* .about-info-experience{
    width: 300px;
 } */

 .about-info a {
     text-decoration: none;
     color: black;
     cursor: pointer;
 }


 .about-info div {

     background: #f8fbff;

     padding: 18px;

     border-radius: 12px;

     box-shadow: 0 5px 15px rgba(0, 0, 0, .08);

     transition: .3s;

 }

 .about-info div:hover {

     transform: translateY(-5px);

 }

 .about-info strong {

     color: #012A4A;

 }

 .about-btn {

     display: inline-block;

     text-decoration: none;

     background: #012A4A;

     color: white;

     padding: 14px 35px;

     border-radius: 30px;

     font-weight: bold;

     transition: .3s;

 }

 .about-btn:hover {

     background: #01497C;

     transform: translateY(-3px);

 }

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

 .skills {

     padding: 80px 8%;

     background: #f8fbff;

 }

 .skills .section-title {

     opacity: 0;

     transition: opacity .8s ease-out;

     text-align: center;

     color: #012a4a;

 }

 .skills .section-title.fade-in {

     opacity: 1;

 }

 .projects .section-title {

     opacity: 0;

     transition: opacity .8s ease-out;

 }

 .projects .section-title.fade-in {

     opacity: 1;

 }

 .skills-container {

     max-width: 800px;

     margin: auto;

 }

 .skill {

     margin-bottom: 30px;

     opacity: 0;

     transform: translateY(60px);

     transition: transform .9s ease-out, opacity .9s ease-out;

 }

 .skill.animate {

     opacity: 1;

     transform: translateY(0);

 }

 .skill-title {

     display: flex;

     justify-content: space-between;

     margin-bottom: 10px;

     font-weight: bold;

     color: #012A4A;

 }

 .progress-bar {

     width: 100%;

     height: 18px;

     background: #dce8f2;

     border-radius: 50px;

     overflow: hidden;

 }

 .progress {

     width: 0;

     height: 100%;

     border-radius: 50px;

     transition: width 2s ease;

 }

 .html {

     background: #E44D26;

 }

 .css {

     background: #2965F1;

 }

 .js {

     background: #F7DF1E;

 }

 .responsive {

     background: #00A896;

 }

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

 .projects {

     padding: 80px 8%;

     background: #f4f9fc;

 }

 .section-title {

     text-align: center;
     color: #012a4a;
 }

 .projects-container {

     display: grid;

     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

     gap: 35px;

     margin-top: 50px;

 }

 .project-card {

     background: #ffffff;

     border-radius: 20px;

     overflow: hidden;

     box-shadow: 0 8px 20px rgba(0, 0, 0, .08);

     transition: .35s, transform .9s ease-out, opacity .9s ease-out;

     opacity: 0;

     transform: translateY(60px);

 }

 .project-card.animate {

     opacity: 1;

     transform: translateY(0);

 }

 .project-card:hover {

     transform: translateY(-15px);

     box-shadow: 0 15px 35px rgba(0, 0, 0, .18);

 }

 .project-card img {

     width: 100%;

     height: 250px;

     object-fit: fill;


 }

 .project-content {

     padding: 25px;

 }

 .project-content h3 {

     color: #012A4A;

     margin-bottom: 15px;

 }

 .project-content p {

     color: #555;

     line-height: 1.7;

     margin-bottom: 20px;

 }

 .tech {

     display: flex;

     gap: 10px;

     flex-wrap: wrap;

     margin-bottom: 25px;

 }

 .tech span {

     background: #e8f1f8;

     color: #012A4A;

     padding: 7px 15px;

     border-radius: 20px;

     font-size: 14px;

     font-weight: bold;

 }

 .project-buttons {

     display: flex;

     gap: 15px;

 }

 .project-buttons a {

     flex: 1;

     text-align: center;

     text-decoration: none;

     background: #012A4A;

     color: white;

     padding: 12px;

     border-radius: 10px;

     transition: .3s;

 }

 .project-buttons a:hover {

     background: #01497C;

 }

 /* CONTACT SECTION */

 .contact {
     padding: 80px 10%;
     background: #f8fbff;
 }

 .contact-container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 60px;
     background: #ffffff;
     padding: 50px;
     border-radius: 20px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     flex-wrap: wrap;
 }

 .contact-info {
     flex: 1;
     min-width: 300px;
     opacity: 0;
     transform: translateY(60px);
     transition: transform .9s ease-out, opacity .9s ease-out;
 }

 .contact-info.animate {
     opacity: 1;
     transform: translateY(0);
 }

 .contact-info h2 {
     font-size: 38px;
     color: #012A4A;
     margin-bottom: 20px;
 }

 .contact-info p {
     color: #555;
     line-height: 1.8;
     margin-bottom: 15px;
 }

 .contact-details p {
     margin: 10px 0;
     font-size: 17px;
 }

 .contact-details a {
     text-decoration: none;
     color: black;
 }



 .contact-form {
     flex: 1;
     min-width: 300px;
     opacity: 0;
     transform: translateY(60px);
     transition: transform .9s ease-out, opacity .9s ease-out;
 }

 .contact-form.animate {
     opacity: 1;
     transform: translateY(0);
 }

 .contact-form form {
     display: flex;
     flex-direction: column;
     gap: 18px;
 }

 .contact-form input,
 .contact-form textarea {
     width: 100%;
     padding: 15px;
     border: 2px solid #d6e4f0;
     border-radius: 10px;
     outline: none;
     font-size: 16px;
     transition: .3s;
 }

 .contact-form input:focus,
 .contact-form textarea:focus {
     border-color: #01497C;
 }

 .contact-form button {
     background: #012A4A;
     color: #fff;
     border: none;
     padding: 15px;
     border-radius: 30px;
     cursor: pointer;
     font-size: 16px;
     font-weight: bold;
     transition: .3s;
 }

 .contact-form button:hover {
     background: #01497C;
 }

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

 .footer {

     background: #012A4A;

     color: white;

     padding: 60px 10% 25px;

 }

 .footer-container {

     display: flex;

     justify-content: space-between;

     flex-wrap: wrap;

     gap: 50px;

 }



 .footer-logo {

     display: flex;

     justify-content: center;

     align-items: center;

     gap: 10px;
     /* flex-direction:row; */

 }

 .footer-logo>div {

     display: flex;

     flex-direction: column;

     justify-content: center;

 }

 .footer-logo img {

     width: 50px;

     height: 50px;

     border-radius: 50%;

     object-fit: cover;

     background: white;

     padding: 2px;

 }

 .footer-logo h2 {

     font-size: 30px;

     margin: 0 0 6px;

 }

 .footer-logo p {

     color: #c7d9e8;

     margin: 0;

 }

 .footer-links {

     display: flex;

     flex-direction: column;

 }

 .footer-links h3 {

     margin-bottom: 15px;

 }

 .footer-links a {

     color: white;

     text-decoration: none;

     margin: 8px 0;

     transition: .3s;

 }

 .footer-links a:hover {

     color: #5dade2;

     padding-left: 8px;

 }

 .footer-social h3 {

     margin-bottom: 15px;

 }

 .footer-social a {

     width: 50px;

     height: 50px;

     border-radius: 50%;

     background: #012A4A;

     color: white;

     display: inline-flex;

     justify-content: center;

     align-items: center;

     text-decoration: none;

     font-size: 22px;

     margin-right: 18px;

     transition: .3s;

     position: relative;

     overflow: visible;

 }

 .footer-social a:hover {

     background: #89C2D9;

     color: #012A4A;

     transform: translateY(-5px);

 }

 .footer-social a[aria-label]::after {

     content: attr(aria-label);

     position: absolute;

     bottom: calc(100% + 12px);

     left: 50%;

     transform: translateX(-50%) translateY(10px);

     opacity: 0;

     pointer-events: none;

     background: #ffffff;

     color: #012A4A;

     padding: 8px 12px;

     border-radius: 999px;

     white-space: nowrap;

     font-size: 13px;

     font-weight: 600;

     transition: opacity 0.25s ease, transform 0.25s ease;

     z-index: 10;

     box-shadow: 0 10px 23px rgba(0, 0, 0, 0.12);

 }

 .footer-social a[aria-label]::before {

     content: "";

     position: absolute;

     bottom: 100%;

     left: 50%;

     transform: translateX(-50%);

     border-width: 6px 6px 0 6px;

     border-style: solid;

     border-color: #ffffff transparent transparent transparent;

     opacity: 0;

     transition: opacity 0.25s ease;

 }

 .footer-social a:hover[aria-label]::after {

     opacity: 1;

     transform: translateX(-50%) translateY(0);

 }

 .footer-social a:hover[aria-label]::before {

     opacity: 1;

 }

 .footer hr {

     margin: 40px 0 20px;

     border: none;

     height: 1px;

     background: #2C7DA0;

 }

 .footer-bottom {

     display: flex;

     justify-content: space-between;

     align-items: center;

     flex-wrap: wrap;

     gap: 20px;

 }

 .footer-bottom p {

     color: #c7d9e8;

 }

 .top-btn {

     text-decoration: none;

     background: #2C7DA0;

     color: white;

     padding: 10px 18px;

     border-radius: 30px;

     transition: .3s;

     font-weight: bold;

 }

 .top-btn:hover {

     background: white;

     color: #012A4A;

 }

 /* .button {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-color: rgb(20, 20, 20);
     border: none;
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
     cursor: pointer;
     transition: width 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease;
     overflow: hidden;
     position: sticky;
     right: 40px;
     bottom: 30px;
 } */

 .button {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-color: rgb(20, 20, 20);
     border: none;
     font-weight: 600;

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

     box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
     cursor: pointer;

     transition: width 0.3s ease,
         background-color 0.3s ease,
         border-radius 0.3s ease,
         opacity 0.3s ease,
         transform 0.3s ease;

     overflow: hidden;

     /* Important */
     position: fixed;
     right: 40px;
     bottom: 30px;

     z-index: 9999;
 }

 /* Back To Top above WhatsApp: right-bottom stack */
 #backToTopBtn {
     right: 40px;
     left: auto;
     transform: none;
     bottom: calc(30px + 56px + 12px);
     /* whatsapp bottom + whatsapp height + gap */
 }

 .button.hidden {
     opacity: 0;
     visibility: hidden;
     transform: translateY(50px);
     pointer-events: none;
 }

 /* WhatsApp floating button */
 .whatsapp-btn {
     position: fixed;
     right: 40px;
     left: auto;
     transform: none;
     bottom: 30px;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #25D366;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     text-decoration: none;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
     z-index: 9998;
     overflow: visible;
 }

 .whatsapp-btn i {
     font-size: 22px;
     position: relative;
     z-index: 2;
 }

 /* Pulse/ripple behind icon */
 .whatsapp-btn::after {
     content: "";
     position: absolute;
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: rgba(37, 211, 102, 0.18);
     z-index: 1;
     animation: whatsapp-pulse 2.4s infinite ease-out;
 }

 @keyframes whatsapp-pulse {
     0% {
         transform: scale(0.9);
         opacity: 0.6;
     }

     50% {
         transform: scale(1.6);
         opacity: 0.18;
     }

     100% {
         transform: scale(2.4);
         opacity: 0;
     }
 }

 /* Tooltip box on hover (desktop) */
 .whatsapp-tooltip {
     position: absolute;
     right: 70px;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(1, 42, 74, 0.95);
     color: #fff;
     padding: 8px 12px;
     border-radius: 8px;
     font-size: 13px;
     white-space: nowrap;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.18s ease, transform 0.18s ease;
     box-shadow: 0 6px 16px rgba(2, 20, 40, 0.2);
     z-index: 3;
 }

 .whatsapp-btn:hover .whatsapp-tooltip {
     opacity: 1;
     transform: translateY(-50%) translateX(-6px);
     pointer-events: auto;
 }

 /* Hide tooltip on small screens to avoid occlusion */
 @media (max-width: 600px) {
     .whatsapp-tooltip {
         display: none;
     }

     /* mobile: smaller right-bottom stacking */
     .whatsapp-btn {
         right: 20px;
         bottom: 18px;
         width: 48px;
         height: 48px;
     }

     .whatsapp-btn::after {
         width: 48px;
         height: 48px;
     }

     #backToTopBtn {
         right: 20px;
         left: auto;
         transform: none;
         bottom: calc(18px + 48px + 10px);
     }
 }


 .svgIcon {
     width: 12px;
     transition: transform 0.3s ease;
 }

 .svgIcon path {
     fill: white;
 }

 .button:hover {
     width: 140px;
     border-radius: 50px;
     background-color: rgb(181, 160, 255);
 }

 .button:hover .svgIcon {
     transform: translateY(-200%);
 }

 .button::before {
     position: absolute;
     bottom: -20px;
     content: "Back to Top";
     color: white;
     font-size: 0px;
     white-space: nowrap;
 }

 .button:hover::before {
     font-size: 13px;
     opacity: 1;
     bottom: 14px;
     transition: font-size 0.3s ease, opacity 0.3s ease, bottom 0.3s ease;
 }

 /* =====================================================
   RESPONSIVE DESIGN - Desktop | Laptop | Tablet | Mobile
===================================================== */

 /* Global */

 html {
     scroll-behavior: smooth;
 }

 html,
 body {
     overflow-x: hidden;
 }

 * {
     box-sizing: border-box;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 /* Responsive Typography */

 h1 {
     font-size: clamp(2rem, 5vw, 4rem);
 }

 h2 {
     font-size: clamp(1.5rem, 4vw, 3rem);
 }

 p {
     font-size: clamp(1rem, 2vw, 1.1rem);
     line-height: 1.8;
 }

 /* Container */

 .container {
     width: min(1200px, 90%);
     margin: auto;
 }

 /* Buttons */

 button,
 .btn,
 .btn-primary,
 .btn-secondary,
 .about-btn,
 .hire-btn {
     max-width: 100%;
 }

 /* Images */

 /* HOME IMAGE */

 .home {
     margin-top: 80px !important;
 }

 .home-image img {
     width: 380px;
     height: 380px;
     max-width: 100%;
     object-fit: cover;
     border-radius: 60% 40% 72% 28% / 59% 63% 37% 41%;
     border: 5px solid transparent;
     animation: shapeMorph 2s linear 1.2s infinite alternate, border 4s linear 0s infinite alternate;
     box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
     /* box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px; */
 }


 @keyframes border {
     0% {
         border-top: 5px solid #89C2D9;
         border-right: 5px solid #F4D35E;
         border-bottom: 5px solid #012A4A;
         border-left: 5px solid #D81159;
     }

     25% {
         border-top: 5px solid #F4D35E;
         border-right: 5px solid #012A4A;
         border-bottom: 5px solid #D81159;
         border-left: 5px solid #89C2D9;
     }

     50% {
         border-top: 5px solid #012A4A;
         border-right: 5px solid #D81159;
         border-bottom: 5px solid #89C2D9;
         border-left: 5px solid #F4D35E;
     }

     75% {
         border-top: 5px solid #D81159;
         border-right: 5px solid #89C2D9;
         border-bottom: 5px solid #F4D35E;
         border-left: 5px solid #012A4A;
     }

     100% {
         border-top: 5px solid #89C2D9;
         border-right: 5px solid #F4D35E;
         border-bottom: 5px solid #012A4A;
         border-left: 5px solid #D81159;
     }
 }

 /* ABOUT IMAGE */

 .about-image img {
     width: 360px;
     height: 450px;
     max-width: 100%;
     object-fit: cover;
     border-radius: 20px;
 }

 /* Projects */

 .projects-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 25px;
 }

 /* Hamburger */

 .menu-toggle {
     display: none;
     font-size: 30px;
     color: white;
     cursor: pointer;
 }

 /* ===========================
        Tablet
=========================== */

 @media (max-width:992px) {

     header {
         padding: 18px 5%;
     }

     .home-container,
     .about-container,
     .contact-container {
         flex-direction: column;
         text-align: center;
         margin-top: 50px;
         gap: 40px;
     }

     .home-buttons,
     .social-icons {
         justify-content: center;
     }

     .about-info {
         grid-template-columns: 1fr;
     }

     .home-content p {
         max-width: 100%;
     }

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

 }

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

 .mobile-menu-profile {
     display: none;
 }

 @media (max-width:768px) {

     header {
         flex-direction: row;
         justify-content: space-between;
         padding: 15px 20px;
     }

     .menu-toggle {
         display: block;
     }

     .navbar {
         display: none;
         position: absolute;
         top: 75px;
         left: 0;
         width: 100%;
         background: #012A4A;
         padding: 20px 0;
     }

     .navbar.active {
         display: block;
     }

     .navbar ul {
         display: flex;
         flex-direction: column;
         gap: 20px;
         align-items: center;
     }

     .hire-btn,
     .user-profile {
         display: none !important;
     }

     .mobile-menu-profile {
         display: flex;
         justify-content: center;
         width: 50%;
     }

     .mobile-menu-profile .user-profile {
         display: flex !important;
     }

     .home,
     .about,
     .skills,
     .projects,
     .contact,
     .footer {
         padding: 60px 20px;
     }

     .home-container {
         flex-direction: column-reverse;
     }

     .home-image img {
         max-width: 430px;
     }

     .about-image img {
         max-width: 280px;
     }

     .project-buttons {
         flex-direction: row;
     }

     .contact-container {
         flex-direction: column;
         padding: 10px;
     }

     .footer-container,
     .footer-bottom {
         flex-direction: column;
         text-align: center;
     }

     .footer-logo {
         display: flex;
         flex-direction: column;
     }

 }

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

 @media (max-width:480px) {

     .logo h1 {
         font-size: 22px;
     }

     .logo img {
         width: 42px;
         height: 42px;
     }

     .home-content h1 {
         font-size: 34px;
     }

     .home-content h2 {
         font-size: 22px;
     }

     .section-title {
         font-size: 30px;
     }

     .home-buttons {
         flex-direction: column;
     }

     .btn-primary,
     .btn-secondary,
     .about-btn {
         width: 100%;
         text-align: center;
     }

     .home-image img,
     .about-image img {
         max-width: 330px;
     }

     .contact-info h2 {
         font-size: 30px;
     }

     .project-card {
         width: 100%;
     }

 }

 /* End Responsive */
 /* End Responsive */

 .page-loader {
     position: fixed;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #012A4A;
     z-index: 9999;
     transition: opacity 2s ease-in-out, visibility 5s ease-in-out;
 }

 .page-loader.hidden {
     opacity: 0;
     visibility: hidden
 }

 .loader {
     width: 112px;
     height: 112px;
     position: relative;
 }

 .box1,
 .box2,
 .box3 {
     border: 16px solid #f5f5f5;
     box-sizing: border-box;
     position: absolute;
     display: block;
 }

 .box1 {
     width: 112px;
     height: 48px;
     margin-top: 64px;
     margin-left: 0px;
     animation: abox1 1s ease-in-out infinite;
 }

 .box2 {
     width: 48px;
     height: 48px;
     margin-top: 0px;
     margin-left: 0px;
     animation: abox2 1s ease-in-out infinite;
 }

 .box3 {
     width: 48px;
     height: 48px;
     margin-top: 0px;
     margin-left: 64px;
     animation: abox3 1s ease-in-out infinite;
 }

 @keyframes abox1 {

     0%,
     12.5%,
     25%,
     37.5%,
     50%,
     62.5% {
         width: 112px;
         height: 48px;
         margin-top: 64px;
         margin-left: 0px;
     }

     75%,
     87.5%,
     100% {
         width: 48px;
         height: 48px;
         margin-top: 0px;
         margin-left: 0px;
     }
 }

 @keyframes abox2 {

     0%,
     12.5%,
     25%,
     37.5% {
         width: 48px;
         height: 48px;
         margin-top: 0px;
         margin-left: 0px;
     }

     50% {
         width: 112px;
         height: 48px;
         margin-top: 0px;
         margin-left: 0px;
     }

     62.5%,
     75%,
     87.5%,
     100% {
         width: 48px;
         height: 48px;
         margin-top: 0px;
         margin-left: 64px;
     }
 }

 @keyframes abox3 {

     0%,
     12.5% {
         width: 48px;
         height: 48px;
         margin-top: 0px;
         margin-left: 64px;
     }

     25% {
         width: 48px;
         height: 112px;
         margin-top: 0px;
         margin-left: 64px;
     }

     37.5%,
     50%,
     62.5%,
     75%,
     87.5% {
         width: 48px;
         height: 48px;
         margin-top: 64px;
         margin-left: 64px;
     }

     100% {
         width: 112px;
         height: 48px;
         margin-top: 64px;
         margin-left: 0px;
     }
 }

 /* home-image-updates */

 @media (max-width: 767px) {
     .user-profile {
         display: none !important;
     }
 }

 @media (max-width: 767px) {
     .home-image img {
         animation-name: border;
         animation-duration: 3s;
         animation-timing-function: linear;
         animation-iteration-count: infinite;

         border-radius: 48% 52% 50% 50% / 42% 41% 59% 58%;
     }
 }



 /* From Uiverse.io by xXJollyHAKERXx */