/* padding direction: top right bottom left; */

/* REM VS EM and when to use them */
/* REM is relative to the root element (html) */
/* EM is relative to the parent element */

/*---------------------------------------------------*/

html {
    -webkit-font-smoothing: antialiased;
    /* make font smooth */
    -moz-osx-font-smoothing: grayscale;
    /* make font smooth */
    font-size: 16px;
    /* Default font size */
}

body {
    padding-inline: clamp(1.5rem, 5vw, 5rem);
    font-family: "futura-pt", "Arial", "Helvetica Neue", Helvetica, sans-serif;
    font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.75rem);
    /* clamp(1rem, 1.15rem + 0.8vw, 1.5rem) (BACKUP OLD) */
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: 0.02em;
    color: white;
    background-color: #0F2235;
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
    margin: 0 auto;
    /* Remove default margin */

    overflow-x: hidden;
    /* overflow-y: clip; */
    opacity: 0;}

    



/*======= Wait for Header+Footer then load (JS) =======*/
body.loaded {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* .width1880 {
      max-width: 1880px;
      margin: 0 auto;
} */

/*---------------------------------------------------*/
        /* Desk Scroll Animation Keyframes*/
/*---------------------------------------------------*/

.scrollAnimate {
  opacity: 0;
  transform: translate(
    var(--startX, 0),
    var(--startY, 0)
  );

  transition-property: transform, opacity;
  transition-duration: var(--slideSpeed, 1s), var(--fadeSpeed, 1s);
  transition-delay: var(--delay, 0s), var(--delay, 0s);

  /* ADD THESE TWO LINES */
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/*====Keyframe====*/
@keyframes fadeToNeutral {
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.scrollAnimate.is-sliding,
.scrollAnimate.visible {
  transform: translate(0, 0);
}

.scrollAnimate.is-fading,
.scrollAnimate.visible {
  opacity: 1;
}



/*==DESK - HOME ANIMATIONS==*/
.scrollAnim-Home150 { --startY:   150px; } 
.scrollAnim-Home200 { --startY:   200px; }


/*==DESK - PORTFOLIO ANIMATIONS==*/
.scrollAnim-FolioH2  { --startY:  -150px; }
.scrollAnim-FolioP   { --startY:  -150px; }
.scrollAnim-FolioIMG { --startY:   400px; }
.scrollAnim-FolioDSC { --startY:   0; }


/*==DESK - GENERIC ANIMATIONS==*/
/*==Intro Logo/Personal Text&IMG (start btm-->top)==*/
.scrollAnimStart80 { --startY:    80px; } 




/*==BLOCK X ANIMATIONS==*/
/*==Intro About EndLinks (start Lef-->Rig)==*/
.scrollAnimStartX150 { --startX:  150px; }

/*==BLOACK Y ANIMATIONS==*/
/*Preven Y(TB) movement */
.scrollAnimStartY0 { --startY:    0px; }




/*====Transition Delay====*/
.delay0  { --delay: 0s; }
.delay01 { --delay: 0.1s; }
.delay02 { --delay: 0.2s; }
.delay03 { --delay: 0.3s; }
.delay04 { --delay: 0.4s; }
.delay05 { --delay: 0.5s; }
.delay1  { --delay: 1s; }
.delay2  { --delay: 2s; }

/*====Fade Speed====*/
.fadeSpeed0 { --fadeSpeed: 0s; }
.fadeSpeed02 { --fadeSpeed: 0.2s; }
.fadeSpeed05 { --fadeSpeed: 0.5s; }
.fadeSpeed1  { --fadeSpeed: 1s; }

.slideSpeed0 { --slideSpeed: 0s; }
.slideSpeed02 { --slideSpeed: 0.2s; }
.slideSpeed04 { --slideSpeed: 0.4s; }
.slideSpeed06 { --slideSpeed: 0.6s; }
.slideSpeed08 { --slideSpeed: 0.8s; }
.slideSpeed1  { --slideSpeed: 1s; }




/*---------------------------------------------------*/
 /* Desktop and tablet: hide mobile menu and close button */
/*---------------------------------------------------*/

.mobile-menu,
.close-btn,
.burger {
  display: none ;
}




/*---------------------------------------------------*/
           /* Desk - Global Styling */
/*---------------------------------------------------*/

img, video {
    height: 100%;
    width: 100%;
    border-radius: 10px;
}

p {
    margin-bottom: 1.2em;
}


/*======= UL Styling =======*/
ul {
    list-style: none;
    /* Remove default list styling */
    padding: 0;
    /* Remove default padding */
    margin: 0;
    /* Remove default margin */
}


/*======= Link Global Styling =======*/
a {
    position: relative;
    text-decoration: none;
    /* Remove default underline */
    color: inherit;
    /* Keep text color */
    display: inline-block;
    /* Ensures ::after stays within text bounds */
}


/*======= Apply underline on links =======*/
a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #EB5767;
  transition: width .5s ease, background-color .5s ease;
}


/*======= No Underline on here =======*/
.ft_logo a::after,
.footerSocial a::after,
.backToWork::after {
  content: none;
}


/*======= Expand underline on hover =======*/
a:not(.ft_logo a):not(.footerSocial a):hover::after {
    width: 20px;
    /* Underline width */
}




/*---------------------------------------------------*/
                    /* Desk - Global Margins */
/*---------------------------------------------------*/

/*======= Global Page margins L+R (not in header) =======*/
.globalPage:not(header) {
  max-width: 1880px;
  margin: 0 auto;
  padding-top: 5rem;
}




/*---------------------------------------------------*/
                    /*Desk - H1--H6*/
/*---------------------------------------------------*/

h1, h2, h3, h4, h5, h6{
    line-height: 1em;
    margin: 0px;
    font-weight: 400;
}

h1 {
    font-size: clamp(4rem, 0.6067rem + 5.8667vw, 7.5rem);;
    /* Responsive font size Like ELEMENTOR */
    font-weight: 700;
    margin: 0px;
    
}

h2 {
    font-size: clamp(1.3rem, 1.5rem + 1.5vw, 3rem);
    /* Responsive font size Like ELEMENTOR */
}

h3 {
    font-size: clamp(1.5rem, 1.5rem + 1.5vw, 3rem);
    /* Responsive font size Like ELEMENTOR */
}

h4 {
    font-size: clamp(1.5rem, 1.5rem + 1.5vw, 3rem);
    /* Responsive font size Like ELEMENTOR */
}

h5 {
    font-size: clamp(1.5rem, 1.5rem + 1.5vw, 3rem);
    /* Responsive font size Like ELEMENTOR */
}

h6 {
    font-size: clamp(1rem, 1.15rem + 0.8vw, 1.5rem);
    /* Responsive font size Like ELEMENTOR */
    font-weight: 700;
}




/*---------------------------------------------------*/
                    /* Desk - Header */
/*---------------------------------------------------*/

/*======= Header Styling =======*/
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Align items vertically in the center */
    padding: 0px 40px;
    /* Add padding to the left and right */
    height: 86px;
    width: 100%;
    /* Full width */
    position: fixed;
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
    z-index: 1000;
    
    /* Ensure the header is above other content */
}

#headerContainer {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
}

/*======= Header Link Margin =======*/
.menu a {
    margin-left: 30px; 
    /* Header Link margins is done here */
}

/*======= Header FT Logo =======*/
.ft_logo svg {
    display: flex;
    align-items: center;
    width: 180px;
    margin: 0;
    padding: 0;
    z-index: 1003; /* above burger, close button, overlay */   
}

/*======= Remove Border radius from FT Logo =======*/
.ft_logo img {
    border-radius: 0px;
}





.maxWidth100 p{
    max-width: 100%;
}

.padding0 {
  padding:0 !important;
}




/*------------------------------------------------------------*/
/*--------------------------------------------------------------
                      Desk - All Pages
--------------------------------------------------------------*/
/*------------------------------------------------------------*/


/*---------------------------------------------------
                      Desk - Home
---------------------------------------------------*/

/*======= Home - IntroContent =======*/
.IntroContent {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 20em;
}

/*======= Home - Contact+Bio =======*/
.contactLeft {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 25%;
}

.contactLeft a {
    margin: 0px 0px 20px 0px;
    /* Contact Link padding is done here */
}

.bio {
    margin-left: auto;
    /* This pushes the content to the end of page like autolayout set to auto */
    padding: 0px;
    margin: 0px;
    width: 536px;
    /* Width of the bio */
}


/*======= Home - IntroContent =======*/
.portfolio {
    display: flex;
    flex-wrap: wrap;
    /* Allow items to wrap to the next line */
    justify-content: space-between;
    align-items: center;
    /* padding: 0px 0% 5% 0%; */
    gap: 40px;
    /* Space between items */
}

.portfolioItem {
    width: calc(50% - 20px);
    /* Adjust width to fit two items per row with space between 
    ---- WHATEVER GAP IS ON .PORFOLIO -- 
    ---- YOU REMOVE HALF OF IT HERE ----
    ---- EX: - .portfolio: gap: 40px = here make it {width: calc(50% - 20px);
    ----------------------------------*/
    margin-bottom: 20px;
    /* Space between rows */
}

.portfolioItem a {
    display: block; /* Make anchor tag fill the div */
    width: 100%;
}

.portfolio p {
    padding-top: 0px;
    margin: 0px;
    /* Remove default margin */
}




/*---------------------------------------------------
                Desk - Portfolio
---------------------------------------------------*/

.folioSection {
  clip-path: inset(-100px 0 0 0); /* Mask to prevent content from showing outside the section during sticky */
  overflow: clip; /* clip instead of hidden - won't break anything */
}

.folioSectionNoCut {
  padding-top: 12%;
  /* No clip-path here, allowing content to show outside the section */
}

.folioHeader{
  position: relative;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

/*======= Remove txt margins =======*/
.folioHeader h2{
  position: sticky;
  top: 0;
  flex: 0 0 auto;       /* don’t grow, don’t shrink */
  /* white-space: nowrap; */
  padding:4rem 0 0 2rem;
}

.folioHeader p {
  position: sticky;
  top: 0;
  flex: 1 1 50%;       /* take remaining space */
  min-width: 0;
  line-height: 1;
  padding: 4rem 2rem 0 0;
  text-align: right;
}

.txtAlignLeft p {
  text-align: left;
}

.folioHeader img, .folioComb img {
    width: 100%;
    height: auto;
}

.folioComb {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0px;
}

.folioCombimg1 {
    border-radius: 10px 10px 0px 0px;
}

.folioCombimg2 {
    border-radius: 0px 0px 10px 10px;
}

.folioDesc{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14rem 2rem;
    gap: 24px;
}

.folioDescColumn {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 6% 6% 12% 5%;
    gap: 24px;
    width: 100%;
}

.folioDesc.paddingDescTop0 {
  padding-top:4rem;
  padding-bottom: 6rem;
  height: 220px;
}

.marginTop56px {
    margin-top: 56px;
}

.folioLeft{
    position: sticky;
    flex: 1 0 34%;
    top: 120px;
    display: flex;
    max-width: 520px;
    gap: 48px;
    flex-direction: row;
    justify-content: space-between;
}

.descDelivertables{
  width:100%;
}

.descTools
{
  width:100%;
}

.descText{
    max-width: 50%;
}

.descText.nonStandard{
    max-width: 40%;
}

.folioLeft h6{ 
    padding-bottom: 24px;
}

.descText p{
    margin: 0 0px 1.2em 0;
}

.descText p:last-of-type {
  margin-bottom: 0;
}

.folioIMGGeneral img{
    margin-top:40px;
    display: block; /* removes the inline gap */
}

.folioIMGGeneralColumn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    margin-top: 40px;
}

.folioIMGGeneralColumn img {
    width: calc(50% - 20px);
    /* Adjust width to fit two items per row with space between ---- WHATEVER GAP IS ON .PORFOLIO -- YOU REMOVE HALF OF IT HERE EX: - 20px*/
    height: auto;
}




/*---------------------------------------------------
                DeskInsert - EndPage
---------------------------------------------------*/

.endPage {
  pointer-events: auto; 
  /* always clickable */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2rem 4rem;
  opacity: 1;
  transform: translateY(-160px);
}

/*======= Keep Content above page =======*/
.lastFolio{
  z-index: 5;
  position: relative;
}

.endPage a{
    margin: 0px;
}

.contactendPage {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap:20px;
}

.backToWork {
  display: inline-flex; 
  /* inline-flex so it behaves like text and allows flex alignment */
  align-items: center;  
  /* vertically center arrow and text */
  gap: 8px;    
  transition: transform 1s ease; 
  /* smoother movement for the text */               
}

/*======= Move only SVG on hover =======*/
.backToWork svg {
  transition: transform 0.3s ease, fill 0.3s ease;
}

.backToWork:hover svg {
  transform: translateX(-6px); /* SVG moves left more */
  fill: #EB5767; /* your pink color */
}

/*======= Move the textBox on hover, half the distanc =======*/
.backToWork:hover {
  transform: translateX(-8px); /* text moves left less */
  display: inline-flex; /* ensure flex stays active */
}

/*======= Move the text on hover, half the distanc =======*/
.backToWork:hover p{
  transform: translateX(-8px); /* text moves left less */
  transition: 2s ease; /* smoother movement for the text */
  display: inline-flex; /* ensure flex stays active */
}




/*---------------------------------------------------
                Desk - About 
---------------------------------------------------*/

.aboutPage {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 80px;
    padding: 6rem 0 ;
}

.RightAbout p:last-of-type {
  margin-bottom: 0;
}

.RightAbout p:first-of-type {
      margin-top: 0;
}

.LeftAbout{
  max-width: 30%;
  position: sticky;
  top: 180px;
  align-self: flex-start; /* necessary in some browsers */
}

.aboutImage {
  position: relative;   /* <h1> absolute relative to this wrapper */
}

.aboutImage img {
  display: block;
  width: 100%;
  height: auto;
}

.aboutImage h1 {
  position: absolute;
  bottom: 8%; /* distance from bottom of image */
  left: 10%;
  transform: translateX(-50%);
  pointer-events: none;
}

.RightAbout{
  max-width: 58%;
  z-index: 1;
}

.aboutLinks{
  margin-top:4em;
  display: flex;
  flex-direction: column;
  gap: 20px;
}




/*---------------------------------------------------
                DeskInsert - Footer
---------------------------------------------------*/

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center the content */
    padding: 20px 40px;
    /* Add padding to the left and right */
}

#footerContainer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.footerSocial {
    display: flex;
    gap: 20px;
    margin: 0;
    /* Space between items */
}

.footerSocial svg {
    display: block; /* removes inline spacing issues */
}

.footerSocial svg path {
    fill: white;
}

.footerSocial svg:hover path {
    fill: #EB5767;
}


/*===========================================================================*/
                              /* DESK - END */
/*===========================================================================*/








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

/*---------------------------------------------------------------------------
                                   TABLET       
-----------------------------------------------------------------------------*/

@media (min-width: 768px) and (max-width: 1024px) {


/*---------------------------------------------------*/
        /* Tab Scroll Animation Keyframes*/
/*---------------------------------------------------*/

/*==TAB - HOME ANIMATIONS==*/
.scrollAnim-Home150 { --startY:   150px; } 
.scrollAnim-Home200 { --startY:   200px; }


/*==TAB - PORTFOLIO ANIMATIONS==*/
.scrollAnim-FolioH2  { --startY:  -150px; }
.scrollAnim-FolioP   { --startY:   150px; }
.scrollAnim-FolioIMG { --startY:   20px; }
.scrollAnim-FolioDSC { --startY:   200px; }


/*==TAB - GENERIC ANIMATIONS==*/
/*==Intro Logo/Personal Text&IMG (start btm-->top)==*/
.scrollAnimStart80 { --startY:    80px; } 


/*==TAB - DESCRIPTION ANIMATIONS==*/
.scrollAnimStartTabDesc { --startY:    50px; } 
/*==Intro About EndLinks (start Lef-->Rig)==*/




/*---------------------------------------------------*/
                    /* Tab - Header */
/*---------------------------------------------------*/

header {
    padding: 0 36px;
    height: 100px;
}

.ft_logo svg{
    width: 160px;
    z-index: 1003; /* above burger, close button, overlay */
}


/*------------------------------------------------------------*/
/*--------------------------------------------------------------
                      Tab - All Pages
--------------------------------------------------------------*/
/*------------------------------------------------------------*/


/*---------------------------------------------------
                      Tab - Home
---------------------------------------------------*/

.IntroContent {
    gap: 64px;
    /* align-items: flex-start; */
}

.contactLeft {
    padding: 40px 0 40px 0;
    width: 30%;
    gap:24px;
}

.contactLeft a {
    margin: 0px 0px 0px 0px;
    /* Contact Link padding is done here */
}

.bio {
    width: 324px;
    padding: 40px 0 40px 0;
}




/*---------------------------------------------------
                      Tab - About
---------------------------------------------------*/

.aboutPage{
  gap: 60px;
}

.LeftAbout{
  max-width: 40%;
  position: sticky;
  top: 180px;
  align-self: flex-start; /* necessary in some browsers */
}




/*---------------------------------------------------
                      Tab - Portfolio
---------------------------------------------------*/

.folioSection {
  clip-path: inset(-100px -100px -100px -100px);
  overflow: visible;}

.folioHeader.logPerPad{
  padding-top: 1%;
}

.folioHeader h2 {
  padding: 4rem 0 0 1.5rem;
}

.folioHeader p {
    order: 2;
    max-width: 100%;
    padding: 0 0 0 1.5rem;
    text-align: left;
}

.folioDesc {
    padding: 8rem 1.5rem;
}

.folioDesc.paddingDescTop0 {
  height: auto;
}

.folioHeader img {
    order: 1;
}

.folioLeft{
    width: 40%;
    gap: 48px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:flex-start;
}
  
.descText{
    max-width: 60%;
}

.portfolio {
    gap: 30px;
}

.portfolioItem {
    width: calc(50% - 15px);
    /* Adjust width to fit two items per row with space between 
    ---- WHATEVER GAP IS ON .PORFOLIO -- 
    ---- YOU REMOVE HALF OF IT HERE  --*/
    margin-bottom: 30px;
    /* Space between rows */
}

.folioIMGGeneralColumn {
    gap: 30px;
    margin-top: 30px;
}

.folioIMGGeneralColumn img {
    width: calc(50% - 15px);
    height: auto;
}

.folioIMGGeneral img{
    margin-top:30px;
    display: block; /* removes the inline gap */
}




/*---------------------------------------------------
                TabInsert - Footer
---------------------------------------------------*/

footer {
    padding: 20px 36px;
}

}/* <----TabEND*>




/*===========================================================================*/
                              /* TAB - END */
/*===========================================================================*/








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

/*---------------------------------------------------------------------------
                                   MOBILE       
-----------------------------------------------------------------------------*/

@media (max-width: 767px) {


html, body {
    overflow-x: hidden; /* Fix mobil screen size issue */
}

header {
    padding: 0 16px;
    height: 88px;
}



/*---------------------------------------------------*/
        /* Mob Scroll Animation Keyframes*/
/*---------------------------------------------------*/

/*==MOB - HOME ANIMATIONS==*/
.scrollAnim-Home150 { --startY:   150px; } 
.scrollAnim-Home200 { --startY:   200px; }


/*==MOB - PORTFOLIO ANIMATIONS==*/
.scrollAnim-FolioH2  { --startY:  -150px; }
.scrollAnim-FolioP   { --startY:   150px; }
.scrollAnim-FolioIMG { --startY:   20px; }
.scrollAnim-FolioDSC { --startY:   200px; }


/*==MOB - GENERIC ANIMATIONS==*/
/*==Intro Logo/Personal Text&IMG (start btm-->top)==*/
.scrollAnimStart80 { --startY:    80px; } 

/*---------------------------------------------------*/
            /* MOBILE MENU OVERLAY */
/*---------------------------------------------------*/

.menu { display: none; }

  /* Hamburger */
.burger {
  position: fixed;
  top: 28px;
  right: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  height: 24px;
  width: 26px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 101;
}

.burger span {
  display: block;
  height: 3px;
  background: #EB5767;
  border-radius: 2px;
}

/* Burger lines build */
.burger .span1 { width: 26px; }
.burger .span2 { width: 20px; }

/* Close X */
.close-btn {
  position: fixed;
  top: 24px;
  right: 14px;
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 102;
  opacity: 0;
  pointer-events: none;
}

.close-btn span {
  position: absolute;
  display: block;
  width: 26px;
  height: 3px;
  background: #EB5767;
  border-radius: 2px;
}

/* Close X build */
.close-btn span:first-child { transform: rotate(45deg); }
.close-btn span:last-child { transform: rotate(-45deg); }

.burger, .close-btn {
  transition: opacity 0.5s ease;
  }

/* Overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #0f2235;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  /* Animation */
  transition: opacity 0.3s ease;
  z-index: 100;
}

.mobile-menu.active { 
  opacity: 1; 
  pointer-events: auto;
}

.mobile-menu a {
  color: #fff;
  font-size: 2rem;
  margin: 1rem 0;
  text-decoration: none;
  opacity: 0;
  /* Animation */
  transform: translateY(80px);
  transition: opacity 0.5s ease, transform 0.8s ease;
}

.mobile-menu.active a {
  opacity: 1;
  /* Animation */
  transform: translateY(0);
}

/* Animation Staggered delays */
  .mobile-menu.active a:nth-child(1) { transition-delay: 0.1s; }
  .mobile-menu.active a:nth-child(2) { transition-delay: 0.2s; }
  .mobile-menu.active a:nth-child(3) { transition-delay: 0.3s; }

/* Hide hamburger when overlay is active */
  .burger.hidden { display: none; }

/*-----------------------------
      
-----------------------------*/




/*---------------------------------------------------
                      Mob - Home
---------------------------------------------------*/

/*======= HomeMob - IntroContent =======*/
.IntroContent {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height:20em;
  margin-bottom:2em;
  gap: 32px;
  /* margin: 20% 0 20% 0;  */
}

/*======= HomeMob - Contact & BIO =======*/
.contactLeft {
  width: 100%;  
  gap: 8px;
}

.contactLeft a {
  margin: 0 0 8px 0 ;
  /* Contact Link padding is done here */
}

.bio {
  width: 100%;
}

.portfolio {
  gap:24px;
}

.portfolioItem {
  width: 100%;
}




/*---------------------------------------------------
                      Mob - Portfolio
---------------------------------------------------*/

/* .folioSection.tabPadTop10 {
  padding-top: 20%;
} */

.folioSection {
  clip-path: inset(-100px -100px -100px -100px);
  overflow: visible;}

.folioHeader{
  gap:16px;
}

.folioHeader h2 {
  padding: 4rem 1rem 0 1rem;
  flex: 0 1 320px;
}

.folioHeader p {
    order: 2;
    max-width: 100%;
    padding: 0 1rem;
    text-align: left;
    line-height: 1.4em;
}

.folioHeader img {
    order: 1;
}

.folioDesc {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6rem 1rem;
    gap: 64px;
}

.folioDesc.paddingDescTop0 {
  height: auto;
}

.folioLeft{
  gap: 24px;
  justify-content:space-between;
}

.descText {
  max-width: 100%;
}

.descText.nonStandard{
    max-width: 100%;
}

.folioIMGGeneral img:first-child {
    margin-top: 40px;
}

.folioIMGGeneral.paddingTop16 img:first-child {
    margin-top: 16px;
}

.folioIMGGeneral img:not(:first-child) {
    margin-top: 16px;
}

.folioIMGGeneral.breakMobMargin img{
margin-top:16px;
}

.folioDescColumn {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 64px;
}

.folioIMGGeneralColumn img:not(:first-child){
  margin-top: 16px;
}

.folioIMGGeneralColumn img{
  width: 100%;
}

.folioIMGGeneralColumn{
  gap:0;
}

.notFirst {
  margin-top: 16px;
}

.folioComb {
  margin-top:40px;
}

/*---------------------------------------------------
                      Mob - About
---------------------------------------------------*/

.aboutPage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
    padding: 30% 0 5% 0%;
}

.LeftAbout{
  max-width: 100%;
  position: static;
}

.aboutImage img {
  display: block;
  width: 100%;
  height: auto;
}

.RightAbout{
  max-width: 100%;
  margin-inline: 16px;
}

.aboutLinks{
  margin-top:2em;
}



/*---------------------------------------------------
                MobInsert - EndPage
---------------------------------------------------*/

.endPageWrapper {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.endPage {
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 16% 6% 8% 5%;
  box-sizing: border-box; 
}

.endPage a{
  order: 2;
  width: 100%;
}

.contactendPage{
  order: 1;
  padding-bottom: 36px;
}


/*---------------------------------------------------
                MobInsert - Footer
---------------------------------------------------*/

footer {
  padding: 16px 16px;
  height: 32px;
  /* Add padding to the left and right */
}

}