/* =================================================================== 
 * portfolio_web Main Style sheet
 * ------------------------------------------------------------------
 
 * TOC:
 * # SETTINGS
 *      ## fonts 
 *      ## colors
 *      ## spacing and typescale
 *      ## grid variables
 * # NORMALIZE
 * # BASE SETUP
 * # GRID
 *      ## large screen devices 
 *      ## medium screen devices 
 *      ## tablet devices 
 *      ## mobile devices 
 *      ## small screen devices 
 *      ## additional column stackpoints 
 * # UTILITY CLASSES
 * # TYPOGRAPHY 
 *      ## base type styles
 *      ## additional typography & helper classes
 *      ## lists
 *      ## spacing
 * # PRELOADER
* # BUTTONS
 * # PROJECT-WIDE SHARED STYLES
 *      ## media classes
 *      ## theme-specific typography classes
 * # PAGE WRAP
 *      ## circles
 * # SITE HEADER
 *      ## main navigation
 * # INTRO
 * # ABOUT
 *      ## about info
 * # WORKS
 *      ## works portfolio
 * # CONTACT
 * # FOOTER
 *      ## copyright
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------- 
 * ## fonts    
 * ------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Serif+Text:ital@0;1&family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Quicksand:wght@300..700&display=swap");

:root {
  --font-1: "Public Sans", sans-serif;
  --font-2: "DM Serif Display", serif;
  --font-3: "Quicksand", sans-serif; 
  --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;
}

/* ------------------------------------------------------------------- 
  * ## colors        (Did change color-1 & color-2)
  * ------------------------------------------------------------------- */
 :root {
 
     --color-1 : #6db5ca;
     --color-2 : #ffffff;

     /* shades 
      * generated using (Tint & Shade Generator)
      * (https://maketintsandshades.com/) */
     --color-black   : #000000;
     --color-gray-19 : #020202;
     --color-gray-18 : #040404;
     --color-gray-17 : #060607;
     --color-gray-16 : #080809;
     --color-gray-15 : #0a0b0b;
     --color-gray-14 : #0c0d0d;
     --color-gray-13 : #0e0f0f;
     --color-gray-12 : #101112;
     --color-gray-11 : #121314;
     --color-gray-10 : #141516;
     --color-gray-9  : #2c2c2d;
     --color-gray-8  : #434445;
     --color-gray-7  : #5b5b5c;   /* hover project */
     --color-gray-6  : #727373;   /*skills button, tools mention*/
     --color-gray-5  : #8a8a8b;
     --color-gray-4  : #a1a1a2;  /* about, work, download resume */
     --color-gray-3  : #b9b9b9;
     --color-gray-2  : #d0d0d0;  /* for large headings*/
     --color-gray-1  : #e8e8e8;
     --color-white   : #ffffff;
 
     /* preloader        (modified) */
      --color-preloader-bg: #ffffff; 
      --color-loader: #000000; /* black spinner */
      --color-loader-light: rgba(158, 157, 155, 0.2); /* Light gray overlay */
 }

    /* buttons      (modified) */
      .contact-btn {
         font-weight: bold;  /* Bold text */
         font-size: 1.5rem;  /* Increase text size */
     }
 
 /* ------------------------------------------------------------------- 
  * ## spacing and typescale
  * ------------------------------------------------------------------- */
 :root {
 
     /* spacing
      * base font size: 19px 
      * vertical space unit : 32px */
     --base-size      : 62.5%;
     --multiplier     : 1;
     --base-font-size : calc(2.2rem * var(--multiplier));
     --space          : calc(3.2rem * var(--multiplier));
 
     /* vertical spacing */
     --vspace-0_125 : calc(0.125 * var(--space));
     --vspace-0_25  : calc(0.25 * var(--space));
     --vspace-0_375 : calc(0.375 * var(--space));
     --vspace-0_5   : calc(0.5 * var(--space));
     --vspace-0_625 : calc(0.625 * var(--space));
     --vspace-0_75  : calc(0.75 * var(--space));
     --vspace-0_875 : calc(0.875 * var(--space));
     --vspace-1     : calc(var(--space));
     --vspace-1_25  : calc(1.25 * var(--space));
     --vspace-1_5   : calc(1.5 * var(--space));
     --vspace-1_75  : calc(1.75 * var(--space));
     --vspace-2     : calc(2 * var(--space));
     --vspace-2_5   : calc(2.5 * var(--space));
     --vspace-3     : calc(3 * var(--space));
     --vspace-3_5   : calc(3.5 * var(--space));
     --vspace-4     : calc(4 * var(--space));
     --vspace-4_5   : calc(4.5 * var(--space));
     --vspace-5     : calc(5 * var(--space));
 
     /* type scale
      * ratio 1:2 | base: 19px    
      * --------------------------------------------------------- */
     --text-scale-ratio : 1.2;
     --text-size        : var(--base-font-size);
     --text-xs          : calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
     --text-sm          : calc(var(--text-xs) * var(--text-scale-ratio));
     --text-md          : calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
     --text-lg          : calc(var(--text-md) * var(--text-scale-ratio));
     --text-xl          : calc(var(--text-lg) * var(--text-scale-ratio));
     --text-xxl         : calc(var(--text-xl) * var(--text-scale-ratio));
     --text-xxxl        : calc(var(--text-xxl) * var(--text-scale-ratio));
     --text-display-1   : calc(var(--text-xxxl) * var(--text-scale-ratio));
     --text-display-2   : calc(var(--text-display-1) * var(--text-scale-ratio));
     --text-display-3   : calc(var(--text-display-2) * var(--text-scale-ratio));
 
     
 }
 
 /* on mobile devices below 600px, change the value of '--multiplier' 
  * to adjust the values of base font size and vertical space unit. */
 @media screen and (max-width: 600px) {
     :root {
         --multiplier : .875;
     }
 }
 
 /* ------------------------------------------------------------------- 
  * ## grid variables
  * ------------------------------------------------------------------- */
 :root {
 
     /* widths for rows and containers */
     --width-full     : 100%;
     --width-max      : 1200px;
     --width-wide     : 1400px;
     --width-wider    : 1600px;
     --width-widest   : 1800px;
     --width-narrow   : 1000px;
     --width-narrower : 800px;
     --width-grid-max : var(--width-max);
 
     /* gutter */
     --gutter : 2rem;
 }
 
 /* on medium screen devices */
 @media screen and (max-width: 1200px) {
     :root {
         --gutter : 1.6rem;
     }
 }
 
 /* on mobile devices */
 @media screen and (max-width: 600px) {
     :root {
         --gutter : 1rem;
     }
 }

 /* ====================================================================
  * # NORMALIZE
  * --------------------------------------------------------------------
  * normalize.css v8.0.1 | MIT License |
  * github.com/necolas/normalize.css
  * -------------------------------------------------------------------- */
 
 html {
     line-height              : 1.15;
     -webkit-text-size-adjust : 100%;
 }
 
 body {
     margin : 0;
 }
 
 main {
     display : block;
 }
 
 h1 {
     font-size : 2em;
     margin    : 0.67em 0;
 }
 
 hr {
     box-sizing : content-box;
     height     : 0;
     overflow   : visible;
 }
 
 pre {
     font-family : monospace, monospace;
     font-size   : 1em;
 }
 
 a {
     background-color : transparent;
 }
 
 b,
 strong {
     font-weight : bolder;
 }
 
 code,
 kbd,
 samp {
     font-family : monospace, monospace;
     font-size   : 1em;
 }
 
 small {
     font-size : 80%;
 }
 
 img {
     border-style : none;
 }
 
 button,
 input,
 select,
 textarea {
     font-family : inherit;
     font-size   : 100%;
     line-height : 1.15;
     margin      : 0;
 }
 
 button,
 input {
     overflow : visible;
 }
 
 button,
 select {
     text-transform : none;
 }
 
 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
     -webkit-appearance : button;
 }
 
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
     border-style : none;
     padding      : 0;
 }
 
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring 

 {outline : 1px dotted ButtonText;
}
 
 textarea {
     overflow : auto;
 }
 
 [type="checkbox"],
 [type="radio"] {
     box-sizing : border-box;
     padding    : 0;
 }
 
 [hidden] {
     display : none;
 }
 
 /* ===================================================================
  * # BASE SETUP
  * ------------------------------------------------------------------- */
 
 html {
     font-size  : var(--base-size);
     box-sizing : border-box;
 }
 
 *,
 *::before,
 *::after {
     box-sizing : inherit;
 }
 
 html,
 body {
     height : 100%;
 }
 
 body {
     background-color            : var(--color-black);
     -webkit-overflow-scrolling  : touch;
     -webkit-text-size-adjust    : 100%;
     -webkit-tap-highlight-color : rgba(0, 0, 0, 0);
     -webkit-font-smoothing      : antialiased;
     -moz-osx-font-smoothing     : grayscale;
 }
 
 p {
     font-size      : inherit;
     text-rendering : optimizeLegibility;
 }
 
 a {
     text-decoration : none;
 }
 
 svg,
 img,
  video {
     max-width : 100%;
     height    : auto;
 }
 pre {
     overflow : auto;
 }
 
 div, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p {
     margin  : 0;
     padding : 0;
 }
 
 input[type="email"],
 input[type="number"],
 input[type="search"],
 input[type="text"],
 input[type="tel"],
 input[type="url"],
 input[type="password"],
 textarea {
     -webkit-appearance : none;
     -moz-appearance    : none;
     appearance         : none;
 }
 
 /* ===================================================================
  * # GRID v4.0.0
  *   -----------------------------------------------------------------
  * - Grid breakpoints are based on MAXIMUM WIDTH media queries, 
  *   meaning they apply to that one breakpoint and ALL THOSE BELOW IT.
  * - Grid columns without a specified width will automatically layout 
  *   as equal width columns.
  *
  * - BLOCK GRID columns(columns inside BLOCK GRID containers) are 
  *   equally-sized columns define at parent/row level. 
  *   A BLOCK GRID container's class attribute value begins with "block-".
  *
  * ------------------------------------------------------------------- */
 
 /* row */
 .row {
     width     : 92%;
     max-width : var(--width-grid-max);
     margin    : 0 auto;
     display   : flex;
     flex-flow : row wrap;
 }
 
 .row .row {
     width        : auto;
     max-width    : none;
     margin-left  : calc(var(--gutter) * -1);
     margin-right : calc(var(--gutter) * -1);
 }
 
 /* column */
 .column {
     display : block;
     flex    : 1 1 0%;
     padding : 0 var(--gutter);
 }
 
 .collapse>.column,
 .column.collapse {
     padding : 0;
 }
 
 /* row utility classes */
 .row.row-wrap {
     flex-wrap : wrap;
 }
 
 .row.row-nowrap {
     flex-wrap : nowrap;
 }
 
 .row.row-y-top {
     align-items : flex-start;
 }
 
 .row.row-y-bottom {
     align-items : flex-end;
 }
 
 .row.row-y-center {
     align-items : center;
 }
 
 .row.row-stretch {
     align-items : stretch;
 }
 
 .row.row-baseline {
     align-items : baseline;
 }
 
 .row.row-x-left {
     justify-content : flex-start;
 }
 
 .row.row-x-right {
     justify-content : flex-end;
 }
 
 .row.row-x-center {
     justify-content : center;
 }
 
 /* --------------------------------------------------------------------
  * ## large screen devices 
  * -------------------------------------------------------------------- */
 .lg-1 {
     flex  : none;
     width : 8.33333%;
 }
 
 .lg-2 {
     flex  : none;
     width : 16.66667%;
 }
 
 .lg-3 {
     flex  : none;
     width : 25%;
 }
 
 .lg-4 {
     flex  : none;
     width : 33.33333%;
 }
 
 .lg-5 {
     flex  : none;
     width : 41.66667%;
 }
 
 .lg-6 {
     flex  : none;
     width : 50%;
 }
 
 .lg-7 {
     flex  : none;
     width : 58.33333%;
 }
 
 .lg-8 {
     flex  : none;
     width : 66.66667%;
 }
 
 .lg-9 {
     flex  : none;
     width : 75%;
 }
 
 .lg-10 {
     flex  : none;
     width : 83.33333%;
 }
 
 .lg-11 {
     flex  : none;
     width : 91.66667%;
 }
 
 .lg-12 {
     flex  : none;
     width : 100%;
 }
 
 .block-lg-one-half>.column {
     flex  : none;
     width : 50%;
 }
 
 /* --------------------------------------------------------------------
  * ## medium screen devices 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .md-1 {
         flex  : none;
         width : 8.33333%;
     }
 
     .md-2 {
         flex  : none;
         width : 16.66667%;
     }
 
     .md-3 {
         flex  : none;
         width : 25%;
     }
 
     .md-4 {
         flex  : none;
         width : 33.33333%;
     }
 
     .md-5 {
         flex  : none;
         width : 41.66667%;
     }
 
     .md-6 {
         flex  : none;
         width : 50%;
     }
 
     .md-7 {
         flex  : none;
         width : 58.33333%;
     }
 
     .md-8 {
         flex  : none;
         width : 66.66667%;
     }
 
     .md-9 {
         flex  : none;
         width : 75%;
     }
 
     .md-10 {
         flex  : none;
         width : 83.33333%;
     }
 
     .md-11 {
         flex  : none;
         width : 91.66667%;
     }
 
     .md-12 {
         flex  : none;
         width : 100%;
     }
 
     .block-md-one-eight>.column {
         flex  : none;
         width : 12.5%;
     }
 
     .block-md-one-sixth>.column {
         flex  : none;
         width : 16.66667%;
     }
 
     .block-md-one-fifth>.column {
         flex  : none;
         width : 20%;
     }
 
     .block-md-one-fourth>.column {
         flex  : none;
         width : 25%;
     }
 
     .block-md-one-third>.column {
         flex  : none;
         width : 33.33333%;
     }
 
     .block-md-one-half>.column {
         flex  : none;
         width : 50%;
     }
 
     .block-md-whole>.column {
         flex  : none;
         width : 100%;
     }
 
     .hide-on-md {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## tablet devices 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .tab-6 {
         flex  : none;
         width : 50%;
     }
 
     .hide-on-tab {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## mobile devices 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 600px) {
     .row {
         width         : 100%;
         padding-left  : 6vw;
         padding-right : 6vw;
     }
 
     .row .row {
         padding-left  : 0;
         padding-right : 0;
     }

     .hide-on-mob {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## small screen devices 
  * --------------------------------------------------------------------*/
 
 /* stack columns on small screen devices */
 @media screen and (max-width: 400px) {
     .row .row {
         margin-left  : 0;
         margin-right : 0;
     }
 
     .block-stack>.column,
     .column {
         flex         : none;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
         padding      : 0;
     }
 
     .hide-on-sm {
         display : none;
     }
 }
 
 /* --------------------------------------------------------------------
  * ## additional column stackpoints 
  * -------------------------------------------------------------------- */
 @media screen and (max-width: 1000px) {
 
     .stack-on-1000,
     .block-stack-on-1000>.column {
         flex         : none;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
     }
 }
 
 @media screen and (max-width: 550px) {
 
     .stack-on-550,
     .block-stack-on-550>.column {
         flex         : none;
         width        : 100%;
         margin-left  : 0;
         margin-right : 0;
     }
 }
 
 /* ===================================================================
  * # UTILITY CLASSES
  * ------------------------------------------------------------------- */
 .u-antialiased {
     -webkit-font-smoothing  : antialiased;
     -moz-osx-font-smoothing : grayscale;
 }
 
 /* --------------------------------------------------------------------
  * ## base type styles
  * -------------------------------------------------------------------- */
 body {
     font-family : var(--font-1);
     font-size   : var(--base-font-size);
     font-weight : 300;
     line-height : var(--vspace-1);
     color       : var(--color-gray-2);
 }
 
 /* links */
 a {
     color      : #5790a1;
     transition : all 0.3s ease-in-out;
 }
 
 a:focus,
 a:hover,
 a:active {
     color : #5790a1;
 }
 
 a:hover,
 a:active {
     outline : 0;
 }
 
 /* headings */
 h1, h2, h3, h4, h5, h6, 
 .h1, .h2, .h3, .h4, .h5, .h6 {
     font-family            : var(--font-3);
     font-weight            : 300;
     color                  : var(--color-gray-2);
     font-variant-ligatures : common-ligatures;
     text-rendering         : optimizeLegibility;
 }
 
 h1, .h1 {
     margin-top    : var(--vspace-2_5);
     margin-bottom : var(--vspace-0_75);
 }
 
 h2, .h2, h3, .h3, h4, .h4 {
     margin-top    : var(--vspace-2);
     margin-bottom : var(--vspace-0_5);
 }
 
 h5, .h5, h6, .h6 {
     margin-top    : var(--vspace-1_5);
     margin-bottom : var(--vspace-0_5);
 }
 
 h1, .h1 {
     font-size      : var(--text-display-1);
     line-height    : var(--vspace-2);
     letter-spacing : -.01em;
 }
 
 @media screen and (max-width: 500px) {
      .h1 {
         font-size   : var(--text-xxl);
         line-height : calc(1.625 * var(--space));
     }
 }
 h2, .h2 {
     color        : var(--color-gray-4);
     font-size   : var(--text-xxl);
     line-height : var(--vspace-1_5);
 }
 
 h3, .h3 {
    color        : var(--color-gray-4);
     font-size   : var(--text-xl);
     line-height : var(--vspace-1_25);
 }
 
 h4, .h4 {
    color        : var(--color-gray-4);
     font-size   : var(--text-lg);
     line-height : var(--vspace-1);
 }
 
 h5, .h5 {
    color        : var(--color-gray-4);
     font-size   : var(--text-md);
     line-height : var(--vspace-0_875);
 }
 
 /* emphasis, italic,
  * strong, bold and small text */
 em,
 i,
 strong,
 b {
     font-size   : inherit;
     line-height : inherit;
 }
 
 em,
 i {
     font-style : italic;
 }
 
 strong,
 b {
     font-weight : 600;
 }
 
 small {
     font-size   : 75%;
     font-weight : 400;
     line-height : var(--vspace-0_5);
 }
 
 /* --------------------------------------------------------------------
  * ## additional typography & helper classes
  * -------------------------------------------------------------------- */
.attention-getter {
     font-family : var(--font-1);
     font-weight : 400;
     font-size   : 20px;
     line-height : var(--vspace-4_25);
     color       : var(--color-gray-4);
 }
 
 .text-center { text-align : center; }
 .text-left { text-align : left; }
 .text-right { text-align : right; }

/* ------------------------------------------------------------------
 * Lists
 * -------------------------------------------------------------------*/

ol { list-style: decimal; }
ul { list-style: disc; }
li { display: list-item; }
ol, ul { margin-left: 1.6rem; }
ul li { padding-left: .4rem; }
ul ul, ul ol, ol ol, ol ul { margin: 1.6rem 0 1.6rem 1.6rem; }

/* ------------------------------------------------------------------
* Spacing 
* -------------------------------------------------------------------*/
.btn { margin-bottom: var(--vspace-0_5); }
p, ul, ol, img { margin-bottom: var(--vspace-1); }


 /* ===================================================================
  * # PRELOADER
  * -------------------------------------------------------------------
  * - markup:
  *
  * <div id="preloader">
  *    <div id="loader"></div>
  * </div>
  *
  * ------------------------------------------------------------------- */
 
 #preloader {
     position        : fixed;
     display         : flex;
     flex-flow       : row wrap;
     justify-content : center;
     align-items     : center;
     background      : var(--color-black);
     z-index         : 500;
     height          : 100vh;
     width           : 100%;
     opacity         : 1;
 }
 
 .no-js #preloader {
     display : none;
 }
 
 #loader {
     width             : var(--vspace-2);
     height            : var(--vspace-2);
     padding           : 0;
     background-color  : #ffffff;
     border-radius     : 100%;
     -webkit-animation : sk-scaleout 1.0s infinite ease-in-out;
     animation         : sk-scaleout 1.0s infinite ease-in-out;
 }
 
 @-webkit-keyframes sk-scaleout {
     0% {
         -webkit-transform : scale(0);
         transform         : scale(0);
     }
 
     100% {
         -webkit-transform : scale(1);
         transform         : scale(1);
         opacity           : 0;
     }
 }
 
 @keyframes sk-scaleout {
     0% {
         transform : scale(0);
     }
 
     100% {
         transform : scale(1);
         opacity   : 0;
     }
 }

 /* ------------------------------------------------------------------- 
  * ## style placeholder text
  * ------------------------------------------------------------------- */
 ::-webkit-input-placeholder {
     /* WebKit, Blink, Edge */
     color : var(--color-placeholder);
 }
 
 :-moz-placeholder {
     /* Mozilla Firefox 4 to 18 */
     color   : var(--color-placeholder);
     opacity : 1;
 }
 
 ::-moz-placeholder {
     /* Mozilla Firefox 19+ */
     color   : var(--color-placeholder);
     opacity : 1;
 }
 
 :-ms-input-placeholder {
     /* Internet Explorer 10-11 */
     color : var(--color-placeholder);
 }
 
 ::-ms-input-placeholder {
     /* Microsoft Edge */
     color : var(--color-placeholder);
 }
 
 ::placeholder {
     /* Most modern browsers support this now. */
     color : var(--color-placeholder);
 }
 
 /* ------------------------------------------------------------------- 
  * ## change autocomplete styles in Chrome
  * ------------------------------------------------------------------- */
 /* --- Minimalist Resume Button --- */
.download-btn {
    display: inline-block;
    font-family: var(--font-3); 
    font-weight: 700;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--color-gray-4);
    background-color: var(--color-gray-12);
    
    /* ADJUST SIZE HERE */
    padding: 1.1rem 1.5rem; 
    border-radius: 20px; 
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 15px rgba(109, 181, 202, 0.4);
    cursor: pointer;
}

.download-btn:hover {
    transform: translateY(-2px); /* Subtle lift effect */
    color: var(--color-1);
}
 
 /* ===================================================================
  * # PROJECT-WIDE SHARED STYLES
  * ------------------------------------------------------------------- */
 .wide {
     max-width : var(--width-wide);
 }
  [data-animate-el] {
     opacity : 0;
 }
 
 /* ------------------------------------------------------------------- 
  * ## theme-specific typography classes
  * ------------------------------------------------------------------- */
 .text-pretitle {
     font-family    : var(--font-1);
     font-size      : 17px;
     font-weight    : 600;
     color          : var(--color-1);
     text-transform : uppercase;
     letter-spacing : .1em;
     margin-top     : 0;
     margin-left    : .2rem;
     margin-bottom  : var(--vspace-0_5);
     position       : relative;
 }
 
 .text-pretitle.with-line {
     color        : var(--color-1);
     padding-left : 5rem;
     transform    : translateX(0rem);
 }
 
 .text-pretitle.with-line::before {
     content          : "";
     display          : block;
     height           : 1.5px;
     width            : 4rem;
     background-color : var(--color-1);
     position         : absolute;
     top              : 50%;
     left             : 0;
 }
 
 .text-huge-title {
     --text-huge : 10.8rem;
     font-size   : var(--text-huge);
     line-height : 1.0740;
     margin-top  : 0;
     
 }
 /* ------------------------------------------------------------------- 
  * responsive:
  * project-wide shared styles
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .text-pretitle.with-line {
         padding-left : 3rem;
         transform    : translateX(-3rem);
         transform    : none;
     }
 
     .text-pretitle.with-line::before {
         width : 2rem;
     }
 }
 
 /* ===================================================================
  * # PAGE WRAP
  * ------------------------------------------------------------------- */
 
 .s-pagewrap {
     --circle-width  : 70vw;
     --header-height : 6.4rem;
     display         : flex;
     flex-direction  : column;
     min-height      : 100%;
     overflow        : hidden;
     position        : relative;
 }
 
 /* --------------------------------------------------------------------
  * ## circles
  * -------------------------------------------------------------------- */
 .s-pagewrap .circles,
 .s-pagewrap .circles span {
     position : absolute;
 }
 
 .s-pagewrap .circles {
     width  : var(--circle-width);
     height : var(--circle-width);
     top    : calc(100vh - var(--circle-width));
     left   : calc(100% - 33vw);
 }
 
 .s-pagewrap .circles span {
     display       : block;
     border        : 5px solid #6db5ca;
     border-radius : 50%;
     opacity       : .1;
     transform     : translate(-50%, -50%);
     left          : 50%;
     top           : 50%;
 }
 
 .s-pagewrap .circles span:nth-child(1) {
     height : 100%;
     width  : 100%;
 }
 
 .s-pagewrap .circles span:nth-child(2) {
     height : 80%;
     width  : 80%;
 }
 
 .s-pagewrap .circles span:nth-child(3) {
     height : 60%;
     width  : 60%;
 }
 
 .s-pagewrap .circles span:nth-child(4) {
     height : 40%;
     width  : 40%;
 }
 
 .s-pagewrap .circles span:nth-child(5) {
     height : 20%;
     width  : 20%;
 }
 
 .ss-preload .s-pagewrap {
     visibility : hidden;
 }
 
 /* ------------------------------------------------------------------- 
  * responsive:
  * page-wrap
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 800px) {
     .s-pagewrap .circles {
         top : calc(var(--header-height) + 5vh);
     }
 }
 
 /* ===================================================================
  * # SITE HEADER / Both desktop & mobile
  * ------------------------------------------------------------------- */
 
 .s-header {
     --box-shadow : 0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 2px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.06), 0 8px 8px rgba(0, 0, 0, 0.06);
     z-index      : 100;
     width        : 100%;
     position     : fixed;
     top          : 0;
     left         : 0;
 }
 
 .header-mobile {
     z-index          : 101;
     display          : none;
     height           : var(--header-height);
     background-color: #000000; /* Soft cream tone */
    box-shadow: 0 0 15px rgba(109, 181, 202, 0.4); /* Soft glow using your color */
 }
 /* --------------------------------------------------------------------
  * ## main navigation       (modified)
  * -------------------------------------------------------------------- */
 .mobile-home-link a,
 .main-nav a {
     display             : block;
     font-size           : 13px;
     font-weight         : 500;
     line-height         : var(--header-height);
     text-transform      : uppercase;
     letter-spacing      : .35em;
     color               : var(--color-1);
     transition-property : color, background-color;
 }
 
 .mobile-home-link a:focus,
 .mobile-home-link a:hover,
 .main-nav a:focus,
 .main-nav a:hover {
     color : var(--color-1);
 }
 
 .mobile-home-link {
     display  : inline-block;
     position : relative;
 }
 
 .mobile-home-link a {
     padding     : 0 .4rem;
     margin-left : 1.5rem;
 }
 
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    height: var(--header-height);
    background-color: transparent;
}

.nav-left .name-box {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.4s ease, color 0.4s ease;
}

.nav-left .name-box:hover {
    transform: scale(1.05);
}

/* Right-side nav */
.nav-right {
    display: flex;
    gap: 1.5rem; /* Add spacing between nav items */
    list-style: none; /* Remove bullet points */
    margin-top: 4rem; /* Push nav down slightly */
    padding: 0;
}

.nav-right a {
    font-size: 13px; /* Increased font size */
    font-weight: 650;
    position: relative;
    display: inline-block;
    text-decoration: none;
    transition: transform 0.4s ease, color 0.4s ease;
}

.nav-right a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--color-1);
    transition: width 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.nav-right a:hover::before {
    width: 100%;
}

.nav-right a:hover {
    color: var(--color-1);
    transform: scale(1.12);
    text-decoration: none;
}

.s-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background-color: #000000; 
    box-shadow: 0 0 15px rgba(109, 181, 202, 0.4); 
    transition: background-color 0.3s ease;
}
/* highlights the currents section of header */
.nav-right li.current a {
    color: var(--color-1); 
}

.nav-right li.current a::before {
    width: 100%; 
}

@media (max-width: 768px) {
  .header-mobile {
    display: flex; /* Show mobile header on small screens */
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
  }
}
@media (min-width: 769px) {
  .header-mobile {
    display: none; /* Hide mobile header on large screens */
  }
}

 /* ------------------------------------------------------------------- 
  * responsive:
  * site-header
  * ------------------------------------------------------------------- */

@media screen and (max-width: 800px) {
    .s-header {
        height : var(--header-height);
    }

    .header-mobile {
        display : block;
    }

    .main-nav {
        padding    : var(--vspace-1) 0 var(--vspace-1_5);
        transform  : translateY(-2rem);
        opacity    : 0;
        visibility : hidden;
    }

    .main-nav a {
        font-family    : var(--font-2);
        font-size      : var(--text-md);
        font-weight    : 400;
        line-height    : var(--vspace-0_875);
        text-transform : none;
        letter-spacing : 0;
        padding        : var(--vspace-0_5) 2.8rem;
        color          : var(--color-gray-2);
    }

    .main-nav a:focus,
    .main-nav a:hover {
        color : white;
    }

    .main-nav .current a {
        background-color : transparent;
        color            : var(--color-1);
    }

    .main-nav ul {
        display          : block;
        background-color : transparent;
        text-align       : left;
        margin           : 0;
        border           : none;
    }

    .main-nav ul li {
        display : block;
        border  : none;
    }

    .main-nav ul li:first-child {
        display : none;
    }
}
 
 /* ===================================================================
  * # INTRO
  * ------------------------------------------------------------------- */
 
 .s-intro {
     --gutter               : 6rem;
     --text-huge-multiplier : 1;
     position               : relative;
 }
 
 .intro-content {
     min-height      : calc(25.5 * var(--space));
     justify-content : center;
     align-items     : center;
     padding-top     : calc(16vh + var(--header-height));
     padding-bottom  : var(--vspace-3);
 }
 
 .intro-content .text-huge-title {
     font-size     : calc(var(--text-huge) * var(--text-huge-multiplier));
     padding-right : 5vw;
 }

 /* ------------------------------------------------------------------- 
  * responsive:
  * intro
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1600px) {
     .s-intro {
         --text-huge-multiplier : .92;
     }
 }
 
 @media screen and (max-width: 1200px) {
     .s-intro {
         --text-huge-multiplier : .85;
     }
 }
 
 @media screen and (max-width: 1000px) {
     .s-intro {
         --text-huge-multiplier : .8;
     }
 
     .intro-content {
         padding-top : calc(14vh + var(--header-height));
     }
 }
 
 @media screen and (max-width: 900px) {
     .s-intro {
         --text-huge-multiplier : .75;
     }
 
     .intro-content .text-huge-title br {
         display : none;
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-intro {
         --gutter               : 4rem;
         --text-huge-multiplier : .7;
     }
 
     .intro-content {
         min-height  : 0;
         align-items : flex-start;
         padding-top : calc(9.6rem + var(--header-height));
     }
 
     .intro-content .text-huge-title {
         padding-right : 0;
         margin-bottom : var(--vspace-1_5);
     }
 }
 
 @media screen and (max-width: 600px) {
     .s-intro {
         --gutter               : 2rem;
         --text-huge-multiplier : .58;
     }
 }
 
 @media screen and (max-width: 500px) {
     .s-intro {
         --text-huge-multiplier : .55;
     }
 }
 
 @media screen and (max-width: 400px) {
     .intro-content .text-huge-title {
         font-size   : var(--text-display-1);
         line-height : var(--vspace-2);
     }
 }

 /* ===================================================================
  * # ABOUT
  * ------------------------------------------------------------------- */
 .s-about {
     padding-top    : var(--vspace-2);
     padding-bottom : var(--vspace-2);
 }
 
 /* --------------------------------------------------------------------
  * ## about info
  * -------------------------------------------------------------------- */
 .about-info {
     --gutter    : 0;
     width       : 92%;
     align-items : center;
 }
 
 .about-info__pic {
     object-fit     : cover;
     margin         : 0;
     vertical-align : bottom;
     box-shadow: 0 0 15px rgba(109, 181, 202, 0.4); 
     border-radius: 40px;
 }
 
 .about-info__text {
     padding     : var(--vspace-1) 0 var(--vspace-1) 0;
     margin-left : 0rem;
 }

.row.about-info.no-gap {
    display: flex !important;
    justify-content: flex-start !important;
}

.row.about-info.no-gap .column.lg-6:last-child {
    padding-left: 0 !important;   
    margin-left: -10rem !important; 
    z-index: 2;                   
}

.para-gap {
    display: block;
    height: 15px; /* Adjust gaps btw paragraphs */
    content: "";
}
 /* ------------------------------------------------------------------- 
  * responsive: about
  * ------------------------------------------------------------------- */

 @media screen and (max-width: 1200px) {
     .about-info {
         --gutter  : 1.6rem;
         width     : 92%;
         max-width : 800px;
         display: block !important; /* Stacks image and text */
     }
 
     /* Reset the pull so text doesn't fly off-screen on tablets */
     .row.about-info.no-gap .column.lg-6:last-child {
         margin-left : 0 !important;
         padding-top: var(--vspace-1) !important;
     }

     .about-info__text {
         padding : var(--vspace-1) 0 0 0;
         margin-left : 0;
     }
 }
 @media screen and (max-width: 600px) {
     .about-info {
         width : 100%;
     }
 }
 /* ===================================================================
  * # WORKS
  * ------------------------------------------------------------------- */
 .s-works {
     padding-top    : var(--vspace-4);
     padding-bottom : var(--vspace-3_5);
 }
 
 .s-works .h1 {
     margin-top : 0;
     font-size: 40px; /* Adjust the font size here */
     font-weight : 400; /* or 300, 200, etc. depending on your preference */
 }
 
 /* --------------------------------------------------------------------
  * ## works portfolio       (modified)
  * -------------------------------------------------------------------- */
 .folio-list {
     --item-min-height : var(--vspace-4_5);
     list-style        : none;
     margin-top        : var(--vspace-2);
     margin-bottom     : var(--vspace-1);
     margin-left       : 0;
 }
 
 .folio-list__item {
     margin-bottom : var(--vspace-1);
     position      : relative;
 }
 
 .folio-list__item-link {
     display             : block;
     width               : 100%;
     padding-left        : calc(5.5 * var(--space));
     color               : var(--color-gray-4);
     transition-duration : .3s;
     position            : relative;
 }
 
 .folio-list__item-link:focus,
 .folio-list__item-link:hover {
     color   : var(--color-gray-7);
     outline : 0;
 }
 
 .folio-list__item-link:focus .folio-list__item-text::before,
 .folio-list__item-link:hover .folio-list__item-text::before {
     width : 100%;
 }
 
 .folio-list__item-pic {
     display  : block;
     position : absolute;
     top      : 0;
     left     : 0;
 }
 
 .folio-list__item-pic img {
     vertical-align : bottom;
     object-fit     : cover;
     width          : var(--item-min-height);
     height         : var(--item-min-height);
     margin         : 0;
 }
 
 .folio-list__item-pic::before,
 .folio-list__item-pic::after {
     transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
 
 .folio-list__item-pic::before {
     z-index          : 1;
     content          : "";
     display          : block;
     background-color : rgba(255, 255, 255, 0.447);
     position         : absolute;
     top              : 0;
     left             : 0;
     right            : 0;
     bottom           : 0;
     width            : 100%;
     height           : 100%;
     opacity          : 0;
     visibility       : hidden;
 }
 
 .folio-list__item-pic::after {
     z-index     : 2;
     display     : block;
     font-family : var(--font-1);
     font-weight : 300;
     font-size   : 2.2rem;
     color       : black;
     text-align  : center;
     height      : var(--vspace-1);
     width       : var(--vspace-1);
     line-height : var(--vspace-1);
     transform   : scale(0.2);
     opacity     : 0;
     visibility  : hidden;
     position    : absolute;
     top         : calc(50% - var(--vspace-0_5));
     left        : calc(50% - var(--vspace-0_5));
 }
 
 .folio-list__item-text::before,
 .folio-list__item-title,
 .folio-list__item-cat {
     transition : all, 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
 }
/* work section lines */ 
 .folio-list__item-text {
     padding-top : var(--vspace-0_5);
     border-top  : 0.5px solid var(--color-gray-6);
     min-height  : var(--item-min-height);
     position    : relative;
 }
 
 .folio-list__item-text::before {
     content          : "";
     display          : block;
     width            : 0;
     height           : 1px;
     background-color : var(--color-gray-2);
     position         : absolute;
     top              : 0;
     left             : 0;
 }
 
 .folio-list__item-title {
     font-family : var(--font-1);
     font-weight : 400;
     font-size   : 23px;
 }
 
 .folio-list__item-cat {
     font-size   : 18px;
     color       : var(--color-gray-6);
     line-height : var(--vspace-0_75);
     margin-left : .2rem;
 }
 
 .folio-list__proj-link {
     display  : block;
     height   : var(--vspace-1);
     width    : var(--vspace-1);
     position : absolute;
     top      : .5rem;
     right    : var(--vspace-0_75);
 }
 
 .folio-list__proj-link svg {
     height    : var(--vspace-0_5);
     width     : var(--vspace-0_5);
     transform : translate(-50%, -50%) rotate(-45deg);
     position  : absolute;
     top       : 50%;
     left      : 50%;
 }
 
 .folio-list__proj-link svg path {
     fill : var(--color-gray-4);
 }
 .folio-list__proj-link:hover svg path {
     fill: var(--color-gray-7); 
 }
 .folio-list__proj-link:hover {
     transform : scale(1.2);
 }
 .project-skills {
    margin-top: 30px;
}
 /* --------------------------------------------------------------------
     * ## skill tags
 * -------------------------------------------------------------------- */
.skill-tag {
    display: inline-block;
    background: var(--color-gray-12);
    color: var(--color-gray-6);
    padding: 1px 12px;
    border-radius: 15px;
    font-size: 11px;
    margin-right: 5px;
    box-shadow: 0 0 15px rgba(109, 181, 202, 0.4); 
}

/* Skills Capsule Styling */
#skills .grid-list-items {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; 
}

#skills .grid-list-items__item {
    background: var(--color-gray-12);        
    box-shadow: 0 0 15px rgba(109, 181, 202, 0.4);
    border-radius: 20px;        
    padding: 10px 25px;         
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s ease;
    margin-bottom: 0;           
    margin-top: 30px;
}

#skills .grid-list-items__item:hover {
    transform: translateY(-4px); 
}

#skills .grid-list-items__title {
    font-size: 1.85rem;
    letter-spacing: 0.1rem;
    color: var(--color-gray-2);
}

#skills .grid-list-items__item p {
    margin: 0;
    font-size: 1.60rem;
    color: var(--color-gray-6);
} 
 /* ------------------------------------------------------------------- 
  * responsive: works
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .folio-list__item-title {
         font-size   : var(--text-md);
         line-height : var(--vspace-0_875);
     }
 
     .folio-list__item-cat {
         font-size : var(--text-xs);
     }
 }
 
 @media screen and (max-width: 1000px) {
     .folio-list__item-title {
         font-size   : var(--text-lg);
         line-height : var(--vspace-1);
     }
 
     .folio-list__item-cat {
         font-size : var(--text-sm);
     }
 }
 
 @media screen and (max-width: 800px) {
     .s-works {
         padding-top    : var(--vspace-4);
         padding-bottom : var(--vspace-3);
     }
 }
 
 @media screen and (max-width: 600px) {
     .folio-list__item-title {
         font-size   : var(--text-md);
         line-height : var(--vspace-0_875);
     }
 
     .folio-list__proj-link {
         right : var(--vspace-0_5);
     }
 }
 
 @media screen and (max-width: 500px) {
     .folio-list {
         --item-min-height : var(--vspace-3_5);
     }
 
     .folio-list__item {
         margin-bottom : var(--vspace-0_75);
     }
 
     .folio-list__item-link {
         padding-left : calc(4.25 * var(--space));
     }
 }
 
 @media screen and (max-width: 400px) {
     .folio-list .column {
         flex  : none;
         width : 50%;
     }
 
     .folio-list__item {
         margin-bottom : 0;
     }
 
     .folio-list__item-link {
         padding-left : 0;
     }
 
     .folio-list__item-pic {
         position : static;
     }
 
     .folio-list__item-pic img {
         max-width : 100%;
         width     : 100%;
         height    : auto;
     }
 
     .folio-list__item-text,
     .folio-list__proj-link {
         display : none;
     }
 }

 /* ===================================================================
  * # CONTACT
  * ------------------------------------------------------------------- */
 
 .contact-top {
     padding-top : var(--vspace-5);
     border-top  : 0.5px solid #626262;
     width: 80%;   
     margin: 0 auto; 
 }
 
 /*feel free to reach line */
 .contact-top .h1 {
     margin-top : 0;
     font-size: 40px; 
     font-weight : 400;
 }
 
 .contact-bottom {
     display: flex;                
     justify-content: space-between; 
     align-items: center;           
 
     padding-bottom : var(--vspace-1);
     margin-top     : var(--vspace-1);
     border-bottom  : 0.5px solid #626262;
     width: 80%;     

 }
 
 .contact-bottom .text-pretitle {
     margin-bottom : 20px;
 }
/*social icon hover*/
.contact-social img,
.contact-social svg {
  width: 48px;
  height: 48px;
  transition: transform 0.5s ease;
  vertical-align: middle;
  display: inline-block;
}

.contact-social a:hover img,
.contact-social a:hover svg {
  transform: scale(1.1);
}
/*-----------------*/

.contact-social {
     line-height : var(--vspace-1_25);
     color       : var(--color-gray-2);
 }
 
 .contact-social a {
     color : var(--color-gray-2);
 }
 
 .contact-social a:focus,
 .contact-social a:hover {
     color: var(--color-1);
 }
 
 .contact-social {
     display: flex;
     gap: 10px; /* Adds 20px space between icons */
     list-style: none;
     margin-left: 0; /* Reset margin-left */
 }
 
 .contact-social li {
     display: inline-block;
 }
 
 .contact-btn {
         margin-left  : auto;
         margin-right : 5vw;
 }

 /* ------------------------------------------------------------------- 
  * responsive: contact
  * ------------------------------------------------------------------- */
 @media screen and (max-width: 1200px) {
     .contact-btn {
         margin-top   : var(--vspace-0_5);
         margin-left  : 0;
         margin-right : 0;
     }
 }
 
 @media screen and (max-width: 800px) {
     .contact-top {
         padding-top : var(--vspace-4);
     }
 }
 /* ===================================================================
  * # FOOTER - Clean & Minimalist
  * ------------------------------------------------------------------- */
 .s-footer {
    background-color: #000000 !important;
    padding: 4rem 0 3rem !important; 
    text-align: center !important;
    width: 100%;
}

.ss-copyright {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important; 
    margin: 0 auto !important; /* Centers it and removes the right margin */
    line-height: 1.8 !important;
    text-align: center !important;
}

.ss-copyright span {
    font-family: var(--font-3) !important; /* Quicksand */
    font-size: 11px !important;            /* Force the tiny elegant size */
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25rem !important;    
    color: var(--color-gray-7) !important;             
    display: block !important;
}

/* Make the link look exactly like the text */
.ss-copyright a {
    color: var(--color-gray-7) !important;
    text-decoration: underline !important;
    transition: color 0.3s ease;
}

.ss-copyright a:hover {
    color: var(--color-1) !important; /* Blue hover */
}

/* Clean up old template symbols */
.ss-copyright span::after {
    display: none !important;
    content: "" !important;
}

/* ------------------------------------------------------------------- 
 * responsive:
 * footer
 * ------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    .ss-copyright span {
        display: block;
    }

    .ss-copyright span::after {
        display: none;
    }
}