/* ========== GOOGLE FONTS ========== */

/* Inter */

@import url('https://fonts.googleapis.com/css2?family=Grechen+Fuemen&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

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

:root {

   /* ========== Main colors (HSL - hue, saturation, and lightness) ========== */

   /* Blue - hsl(217, 85%, 74%); */
   /* Purple - hsl(245, 54%, 74%); */
   /* Teal - hsl(181, 47%, 49%); */
   /* Yellow - hsl(65, 60%, 70%); */
   /* Green - hsl(162, 60%, 65%); */
   /* Red - hsl(356, 67%, 70%); */
   /* Pink - hsl(330, 73%, 72%); */

   --hue: 217;
   --sat: 85%;
   --light: 74%;
   --color: rgb(91, 83, 80);

   --primary-color: hsl(var(--hue) var(--sat) var(--light));
   /* primary */
   --white-color: hsl(var(--hue) 45% 98%);
   /* white */
   --dark-color: hsl(var(--hue) 26% 12%);
   /* dark */

   /* ======= Changeable colors for dark/light themes ======= */

   --color-01: hsl(var(--hue) var(--sat) var(--light));
   /* primary to dark */
   --color-02: hsl(var(--hue) 45% 98%);
   /* white to dark */
   --color-03: hsl(var(--hue) 26% 12%);
   /* dark to white */
   --color-04: hsl(var(--hue) 0% 62%);
   /* light-graygray to dark-gray */
   --color-05: hsl(var(--hue) 26% 12%);
   /* dark to primary */

   --body-color: hsl(250 26% 12%);
   /* dark to white */
   --hover-color: hsl(var(--hue) var(--sat) calc(var(--light) - 7%));

   /* ======= Background colors ======= */
   --bottom-nav-bg: hsl(var(--hue) 32% 25% / .65);
   --card-bg: linear-gradient(120deg, hsl(var(--hue) 54% 74% / .15), hsl(var(--hue) 54% 74% / .05));
   --modal-backdrop-bg: hsl(var(--hue) 54% 74% / .1);
   --footer-bg: linear-gradient(360deg, hsl(var(--hue) 54% 74% / .15), hsl(var(--hue) 54% 74% / .1));

   --scrollbar-color: hsl(var(--hue) 25% 20%);
   --scrollbar-thumb: hsl(var(--hue) var(--sat) var(--light));
   --scrollbar-thumb-hover: hsl(var(--hue) var(--sat) calc(var(--light) - 7%));

   /* ======= Font and typography ======= */
   --body-font-family: 'Inter', sans-serif;

   /* ======= Font sizes ======= */
   --h1-font-size: 2.85rem;
   --h2-font-size: 2.25rem;
   --h3-font-size: 1.97rem;
   --h4-font-size: 1.43rem;
   --h5-font-size: 1.13rem;

   --xlarge-font-size: 1.48rem;
   --large-font-size: 1.23rem;
   --medium-font-size: 1.18rem;
   --base-font-size: 1.1rem;
   --small-font-size: 1.07rem;
   --tiny-font-size: .98rem;

   /* ======= Font weights ======= */
   --font-light: 300;
   --font-regular: 400;
   --font-medium: 500;
   --font-semi-bold: 600;
   --font-bold: 700;

   /* ======= Layering order(z-index) ======= */
   --z-minus: -1;
   --z-base: 0;
   --z-low: 1;
   --z-high: 10;
   --z-content: 100;
   --z-tooltip: 1000;
   --z-fixed: 1100;
   --z-overlay: 1110;
   --z-modal: 1990;
   --z-max: 99999;
}

/* ======= LIGHT THEME ======= */

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: var(--body-font-family);
}

ul,
li {
   list-style: none;
}

a {
   color: var(--color-04);
   text-decoration: none;
   cursor: pointer;
}

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

/* ========== BASE STYLES ========== */

html {
   scroll-behavior: smooth;
}

body {
   color: var(--color-04);
   background: var(--body-color);
   transition: .3s;

   &.light-theme {
      --color-01: hsl(var(--hue) 26% 12%);
      /* primary to dark */
      --color-02: hsl(var(--hue) 26% 12%);
      /* white to dark */
      --color-03: hsl(var(--hue) 45% 98%);
      /* dark to white */
      --color-04: hsl(var(--hue) 9% 46%);
      /* Light-graygray to dark-gray */
      --color-05: hsl(var(--hue) var(--sat) var(--light));
      /* dark to primary */

      --body-color: hsl(var(--hue) 45% 98%);
      /* dark to white */

      /* ======= Background colors ======= */
      --bottom-nav-bg: hsl(var(--hue) 32% 85% / .8);
      --card-bg: hsl(0 0% 100%);
      --modal-backdrop-bg: hsl(var(--hue) 50% 12% / .5);
      --footer-bg: linear-gradient(360deg, hsl(var(--hue) var(--sat) var(--light)), hsl(var(--hue) var(--sat) var(--light) / .75));

      --scrollbar-color: hsl(var(--hue) 9% 60%);
      --scrollbar-thumb: hsl(var(--hue) 9% 25%);
      --scrollbar-thumb-hover: hsl(var(--hue) 9% 17%);

      /* ======= Shadow and Component Additions ======= */
      .bottom-nav .menu-hide-btn {
         box-shadow: 0 2px 4px hsl(0, 0%, 1%, .25);
      }

      .pro-card,
      .skill-card,
      .service-card,
      .portfolio-card,
      .contact-form-body {
         box-shadow: 0 2px 8px hsl(0, 0%, 1%, .05);
      }

      .contact-icon,
      .contact-social-links li {
         box-shadow: 0 2px 4px hsl(0, 0%, 1%, .1);
      }

      .sue-footer .copy-right {
         color: hsl(var(--hue) 26% 30%);
      }

      .sue-footer .copy-right a {
         color: hsl(var(--hue) 26% 30%);
      }

      .sue-footer .copy-right a:hover {
         color: hsl(var(--hue) 0% 0%);
      }

      .to-top-btn {
         background: hsl(var(--hue) 26% 12% / .2);
      }
   }
}

/* ========== REUSABLE STYLES ========== */

.section {
   position: relative;
   overflow: hidden;
   padding-bottom: 3rem;
}

.contain {
   max-width: 1170px;
   margin-inline: auto;
   padding-inline: 2rem;
}

.wrapper {
   position: relative;
   width: 100%;
   height: 100%;
}

.sue-sub-container {
   padding-block: 5em 7em;
}

.section-title {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   margin-bottom: 95px;

   h3 {
      color: var(--color-01);
      font-size: var(--h3-font-size);
      font-weight: var(--font-bold);
      margin-bottom: 10px;
   }

   p {
      color: var(--color-04);
      font-size: var(--base-font-size);
      font-weight: var(--font-regular);
   }
}

.section-content {
   display: flex;
   justify-content: center;
   align-items: center;
   column-gap: 75px;
}

.sue-container {
   max-width: 1170px;
   margin-inline: auto;
}

/* ========== COMPONENTS ========== */

/* ========== Page scroll bar ========== */

::-webkit-scrollbar {
   width: 10px;
   background: var(--scrollbar-color);
}

::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 25px;
}

::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-thumb-hover);
}

/* ========== Customized cursor ========== */

/* ============ Customized cursor ============ */
.cursor {
   z-index: var(--z-max);
   position: fixed;
   top: 0%;
   left: 0%;
   pointer-events: none;
}

.cursor-dot {
   position: absolute;
   background: var(--primary-color);
   /* Changed from 'red' based on later screens */
   width: 5px;
   height: 5px;
   transform: translate(-50%, -50%);
   border-radius: 50%;
   transition-property: top, left, width, height;
   transition-duration: .03s, .03s, .3s, .3s;
}

.cursor-dot.large {
   background: hsl(var(--hue) var(--sat) var(--light) / .35);
   width: 75px;
   height: 75px;
   transition-property: top, left, width, height;
   transition-duration: .03s, .03s, .3s, .3s;
}

.cursor-circle {
   position: absolute;
   border: 2px solid var(--primary-color);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   opacity: .5;
   transform: translate(-50%, -50%);
   transition-property: top, left;
   transition-duration: .09s, .09s;
}

/* ========== To top button with scroll indicator bar ========== */
.to-top-btn {
   z-index: var(--z-fixed);
   position: fixed;
   background: hsl(var(--hue) 54% 74% / .2);
   height: 100px;
   width: 2px;
   bottom: 25px;
   right: -30px;
   cursor: pointer;
   transition: all .3s ease;

   &.active {
      right: 30px;
   }
}

.to-top-btn a {
   color: var(--color-01);
   transition: .3s;
}

.to-top-btn a:hover {
   color: var(--hover-color);
}

.to-top-btn a span {
   position: absolute;
   left: 0;
   bottom: 155px;
   transform: rotateZ(90deg);
   transform-origin: left;
   font-size: .85rem;
   text-transform: uppercase;
   white-space: nowrap;
}

.to-top-btn .scroll-indicator-bar {
   position: absolute;
   background: var(--color-01);
   width: 2px;
   height: auto;
   opacity: .5;
}

/* ========== Buttons ========== */

.sue-main-btn {
   width: fit-content;
   padding: 14px 30px;
   border-radius: 35px;
   cursor: pointer;
   transition: .3s;

   a {
      color: var(--color-01);
      font-size: var(--small-font-size);
      font-weight: 500;
      transition: .3s;
   }

   &:hover {
      color: var(--white-color);
      background: var(--hover-color);
      border: 2px solid var(--hover-color);

      a {
         color: var(--white-color);
      }
   }
}

.fill-btn {
   background: var(--primary-color);
   border: 2px solid var(--primary-color);

   a {
      color: var(--dark-color);
   }
}

.border-btn {
   border: 2px solid var(--color-01);
}

.sue-logo {

   a {
      color: var(--color-01);
      font-size: 2.6rem;
      font-weight: var(--font-semi-bold);
      letter-spacing: -3px;
      transition: .3s;

      &:hover {
         color: var(--hover-color);
      }
   }
}

.header-btns {
   display: flex;
   justify-content: center;
   align-items: center;
   column-gap: 25px;
}

.lets-talk-icon {
   color: var(--color-01);
   font-size: 1.8rem;
   cursor: pointer;
   transition: .3s;

   &:hover {
      color: var(--hover-color);
   }
}

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

.sue-header {
   z-index: var(--z-fixed);
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
   padding: 30px 0;
   transition: .3s ease;

   .sue-container {

      .inner {
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;

         .sue-logo {

            a {
               color: var(--color-01);
               font-size: 2.6rem;
               font-weight: var(--font-semi-bold);
               letter-spacing: -3px;
               transition: .3s;

               &:hover {
                  color: var(--hover-color);
               }
            }
         }

         .header-btns {
            display: flex;
            align-items: center;
            column-gap: 25px;

            .lets-talk-icon {
               color: var(--color-01);
               font-size: 1.8rem;
               cursor: pointer;
               transition: .3s;

               &:hover {
                  color: var(--hover-color);
               }
            }
         }
      }
   }

   &.shrink {
      background: var(--body-color);
      padding: 12px 0;
   }
}

/* ========== Dark/Light theme buttons ========== */

.theme-btn {
   position: relative;
   display: flex;
   justify-content: end;
   align-items: center;
   width: 27px;
   cursor: pointer;

   i {
      position: absolute;
      color: var(--color-01);
      font-size: 1.7rem;
      cursor: pointer;
      transition: .3s;

      &.moon-icon {
         opacity: 1;
         transition: .3s;
      }

      &.sun-icon {
         opacity: 0;
         transition: .3s;
      }
   }

   &:hover {

      i {
         color: var(--hover-color);
         rotate: -15deg;
      }
   }

   &.active-sun-icon {

      .sun-icon {
         opacity: 1;
         transition: .3s;
      }

      .moon-icon {
         opacity: 0;
         transition: .3s;
      }
   }
}

/* ========== Bottom navigation menu ========== */

.bottom-nav-container {
   position: relative;

   .bottom-nav {
      z-index: var(--z-fixed);
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: -75px;
      opacity: 0;
      transition: .5s ease, .3s ease;
      transition-property: bottom, opacity;

      .bottom-nav-inner {
         position: relative;

         .menu-hide-btn {
            z-index: var(--z-fixed);
            position: absolute;
            top: -5px;
            right: 0;
            color: var(--dark-color);
            font-size: 1.52rem;
            background: var(--primary-color);
            padding: 2px;
            border-radius: 50%;
            cursor: pointer;
            transition: .3s ease;
            pointer-events: none;
            opacity: 0;

            &:hover {
               color: var(--white-color);
               background: var(--hover-color);
            }

            &.active {
               pointer-events: all;
               opacity: 1;
            }
         }

         .menu {
            background: var(--bottom-nav-bg);
            backdrop-filter: blur(10px);
            padding: 16px 35px;
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 25px;
            border-bottom: 1px solid hsl(var(--hue) 45% 98% / .1);
            border-left: 1px solid hsl(var(--hue) 45% 98% / .1);
            border-radius: 50px;
            /*display: none;*/

            li {

               a {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;

                  i {
                     color: var(--color-02);
                     font-size: 1.4rem;
                     padding: 10px;
                     border-radius: 50%;
                     transition: .3s;
                  }

                  span {
                     z-index: var(--z-tooltip);
                     position: absolute;
                     color: var(--dark-color);
                     background: var(--primary-color);
                     font-size: var(--tiny-font-size);
                     font-weight: var(--font-medium);
                     padding: 3px 10px;
                     transform: translateY(-53px);
                     border-radius: 5px;
                     pointer-events: none;
                     opacity: 0;

                     &::before {
                        content: "";
                        z-index: var(--z-minus);
                        position: absolute;
                        background: var(--primary-color);
                        width: 10px;
                        height: 10px;
                        left: 50%;
                        bottom: -8px;
                        transform: rotate(45deg) translateX(-50%);
                     }
                  }

                  &.current {

                     i {
                        color: var(--dark-color);
                        background: var(--primary-color);
                     }
                  }
               }

               &:hover {

                  a {

                     i {
                        color: var(--white-color);
                        background: var(--hover-color);
                     }

                     span {
                        opacity: 1;
                     }
                  }
               }
            }
         }
      }

      &.active {
         bottom: 50px;
         opacity: 1;
         transition: .5s ease, .3s ease;
         transition-property: bottom, opacity;
      }
   }

   .menu-show-btn {
      z-index: var(--z-fixed);
      position: fixed;
      background: var(--bottom-nav-bg);
      backdrop-filter: blur(10px);
      width: 85px;
      height: 50px;
      border-bottom: 1px solid hsl(var(--hue) 45% 98% / .1);
      border-left: 1px solid hsl(var(--hue) 45% 98% / .1);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      row-gap: 5px;
      translate: -50% 0;
      left: 50%;
      /*bottom: 50px;*/
      bottom: -75px;
      opacity: 0;
      border-radius: 5px;
      cursor: pointer;
      overflow: hidden;
      animation: wiggle 2s linear infinite;
      animation-delay: 1s;
      transition: .5s ease, .3s ease;
      transition-property: bottom, opacity;

      .bar-01,
      .bar-02 {
         background: var(--primary-color);
         width: 40px;
         height: 4px;
         transition: .15s;

         &:hover {
            background: var(--hover-color);
         }
      }

      &.active {
         transition: .5s ease, .3s ease;
         transition-property: bottom, opacity;
         bottom: 50px;
         opacity: 1;
      }
   }
}

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

.home {

   .home-container {
      height: 100vh;

      .sue-wrapper {
         display: flex;
         align-items: center;
         justify-content: center;
         height: 100%;
         width: 100%;
         position: relative;

         .avatar-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            column-gap: 25px;
            width: 100%;

            .hire-btn-01 {
               display: none;
            }

            .avatar-img {
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: space-evenly;
               margin-right: .6rem;
               overflow: hidden;

               .circle {
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  border-radius: 50%;
                  flex-direction: column;
                  width: 380px;
                  aspect-ratio: 1/1;

                  h2 {
                     position: relative;
                     z-index: 10;
                     display: flex;
                     align-items: center;
                     justify-content: center;

                     img {
                        width: 81.5%;
                        border-radius: 50%;
                     }
                  }
               }

               .circle::before {
                  content: '';
                  position: absolute;
                  inset: 1.15%;
                  border-radius: 50%;
                  background: var(--body-color);
                  opacity: .8;
               }

               .circle::after {
                  content: '';
                  position: absolute;
                  background: #c8c8c8;
                  border-radius: 50%;
                  width: 85%;
                  aspect-ratio: 1/1;
               }
            }

            .skill:nth-child(2) {

               .circle::before {
                  content: '';
                  position: absolute;
                  inset: 5px;
                  border-radius: 50%;
                  background: var(--body-color);
                  /* box-shadow: 0px -2px 5px 1px rgba(255, 255, 255, .3),
                       0 2px 5px 1px rgba(0, 0, 0, 0.01),
                       inset 0px 2px 5px 2px rgba(0, 0, 0, 0.05); */
               }

               .circle::after {
                  box-shadow:
                     /*0 0 1em 1.2em rgb(125, 220, 254, .18),
                       0 1rem 1em .1em rgb(0, 0, 0, .25)*/
                     inset 0 3px .01em rgba(255, 255, 255, .8),
                     inset 0 4px .03em rgba(0, 0, 0, 0.02),
                     inset 0 -5px 0px .01em var(--primary-color),
                     inset 0 -4px 4px .12em rgba(0, 0, 0, .04),
                     inset 0 -5px 0px .1em rgba(255, 255, 255, .02);
               }
            }

            .avatar-info {
               position: relative;

               .text-content {
                  display: flex;
                  flex-direction: column;
                  row-gap: 10px;

                  .hello-text {
                     font-size: var(--base-font-size);
                     font-weight: var(--font-semi-bold);
                  }

                  .my-name {
                     color: var(--color-02);
                     font-size: var(--h2-font-size);
                     font-weight: var(--font-bold);
                     text-wrap: wrap;
                  }

                  .what-i-do {
                     font-size: var(--base-font-size);
                     font-weight: var(--font-semi-bold);
                     margin-bottom: 35px;

                     span {
                        color: var(--primary-color);
                        font-weight: 600;
                     }
                  }
               }
            }

            .home-scroll-btn {
               position: absolute;
               right: -5px;
               color: var(--color-01);
               display: grid;
               justify-items: center;
               row-gap: 3px;
               animation: up-down 1.5s linear infinite;
               animation-delay: 1.85s;

               div {
                  font-size: var(--tiny-font-size);
                  font-weight: var(--font-regular);
                  writing-mode: vertical-lr;
                  text-orientation: mixed;
                  white-space: nowrap;
                  transform: rotate(180deg);
                  margin-top: 7px;
               }

               i {
                  font-size: 2rem;
               }

               &:hover {
                  color: var(--hover-color);
               }
            }
         }

         .home-social {
            position: absolute;
            left: 0;

            span {
               position: absolute;
               left: 10px;
               color: var(--color-01);
               font-size: var(--tiny-font-size);
               white-space: nowrap;
               transform: rotateZ(-90deg);
               transform-origin: left;
            }

            .social-line {
               background: var(--color-01);
               width: 1px;
               height: 100px;
               margin-top: 37px;
               margin-bottom: 25px;
               margin-left: 10px;
            }

            .social-icons {
               display: flex;
               flex-direction: column;
               gap: 25px;

               li {

                  a {
                     color: var(--color-01);
                     font-size: var(--xlarge-font-size);
                     transition: .3s;

                     &:hover {
                        color: var(--hover-color);
                     }
                  }
               }
            }
         }
      }
   }
}

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

.about {

   .sue-container {

      .sue-wrapper {

         .section-content {

            .about-img {
               position: relative;
               width: 35%;
               display: flex;
               justify-content: center;
               align-items: center;
               pointer-events: none;

               img {
                  width: 100%;
                  border-radius: 15px;
               }
            }

            .about-details {
               width: 65%;
               display: flex;
               justify-content: center;
               flex-direction: column;

               .about-info {

                  .iam {
                     color: var(--color-02);
                     font-size: var(--h4-font-size);
                     font-weight: var(--font-semi-bold);
                     margin-bottom: 30px;
                  }

                  .about-description {
                     font-size: var(--base-font-size);
                     font-weight: var(--font-regular);
                     line-height: 25px;
                  }
               }

               .pro-list {
                  position: relative;
                  max-width: 100%;
                  display: grid;
                  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
                  column-gap: 10px;
                  row-gap: 12px;
                  margin: 38px 0;

                  .pro-card {
                     background: var(--card-bg);
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     column-gap: 10px;
                     padding: 35px 25px;
                     text-align: left;
                     border-radius: 5px;

                     span {
                        color: var(--primary-color);
                        font-size: 2.75rem;
                        font-weight: var(--font-bold);
                     }

                     p {
                        color: var(--color-02);
                        font-size: var(--tiny-font-size);
                        font-weight: var(--font-regular);
                        line-height: 20px;
                        max-width: 100px;
                     }
                  }
               }

               .about-buttons {
                  display: flex;
                  flex-wrap: wrap;
                  column-gap: 20px;
                  row-gap: 25px;
               }
            }
         }
      }
   }
}

/* ========== RESUME ========== */

.resume {

   .sue-container {

      .sue-wrapper {

         .resume-tabs {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            column-gap: 30px;
            row-gap: 30px;
            margin-bottom: 100px;

            .tab-btn {
               display: flex;
               justify-content: center;
               align-items: center;
               column-gap: 5px;
               color: var(--color-01);
               font-size: var(--medium-font-size);
               font-weight: var(--font-medium);
               padding: 12px 0;
               border-radius: 25px;
               cursor: pointer;
               transition: .3s;

               i {
                  font-size: var(--xlarge-font-size);
                  margin-right: 3px;
               }

               &.active {
                  color: var(--dark-color);
                  background: var(--primary-color);
                  padding: 12px 15px;

                  &:hover {
                     color: var(--white-color);
                     background: var(--hover-color);
                  }
               }

               &:hover {
                  color: var(--hover-color);
                  border: none;
               }
            }
         }

         .section-content {

            .resume-tab-content {
               position: relative;
               width: 100%;
               justify-content: center;
               margin-bottom: 25px;
               display: none;
               opacity: 0;
               transition: opacity .3s ease;

               .resume-items {
                  position: absolute;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  row-gap: 125px;

                  .item {
                     position: relative;
                     display: flex;
                     justify-content: center;
                     align-items: center;

                     .info {
                        position: absolute;
                        width: 250px;
                        display: flex;
                        align-items: center;
                        column-gap: 25px;

                        i {
                           color: var(--primary-color);
                           font-size: 2.15rem;
                        }

                        h5 {
                           color: var(--color-02);
                           font-size: var(--h5-font-size);
                           font-weight: var(--font-semi-bold);
                           white-space: break-spaces;
                           margin-bottom: 10px;
                        }

                        p {
                           color: var(--color-04);
                           font-size: var(--small-font-size);
                           white-space: wrap;
                           margin-bottom: 18px;
                        }

                        span {
                           position: relative;
                           background: var(--primary-color);
                           color: var(--dark-color);
                           font-size: var(--font-medium);
                           padding: 3px 12px;
                           border-radius: 3px;
                           text-wrap: wrap;
                        }
                     }

                     &.item-left {

                        .info {
                           right: 35px;
                        }
                     }

                     &.item-right {

                        .info {
                           left: 50px;
                        }
                     }

                     &::before {
                        content: "";
                        position: absolute;
                        background: var(--primary-color);
                        width: 15px;
                        height: 15px;
                        border-radius: 50%;
                     }
                  }
               }

               &.education {

                  .resume-line {
                     background: var(--primary-color);
                     width: 2px;
                     height: 380px;
                  }
               }

               &.experience {

                  .resume-line {
                     background: var(--primary-color);
                     width: 2px;
                     height: 250px;
                  }
               }

               &.personal-skills {

                  .skill-container {
                     max-width: 100%;
                     display: grid;
                     place-items: center;
                     grid-template-columns: repeat(2, 1fr);
                     column-gap: 50px;
                     row-gap: 50px;

                     .skill-card {
                        position: relative;
                        background: var(--card-bg);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex-direction: column;
                        padding: 50px 25px;
                        border-bottom: 5px solid var(--primary-color);
                        border-radius: 10px;
                        height: 400px;

                        .skill-title {
                           display: flex;
                           align-items: center;
                           column-gap: 10px;
                           margin-bottom: 50px;

                           i {
                              font-size: 2.15rem;
                              color: var(--primary-color);
                           }

                           span {
                              color: var(--color-02);
                              font-size: var(--medium-font-size);
                              font-weight: var(--font-semi-bold);
                           }
                        }

                        .skill-categories {
                           display: grid;
                           place-items: center;
                           grid-template-columns: repeat(2, 1fr);
                           column-gap: 65px;
                           row-gap: 35px;
                           padding: 0 50px;

                           .skill {
                              display: flex;
                              column-gap: 15px;
                              justify-content: start;
                              width: 120px;

                              i {
                                 color: var(--primary-color);
                                 font-size: 1.35rem;
                              }

                              .skill-info {
                                 display: flex;
                                 flex-direction: column;
                                 row-gap: 5px;

                                 h5 {
                                    color: var(--color-02);
                                    font-size: var(--h5-font-size);
                                    font-weight: var(--font-semi-bold);
                                 }

                                 span {
                                    color: var(--color-04);
                                    font-size: var(--tiny-font-size);
                                 }
                              }
                           }
                        }
                     }
                  }
               }

               &.active {
                  display: flex;
                  opacity: 1;
               }
            }
         }
      }
   }
}

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

.services {

   .sue-container {

      .sue-wrapper {

         .section-content {

            .service-container {
               display: grid;
               place-items: center;
               grid-template-columns: repeat(3, 1fr);
               column-gap: 35px;
               row-gap: 38px;

               .card-with-modal {

                  .service-card {
                     position: relative;
                     background: var(--card-bg);
                     width: 275px;
                     height: 285px;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     flex-direction: column;
                     padding: 50px;
                     border-bottom: 5px solid var(--primary-color);
                     border-radius: 10px;

                     .service-info {

                        .service-icon {
                           color: var(--primary-color);
                           font-size: 4.15rem;
                        }

                        h4 {
                           color: var(--color-02);
                           font-size: var(--h4-font-size);
                           font-weight: var(--font-semi-bold);
                           white-space: nowrap;
                           max-width: 150px;
                           margin-top: 20px;
                           margin-bottom: 25px;
                        }

                        .service-see-more {
                           font-size: var(--base-font-size);
                           color: var(--color-01);
                           cursor: pointer;
                           transition: .3s;

                           i {
                              font-size: 1.15rem;
                              transition: margin-left .3s;
                           }

                           &:hover {
                              color: var(--hover-color);

                              i {
                                 margin-left: 3px;
                              }
                           }
                        }
                     }
                  }

                  .service-modal-backdrop {
                     z-index: var(--z-overlay);
                     position: fixed;
                     background: var(--modal-backdrop-bg);
                     backdrop-filter: blur(10px);
                     top: 0;
                     left: 0;
                     width: 100%;
                     height: 100vh;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     overflow-y: auto;
                     /* Visibility toggle - adjusted in screenshots */
                     display: none;
                     opacity: 0;
                     transition: opacity .3s ease;

                     .service-modal {
                        position: relative;
                        background: var(--color-03);
                        width: 825px;
                        height: fit-content;
                        margin: 75px 25px;
                        padding: 50px 25px 50px 45px;
                        border-radius: 15px;
                        border-bottom: 5px solid var(--primary-color);
                        overflow: hidden;
                        /* Animation initial state */
                        transform: scale(0);
                        opacity: 0;
                        transition: opacity .5s ease, transform .5s;

                        .modal-content {
                           display: flex;
                           flex-direction: column;
                           row-gap: 25px;
                           max-height: 500px;
                           margin-top: 50px;
                           padding: 10px;
                           overflow-y: auto;

                           h4 {
                              color: var(--color-02);
                              font-size: var(--h4-font-size);
                              font-weight: var(--font-semi-bold);
                              margin-bottom: 15px;
                           }

                           .my-services {

                              li {
                                 display: flex;
                                 margin-bottom: 25px;

                                 i {
                                    color: var(--primary-color);
                                    font-size: 1.4rem;
                                    margin-right: 10px;
                                 }

                                 p {
                                    color: var(--color-02);
                                    font-size: var(--base-font-size);
                                    line-height: 22px;
                                 }
                              }
                           }

                           .modal-title {
                              max-width: 600px;
                              text-align: center;
                              margin-left: auto;
                              margin-right: auto;

                              h3 {
                                 color: var(--color-01);
                                 font-size: var(--h3-font-size);
                                 font-weight: 700;
                              }

                              p {
                                 color: var(--color-04);
                                 font-size: var(--small-font-size);
                                 font-weight: var(--font-regular);
                                 margin-top: 30px;
                                 margin-bottom: 20px;
                              }
                           }
                        }

                        .modal-close-btn {
                           position: absolute;
                           color: var(--color-01);
                           font-size: 1.35rem;
                           top: 0;
                           right: 0;
                           margin: 15px;
                           cursor: pointer;
                           transition: .3s;

                           &:hover {
                              color: var(--hover-color);
                           }
                        }

                        &.active {
                           transform: scale(1);
                           opacity: 1;
                           transition: opacity .5s ease, transform .5s;
                        }
                     }

                     &.active {
                        opacity: 1;
                        transition: opacity .5s ease;
                     }
                  }
               }
            }
         }
      }
   }
}

.modal-content::-webkit-scrollbar {
   background: hsl(var(--hue) 25% 20%);
   width: 5px;
   border-radius: 5px;
}

.modal-content::-webkit-scrollbar-thumb {
   background: var(--primary-color);
   border-radius: 5px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
   background: var(--hover-color);
}

/* ========== PORTFOLIO ========== */

.portfolio {

   .sue-container {

      .sue-wrapper {

         .section-title {

            h3 {
               color: var(--color-01);
               font-size: var(--h3-font-size);
            }

            p {
               color: var(--color-04);
            }
         }

         .tabs-container {
            position: relative;
            display: flex;
            align-items: center;
            max-width: 600px;
            width: 100%;
            margin-bottom: 85px;
            margin-inline: auto;

            .tab-nav-btn {
               width: 40px;
               height: 40px;
               border-radius: 50%;
               background: var(--card-bg);
               border: 1px solid var(--color-04);
               color: var(--color-01);
               cursor: pointer;
               display: flex;
               align-items: center;
               justify-content: center;
               z-index: var(--z-low);
               transition: 0.3s;
               flex-shrink: 0;

               &:hover {
                  background: var(--primary-color);
                  color: var(--dark-color);
               }

               &.left {
                  margin-right: 15px;
               }

               &.right {
                  margin-left: 15px;
               }
            }

            .portfolio-tabs-wrapper {
               overflow-x: auto;
               scroll-behavior: smooth;
               width: 100%;
               -ms-overflow-style: none;
               scrollbar-width: none;

               &::-webkit-scrollbar {
                  display: none;
               }

               .portfolio-tabs {
                  display: flex;
                  align-items: center;
                  flex-wrap: nowrap;
                  gap: 7px;
                  padding: 5px 0;

                  .tab-btn {
                     flex: 0 0 auto;
                     color: var(--color-01);
                     font-size: var(--medium-font-size);
                     font-weight: var(--font-medium);
                     border-radius: 25px;
                     cursor: pointer;
                     transition: 0.3s;
                     text-decoration: none;
                     padding: 12px 10px;

                     &.active {
                        color: var(--dark-color);
                        background: var(--primary-color);
                        padding: 12px 25px;
                     }
                  }
               }
            }
         }

         .section-content {
            .portfolio-container {
               width: 100%;
               display: grid;
               grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
               gap: auto;
               row-gap: 30px;
               column-gap: 20px;
               place-items: center;

               .card-with-modal {

                  .portfolio-card {
                     position: relative;
                     background: var(--card-bg);
                     width: 100%;
                     max-width: 370px;
                     border-radius: 10px;
                     cursor: pointer;
                     overflow: hidden;
                     transition: 0.3s;

                     .card-img {
                        position: relative;

                        .badge-container {
                           position: absolute;
                           width: 100%;
                           height: 55px;
                           background: transparent;
                           backdrop-filter: blur(2rem);
                           top: 0px;
                           right: 0px;
                           display: flex;
                           align-items: center;
                           justify-content: end;
                           padding-right: 1em;

                           .project-badge {
                              padding: 5px 12px;
                              border-radius: 4px;
                              font-size: 15px;
                              font-weight: bold;
                              text-transform: uppercase;
                              z-index: 10;

                              &.free {
                                 background: #27ae60;
                                 color: white;
                              }

                              &.premium {
                                 background: var(--primary-color);
                                 color: var(--dark-color);
                                 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
                              }
                           }

                        }

                        img {
                           width: 100%;
                           display: block;
                           height: 225px;
                           object-fit: cover;
                           object-position: top;
                        }
                     }

                     .card-info {
                        position: relative;
                        padding: 20px;

                        span {
                           color: var(--color-04);
                           font-size: var(--tiny-font-size);
                           text-transform: uppercase;
                        }

                        h4 {
                           color: var(--color-02);
                           font-size: var(--medium-font-size);
                           margin-top: 5px;
                        }

                        i {
                           position: absolute;
                           right: 20px;
                           bottom: 20px;
                           color: var(--primary-color);
                           font-size: 1.7rem;
                           transform: scale(1);
                           transition: 0.3s;
                        }
                     }

                     &:hover {
                        .card-info i {
                           transform: scale(1.2);
                        }
                     }
                  }

                  .portfolio-modal-backdrop {
                     position: fixed;
                     display: flex;
                     top: 0;
                     left: 0;
                     width: 100%;
                     height: 100%;
                     background: var(--modal-backdrop-bg);
                     backdrop-filter: blur(10px);
                     z-index: 10000;
                     justify-content: center;
                     align-items: center;
                     opacity: 0;
                     transform: scale(0);
                     border-radius: 50%;
                     transition: transform 0.7s, opacity 0.3s, border-radius 0.7s;

                     &.active {
                        transform: scale(1);
                        opacity: 1;
                        border-radius: 0px;

                        .portfolio-modal {
                           transform: scale(1);
                           transition: transform 0.3s;
                           transition-delay: 0.6s;
                        }
                     }

                     .portfolio-modal {
                        position: relative;
                        background: var(--color-03);
                        max-width: 700px;
                        max-height: 90vh;
                        width: 90%;
                        margin: 20px auto;
                        padding: 3rem;
                        border-radius: 15px;
                        z-index: 1001;
                        transform: scale(0);
                        overflow-y: auto;
                        border: 1px solid rgba(255, 255, 255, 0.05);

                        &::-webkit-scrollbar {
                           width: 5px;
                        }

                        &::-webkit-scrollbar-thumb {
                           background: var(--primary-color);
                           border-radius: 10px;
                        }

                        .modal-close-btn {
                           position: absolute;
                           top: 15px;
                           right: 15px;
                           font-size: 1.5rem;
                           cursor: pointer;
                           color: var(--color-01);
                           transition: 0.3s;
                           z-index: 10;

                           &:hover {
                              color: var(--primary-color);
                              transform: rotate(90deg);
                           }
                        }

                        .modal-content {
                           display: flex;
                           flex-direction: column;
                           gap: 25px;

                           .modal-img {
                              width: 100%;
                              border-radius: 10px;
                              overflow: hidden;
                              border: 1px solid rgba(255, 255, 255, 0.1);

                              img {
                                 width: 100%;
                                 display: block;
                                 object-fit: cover;
                              }
                           }

                           .modal-body {
                              h4.modal-title {
                                 color: var(--color-02);
                                 font-size: 1.8rem;
                                 margin-bottom: 10px;
                              }

                              .project-tags {
                                 display: flex;
                                 flex-wrap: wrap;
                                 gap: 10px;
                                 margin-bottom: 20px;

                                 span {
                                    font-size: 11px;
                                    background: rgba(255, 255, 255, 0.05);
                                    color: var(--primary-color);
                                    padding: 5px 15px;
                                    border-radius: 4px;
                                    text-transform: uppercase;
                                    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
                                 }
                              }

                              p.description {
                                 color: var(--color-04);
                                 line-height: 1.6;
                                 margin-bottom: 20px;
                              }

                              .project-features {
                                 h5 {
                                    color: var(--color-02);
                                    margin-bottom: 12px;
                                    font-size: 1.1rem;
                                 }

                                 ul {
                                    list-style: none;
                                    padding: 0;

                                    li {
                                       color: var(--color-04);
                                       font-size: var(--small-font-size);
                                       margin-bottom: 10px;
                                       display: flex;
                                       align-items: flex-start;
                                       gap: 10px;
                                       flex-wrap: wrap;

                                       &::before {
                                          content: "→";
                                          color: var(--primary-color);
                                          font-weight: bold;
                                       }

                                       strong {
                                          display: inline-block;
                                          min-width: 120px;
                                          color: var(--color-01);
                                       }
                                    }
                                 }
                              }
                           }

                           .modal-actions {
                              display: grid;
                              grid-template-columns: 1fr 1fr;
                              gap: 15px;
                              padding-top: 25px;
                              border-top: 1px solid rgba(255, 255, 255, 0.1);

                              .action-btn {
                                 display: flex;
                                 align-items: center;
                                 justify-content: center;
                                 gap: 10px;
                                 padding: 12px;
                                 border-radius: 8px;
                                 text-decoration: none;
                                 font-size: var(--small-font-size);
                                 font-weight: var(--font-medium);
                                 transition: 0.3s;

                                 &.github {
                                    border: 1px solid var(--color-04);
                                    color: var(--color-01);

                                    &:hover {
                                       background: rgba(255, 255, 255, 0.05);
                                       border-color: var(--color-01);
                                    }
                                 }

                                 &.purchase {
                                    background: #f1c40f;
                                    color: #000;

                                    &:hover {
                                       background: #d4ac0d;
                                       transform: translateY(-2px);
                                    }
                                 }

                                 &.live {
                                    background: var(--primary-color);
                                    color: var(--dark-color);

                                    &:hover {
                                       transform: translateY(-3px);
                                       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
                                    }
                                 }
                              }
                           }
                        }
                     }
                  }

                  @media screen and (max-width: 480px) {
                     .portfolio-modal-backdrop .portfolio-modal .modal-content .modal-actions {
                        grid-template-columns: 1fr;
                     }
                  }
               }

               .coming-soon-full {
                  display: none;
                  grid-column: 1 / -1;
                  width: 100%;
                  min-height: 400px;
                  background: var(--card-bg);
                  backdrop-filter: blur(10px);
                  border: 1px dashed var(--color-04);
                  border-radius: 15px;
                  position: relative;
                  overflow: hidden;

                  &.active {
                     display: flex;
                     align-items: center;
                     justify-content: center;
                  }

                  .notice-content {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     text-align: center;
                     padding: 40px;
                     z-index: var(--z-low);

                     .icon-box {
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 25px;

                        i {
                           font-size: 3.5rem;
                           color: var(--primary-color);
                           position: relative;
                           z-index: var(--z-low);
                           padding: 7px;
                        }

                        .pulse-ring {
                           position: absolute;
                           width: 75px;
                           height: 75px;
                           border: 2px solid var(--primary-color);
                           border-radius: 50%;
                        }
                     }

                     h3 {
                        font-size: var(--h3-font-size);
                        color: var(--color-02);
                        margin-bottom: 10px;
                        font-weight: var(--font-semi-bold);
                     }

                     p {
                        font-size: var(--base-font-size);
                        color: var(--color-04);
                        max-width: 450px;
                        line-height: 1.6;
                     }

                     .status-badge {
                        margin-top: 20px;
                        padding: 5px 15px;
                        border: 1px solid var(--primary-color);
                        color: var(--primary-color);
                        font-size: var(--tiny-font-size);
                        font-weight: var(--font-medium);
                        text-transform: uppercase;
                        letter-spacing: 2px;
                        border-radius: 4px;
                     }

                     .loading-dots {
                        display: flex;
                        gap: 6px;
                        margin-top: 45px;

                        span {
                           width: 8px;
                           height: 8px;
                           background: var(--primary-color);
                           border-radius: 50%;
                           display: inline-block;
                           animation: dot-jump 1.4s infinite ease-in-out both;

                           &:nth-child(1) {
                              animation-delay: -0.48s;
                           }

                           &:nth-child(2) {
                              animation-delay: -0.24s;
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }
}

/* ========== TESTIMONIALS ========= */

.testimonials {
   position: relative;
   width: 100%;
   margin-top: 12em;
}

.swiper {
   width: 100%;
   max-width: 1050px;
   height: 275px;
}

.swiper-slide {
   text-align: center;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   column-gap: 45px;
}

.swiper-slide .client-img {
   width: 185px;
}

.swiper-slide .client-img img {
   width: 100%;
   border-radius: 10px;
}

.swiper-slide .client-details {
   max-width: 500px;
   text-align: left;
}

.swiper-slide .client-details h3 {
   color: var(--color-02);
   font-size: var(--xlarge-font-size);
   font-weight: var(--font-semi-bold);
   margin-bottom: 5px;
}

.swiper-slide .client-details span {
   font-size: var(--small-font-size);
   font-weight: var(--font-regular);
}

.swiper-slide .client-details p {
   color: var(--color-02);
   font-size: var(--base-font-size);
   font-weight: var(--font-regular);
   margin-top: 15px;
}

/* Remove default Swiper arrows */
.swiper-button-next:after,
.swiper-button-prev:after {
   display: none;
}

/* Style custom icon arrows */
.swiper-button-next i,
.swiper-button-prev i {
   color: var(--primary-color);
   font-size: 4.5rem;
   transition: .3s ease;
}

.swiper-button-next i:hover,
.swiper-button-prev i:hover {
   color: var(--hover-color);
}

/* Pagination bullets */
.swiper-pagination-bullet,
.swiper-pagination-bullet-active {
   background: var(--primary-color);
}

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

.contact {

   .sue-container {

      .sue-wrapper {

         .section-content {

            .contact-container {
               position: relative;
               display: flex;
               justify-content: center;
               align-items: center;
               column-gap: 60px;

               .contact-info {

                  h3 {
                     color: var(--color-02);
                     font-size: var(--base-font-size);
                     font-weight: var(--medium-font-size);
                     text-transform: uppercase;
                     margin-bottom: 40px;
                  }

                  .contact-details {
                     display: flex;
                     flex-direction: column;
                     row-gap: 60px;
                     margin-bottom: 50px;

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

                        .contact-icon {
                           color: var(--primary-color);
                           font-size: 2rem;
                           background: var(--card-bg);
                           width: 75px;
                           height: 75px;
                           display: flex;
                           justify-content: center;
                           align-items: center;
                           border-radius: 10px;
                        }

                        .contact-method {
                           display: flex;
                           flex-direction: column;
                           row-gap: 7px;

                           span {
                              font-size: var(--tiny-font-size);
                              text-transform: uppercase;
                           }

                           h4 {
                              color: var(--color-02);
                              font-size: var(--base-font-size);
                              font-weight: var(--medium-font-size);
                           }

                           a {
                              color: var(--primary-color);
                              transition: .3s;

                              span {
                                 font-size: var(--small-font-size);
                                 text-transform: none;
                              }

                              i {
                                 font-size: var(--medium-font-size);
                              }

                              &:hover {
                                 color: var(--hover-color);
                              }
                           }
                        }
                     }
                  }

                  .contact-social-links {
                     width: 100%;
                     display: flex;
                     column-gap: 25px;

                     li {
                        font-size: 1.75rem;
                        background: var(--card-bg);
                        width: 80px;
                        height: 80px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-radius: 50%;
                        cursor: pointer;

                        a {
                           color: var(--primary-color);
                           transition: .3s;
                        }

                        &:hover {

                           a {
                              color: var(--hover-color);
                           }
                        }
                     }
                  }
               }

               .contact-form-container {
                  position: relative;
                  background: var(--card-bg);
                  width: 100%;
                  padding: 50px;
                  border-radius: 35px;

                  h2 {
                     color: var(--color-02);
                     font-size: var(--h2-font-size);
                     font-weight: var(--font-bold);
                     text-transform: uppercase;
                     margin-bottom: 30px;

                     span {
                        color: var(--primary-color);
                     }
                  }

                  p {
                     font-size: var(--tiny-font-size);
                     margin-bottom: 45px;
                  }

                  form {
                     display: flex;
                     flex-direction: column;
                     row-gap: 15px;

                     .input-group {

                        input,
                        textarea {
                           color: var(--color-02);
                           font-size: var(--small-font-size);
                           background: hsl(var(--hue) 54% 74% / .1);
                           width: 100%;
                           border: none;
                           outline: none;
                           padding: 17px 20px;
                           border-radius: 10px;
                        }

                        textarea {
                           height: 185px;
                           resize: none;
                        }

                        &.send-message {
                           display: flex;
                           justify-content: space-between;
                           align-items: center;
                           margin-top: 10px;

                           button {
                              font-size: var(--small-font-size);
                              font-weight: var(--font-medium);
                              width: 200px;
                              padding: 16px 30px;
                              transition: .3s;
                           }

                           .contact-form-alert {
                              cursor: pointer;

                              span {
                                 color: var(--color-02);
                                 font-size: var(--tiny-font-size);
                                 font-weight: var(--font-regular);
                              }

                              i {
                                 color: var(--primary-color);
                                 font-size: 1.25rem;
                              }
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }
}

/* ======================== Footer ======================== */
.sue-footer {
   background: var(--footer-bg);
   padding-top: 100px;
   padding-bottom: 165px;

   .sue-container {

      .inner {
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         row-gap: 40px;

         .footer-menu {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            column-gap: 22px;
            row-gap: 22px;

            .menu-item {

               a {
                  color: var(--color-01);
                  font-size: calc(var(--tiny-font-size) - .07rem);
                  font-weight: var(--font-medium);
                  text-transform: uppercase;
                  padding: 3px 12px;
                  border-radius: 15px;
                  transition: .3s;

                  &:hover {
                     color: var(--color-03);
                     background: var(--color-01);
                  }
               }
            }
         }

         .copy-right {
            color: var(--color-04);
            font-size: var(--small-font-size);
            margin-top: 10px;

            a {

               &:hover {
                  color: var(--color-01);
                  transition: .3s;
               }
            }
         }
      }
   }
}

/* ========== Media Queries (max-width: 1600px) ========== */
@media screen and (max-width: 1600px) {

   /* (Additional styles would go here based on your file) */

   .sue-container {
      max-width: 1075px;
   }

   .home {

      .home-container {

         .sue-wrapper {

            .avatar-container {

               .avatar-img {

                  .circle {
                     width: 300px;
                  }
               }
            }

            .home-social {
               scale: .8;
            }
         }
      }
   }
}

/* ========== Media Queries (max-width: 1200px) ========== */
@media screen and (max-width: 1200px) {

   .sue-container {
      max-width: 100%;
      margin-inline: 50px;
   }

   .cursor {
      display: none;
   }

   .about {

      .sue-container {

         .sue-wrapper {

            .section-content {
               column-gap: 0;
               flex-direction: column;
               row-gap: 50px;

               .about-img {
                  width: 375px;
               }

               .about-details {
                  width: unset;

                  .about-info {
                     display: grid;
                     place-items: center;

                     .about-description {
                        max-width: 700px;
                        text-align: center;
                     }
                  }

                  .about-buttons {
                     width: 100%;
                     justify-content: center;
                  }
               }
            }
         }
      }
   }

   .portfolio-container {
      grid-template-columns: repeat(2, 1fr);
   }

   .resume {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .resume-tab-content {

                  &.personal-skills {

                     .skill-container {
                        grid-template-columns: repeat(1, 1fr);
                     }
                  }
               }
            }
         }
      }
   }
}

/* ========== Media Queries (max-width: 992px) ========== */
@media screen and (max-width: 992px) {

   .home {

      .home-container {

         .sue-wrapper {

            .avatar-container {
               flex-direction: column-reverse;
               row-gap: 10px;

               .hire-btn-01 {
                  display: block;
               }

               .avatar-info {

                  .text-content {
                     align-items: center;
                  }

                  .hire-btn-02 {
                     display: none;
                  }
               }
            }
         }
      }
   }

   .services {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .service-container {
                  grid-template-columns: repeat(2, 1fr);
               }
            }
         }
      }
   }

   .portfolio {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .portfolio-container {
                  grid-template-columns: repeat(1, 1fr);
                  column-gap: 0px;

                  .card-with-modal {

                     .portfolio-card {
                        max-width: 337px;
                     }
                  }
               }
            }
         }
      }
   }

   .swiper {
      max-width: 700px;
      height: 450px;
   }

   .swiper-slide {
      flex-direction: column;

      .client-img {
         margin-bottom: 35px;
      }

      .client-details {
         text-align: center;
      }
   }

   .contact {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .contact-container {
                  flex-direction: column;
                  row-gap: 75px;

                  .contact-info {
                     width: 100%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     flex-direction: column;

                     .contact-social-links {
                        justify-content: center;
                     }
                  }
               }
            }
         }
      }
   }
}

/* ========== Media Queries (max-width: 768px) ========== */
@media screen and (max-width: 768px) {

   :root {
      /* ======= Font sizes ======= */
      --h1-font-size: 2.3rem;
      --h2-font-size: 1.97rem;
      --h3-font-size: 1.75rem;
      --h4-font-size: 1.3rem;
      --h5-font-size: 1.05rem;

      --xlarge-font-size: 1.28rem;
      --large-font-size: 1.13rem;
      --medium-font-size: 1.06rem;
      --base-font-size: 1rem;
      --small-font-size: .93rem;
      --tiny-font-size: .88rem;
   }

   .sue-container {
      margin-inline: 25px;
   }

   .sue-header {
      z-index: var(--z-fixed);
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      padding: 30px 0;
      transition: .3s ease;

      .sue-container {

         .inner {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .sue-logo {

               a {
                  font-size: 2.35rem;
               }
            }

            .header-btns {

               .lets-talk-btn {
                  display: none;
               }

               .lets-talk-icon {
                  font-size: 1.6rem;
               }
            }
         }
      }
   }

   .theme-btn {

      i {
         font-size: 1.6rem;
      }
   }

   .bottom-nav-container {

      .bottom-nav {
         bottom: -30px;

         &.active {
            bottom: 30px;
         }

         .bottom-nav-inner {

            .menu {

               li {

                  a {

                     i {
                        font-size: 1.25rem;
                     }
                  }
               }
            }
         }
      }
   }

   .home {
      padding-top: unset;

      .home-container {

         .sue-wrapper {

            .home-social {

               .social-line {
                  margin-block: 32px 20px;
               }
            }
         }
      }
   }

   .resume {
      .sue-container {
         .sue-wrapper {
            .section-content {
               .resume-tab-content {

                  .resume-items {

                     .item {
                        .info {
                           width: 185px;
                           column-gap: 15px;

                           i {
                              display: none;
                           }
                        }

                        &.item-left {
                           .info {
                              right: 25px;
                           }
                        }

                        &.item-right {
                           .info {
                              left: 75px;
                           }
                        }
                     }
                  }

                  &.personal-skills {
                     .skill-container {
                        .skill-card {
                           padding: 50px 0;

                           .skill-categories {
                              .skill {
                                 i {
                                    font-size: 1.25rem;
                                 }
                              }
                           }
                        }
                     }
                  }

               }
            }
         }
      }
   }

   .services {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .service-container {
                  grid-template-columns: repeat(1, 1fr);
                  row-gap: 30px;

                  .card-with-modal {

                     .service-card {
                        width: 245px;
                        height: 250px;

                        .service-info {

                           .service-icon {
                              font-size: 3.25rem;
                           }

                           h4 {
                              max-width: unset;
                              white-space: wrap;
                           }
                        }
                     }

                     .service-modal-backdrop {

                        .service-modal {
                           padding: 50px 20px;
                        }
                     }
                  }
               }
            }
         }
      }
   }

   .portfolio {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .portfolio-container {

                  .card-with-modal {

                     .portfolio-modal-backdrop {

                        .portfolio-modal {
                           padding: 1rem;
                           padding-top: 2rem;
                           border-radius: 10px;

                           .modal-close-btn {
                              top: 5px;
                              right: 5px;
                           }

                           .modal-content {

                              .modal-img {
                                 width: 100%;
                                 border-radius: 6px;
                              }

                              .modal-body {

                                 h4.modal-title {
                                    text-align: center;
                                    font-size: 1.3em;
                                    padding-bottom: 20px;
                                 }

                                 .project-tags {
                                    display: flex;
                                    flex-wrap: wrap;
                                    gap: 10px;
                                    margin-bottom: 20px;
                                    justify-content: center;
                                    width: 100%;

                                    span {
                                       font-size: 9px;
                                    }
                                 }

                                 p.description {
                                    color: var(--color-04);
                                    line-height: 1.6;
                                    margin-bottom: 20px;
                                    font-size: .9em;
                                 }

                                 .project-features {

                                    ul {

                                       li {
                                          flex-wrap: wrap;
                                          gap: 10px;
                                          flex-direction: column;

                                          &::before {
                                             content: "→";
                                             color: var(--primary-color);
                                             font-weight: bold;
                                             display: none;
                                          }

                                          strong {
                                             min-width: 140px;
                                             /* Adjust this width to align your text columns */
                                             display: inline-block;
                                          }

                                          span,
                                          p {
                                             padding-left: 0;
                                          }
                                       }
                                    }
                                 }
                              }

                              .modal-actions {

                                 .action-btn {
                                    gap: 8px;
                                    font-size: .75em;
                                 }
                              }
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }

   /* Style custom icon arrows */
   .swiper-button-next i,
   .swiper-button-prev i {
      font-size: 4rem;
   }

   .contact {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .contact-container {

                  .contact-form-container {
                     padding: 35px;
                     border-radius: 10px;
                  }
               }
            }
         }
      }
   }

   .sue-footer {

      .sue-container {

         .inner {

            .footer-menu {
               column-gap: 10px;
            }
         }
      }
   }

   .to-top-btn {

      &.active {
         right: 20px;
      }
   }
}

/* ========== Media Queries (max-width: 480px) ========== */
@media screen and (max-width: 480px) {
   :root {
      /* ======= Font sizes ======= */
      --h1-font-size: 2.25rem;
      --h2-font-size: 1.9rem;
      --h3-font-size: 1.65rem;
      --h4-font-size: 1.25rem;
      --h5-font-size: 1.02rem;

      --xlarge-font-size: 1.25rem;
      --large-font-size: 1.1rem;
      --medium-font-size: 1.03rem;
      --base-font-size: 1rem;
      --small-font-size: .9rem;
      --tiny-font-size: .85rem;
   }

   .sue-container {
      margin-inline: 20px;
   }

   .sue-header {
      width: 100vw;
      padding: 20px 0;

      .sue-container {

         .inner {

            .header-btns {
               column-gap: 15px;
            }
         }
      }
   }

   .home {

      .home-container {

         .sue-wrapper {
            flex-direction: column-reverse;

            .avatar-container {
               width: 100%;

               .home-scroll-btn {
                  display: none;
               }

               .avatar-img {
                  margin-bottom: 2rem;

                  .circle {
                     width: 300px;
                  }
               }

               .avatar-info {

                  .text-content {

                     .my-name {
                        width: 100%;
                        text-align: center;
                        font-size: 1.75em;
                     }
                  }
               }
            }

            .home-social {
               position: relative;

               span {
                  display: none;
               }

               .social-line {
                  display: none;
               }

               .social-icons {
                  flex-direction: row;
                  margin-top: 35px;
               }
            }
         }
      }
   }

   .bottom-nav-container {
      width: 100vw;
      max-width: 400px;

      .bottom-nav {
         width: 87%;
         padding: 0 10px;

         .bottom-nav-inner {

            .menu {
               padding: 17px 15px;
               justify-content: space-between;
               column-gap: 7px;
               width: 100%;

               li {

                  a {

                     i {
                        padding: 7px;
                        font-size: 1.15rem;
                     }
                  }
               }
            }

            .menu-hide-btn {
               font-size: 1.25rem;
            }
         }
      }

      .menu-show-btn {
         width: 75px;
         height: 45px;
         row-gap: 4px;
         bottom: -30px;

         &.active {
            bottom: 30px;
         }
      }
   }

   .about {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .about-img {
                  width: 100%;
                  max-width: 375px;
               }

               .about-details {

                  .about-buttons {
                     column-gap: 15px;
                  }

                  .pro-list {
                     grid-template-columns: repeat(auto-fill, minmax(140px, 2fr));

                     .pro-card {
                        flex-direction: column;
                        row-gap: 3px;
                        padding: 1.5rem;

                        span {
                           font-size: 2rem;
                        }

                        p {
                           text-align: center;
                        }
                     }
                  }
               }
            }
         }
      }
   }

   .resume {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .resume-tab-content {

                  .resume-items {

                     .item {
                        scale: 0.8;

                        .info {
                           width: 140px;
                           column-gap: 15px;

                           h5 {
                              font-size: .9em;
                           }

                           p {
                              white-space: break-spaces;
                           }

                           span {
                              font-size: .8em;
                           }
                        }

                        &.item-left {

                           .info {
                              right: 20px;
                           }
                        }

                        &.item-right {

                           .info {
                              left: 40px;
                           }
                        }
                     }
                  }

                  &.personal-skills {

                     .skill-container {
                        row-gap: 35px;

                        .skill-card {
                           padding: 35px 0;

                           .skill-title {
                              margin-bottom: 35px;
                           }

                           .skill-categories {
                              padding: 0 25px;
                              column-gap: 35px;
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }

   .services {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .service-container {
                  width: 100%;

                  .card-with-modal {
                     width: 100%;

                     .service-card {
                        margin-inline: auto;

                        .service-info {

                           .service-icon {
                              font-size: 3.25rem;
                           }

                           h4 {
                              max-width: unset;
                              white-space: wrap;
                           }
                        }
                     }

                     .service-modal-backdrop {

                        .service-modal {
                           padding: 50px 15px;
                           margin: 75px 20px;
                        }
                     }
                  }
               }
            }
         }
      }
   }

   .contact {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .contact-container {

                  .contact-form-container {
                     padding: 35px 20px;

                     h2 {
                        text-align: center;
                     }

                     p {
                        text-align: center;
                     }

                     .contact-info {

                        .contact-details {
                           row-gap: 35px;
                        }

                        .contact-social-links {
                           column-gap: 20px;

                           li {
                              font-size: 1.65rem;
                              width: 75px;
                              height: 75px;
                           }
                        }
                     }

                     form {

                        .input-group {

                           &.send-message {
                              flex-wrap: wrap;
                              justify-content: center;
                           }
                        }
                     }
                  }
               }
            }
         }
      }
   }

   .to-top-btn {
      display: none;
   }

   /* Style custom icon arrows */
.swiper-button-next i,
.swiper-button-prev i {
   display: none;
}
}

/* ========== SPECIAL CASES ========== */
@media screen and (max-width: 480px) and (max-height:700px) {
   .home {
      padding-top: 4rem;
   }
}

@media screen and (min-width: 1169px) {

   .portfolio {

      .sue-container {

         .sue-wrapper {

            .section-content {

               .portfolio-container {
                  width: 100%;
                  display: grid;
                  /* Use auto-fill instead of auto-fit to keep empty "ghost" columns on the right */
                  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                  gap: 20px;
                  /* Simplified gap */
                  row-gap: 30px;

                  /* FIX: Align the grid and items to the start (left) */
                  justify-content: start;
                  align-items: start;

                  .card-with-modal {
                     width: 100%;
                     /* Ensure the wrapper doesn't exceed your card's max-width */
                     max-width: 370px;
                     /* Ensures that if the container is wider than the card, the card stays left */
                     justify-self: start;

                     .portfolio-card {
                        position: relative;
                        background: var(--card-bg);
                        width: 100%;
                        max-width: 370px;
                        border-radius: 10px;
                        cursor: pointer;
                        overflow: hidden;
                        transition: 0.3s;
                        /* ... rest of your code ... */
                     }
                  }
               }
            }
         }
      }
   }
}

/* Mobile Tweak: Stack buttons on very small screens */
@media screen and (max-width: 480px) {
   .portfolio-modal-backdrop .portfolio-modal .modal-content .modal-actions {
      grid-template-columns: 1fr;
   }
}

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

@keyframes wiggle {

   0%,
   5% {
      transform: rotateZ(0);
   }

   15% {
      transform: rotateZ(-15deg);
   }

   20% {
      transform: rotateZ(10deg);
   }

   25% {
      transform: rotateZ(-10deg);
   }

   30% {
      transform: rotateZ(6deg);
   }

   35% {
      transform: rotateZ(-4deg);
   }

   40%,
   100% {
      transform: rotateZ(0);
   }
}

@keyframes up-down {

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

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

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

@keyframes dot-jump {
   0% {
      transform: translateY(0);
   }

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

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