html {
    scroll-behavior: smooth;
  
}


:root {
  --background: #ffffff;
  --background-light: #fafafa;
  --background-dark: #18181d;
  --background-darker: #0e0e0d;
  --background-lighter-45: #ffffff45;
  --background-darker-45: #00000045;
  --text: #18181d;
  --text-shade-2: hsla(240, 9%, 10%, 0.80);
  --text-light: #fafafa;
  --highlight: #41c256;
  --text-links: #18181db5;
  --text-links-2: #707070;

  /* --para-dark:hsla(0, 0%, 0%, 0.754);
  --para-light: hsla(0, 0%, 100%, 0.75);
  --text-shade: #878787;
  --hover: #18181d90;
  --hover-light: #fafafa90;
  --hover-light: hwb(0 90% 10%);
  --divider: hsla(0, 0%, 45%, 0.191); */


  /* Font Size variables */
  --fs-xxxl: 5.61rem;
  --fs-xxl: 4.209rem; 
  --fs-xl: 3.157rem;
  --fs-lg: 2.369rem;
  --fs-md: 1.5rem;
  --fs-sm: 1.25rem;

  --fs-normal: 1rem;
  --fs-xs: 0.813rem;
  --fs-xxs: 0.563rem;
  --fs-xxxs: 0.25rem;


  --fw-800: 800;
  --fw-600: 600;
  --fw-500: 500;
  --fw-400: 400;
  --fw-300: 300;








  /* Font Family variables */
  --ff-title: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  --ff-body: 'Inter', sans-serif;
  /* --ff-heading: 'Noto Serif Display', serif; */
  --ff-heading: "Bricolage Grotesque", sans-serif;

  --ff-heading-v2: "Space Mono", monospace;


}
/* * {box-sizing: border-box;} */

body {
  height: 100%;
  /* height: -webkit-fill-available; */
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  background: var(--background);
  display: block;
  /* min-height: 100vh; */

  margin: 0;
  transition: background 0.2s linear;
  --page-load-time: 500ms;
  transition: background-color 0.2s ease;
  /* overflow: hidden; */
}



  






  

  h1, h2, h3, h4, h5, h6 {
    color: #bebebe;
    font-size: 6rem;
    }

    p {
      color: #bebebe;
      font-size: 1.4rem;
    }
    


span {
  line-height: 1.2;
}










.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.material-icons.md-18 {
  font-size: 18px;
}
.material-icons.md-22 {
  font-size: 22px;
}

.material-icons.md-24 {
  font-size: 24px;
  line-height: 48px;
}
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


.inline-icon {
  vertical-align: middle;
}



















h1, h2, h3, h4, h5, h6, p, a, li, span, i, hr {
  color: var(--text);
}



/* span {
  font-size: 1rem !important;
} */

a {
  text-decoration: none;
  /* cursor: pointer;
  font-size: 1rem;
  padding: 0;
  margin: 0; */

}
a:hover {
  opacity: 70%;
  transition: opacity 0.3s ease-in-out;
}







@media (prefers-reduced-motion: no-preference) {
img, .animate {
  width: 100%;
  /* height: 75%;
  object-fit: contain; */
  scale: .9;  opacity: 0.5;
  animation: fade-in linear forwards;
  animation-timeline: view();
  animation-range: entry;
  
}
}









.dark {
  background: var(--background-dark);
  --text: #fafafa;
  } 
  


h1 {font-size: 6rem;}
h2 {font-size: 5rem;}
h3 {font-size: 4rem;}
h4 {font-size: 3rem;}
h5 {
  font-size: 2rem;
  letter-spacing: 1px;
}
h6 {
  font-size: 1.5rem;
  letter-spacing: 1px;
}
p {
  font-size: 1.25rem;
  line-height: 1.5;
}

 i, .dark {
  color: var(--text-light);
}






.wrapper {
  width: 100%;
  min-height: 100%;
  /* background: #000; */
  overflow: auto;

}




/* ==================== Maintenance ==================== */

.maintenance {

  width: inherit;
  min-height: 100vh;
  background-color: #1e1e1e;
  z-index: 99999;
  
}

.heading {
  position: relative; 
  bottom: 10px;
  left: 40px;
  margin: 50px 0px 10px;

}

.subheading {
  position: relative; 
  bottom: 10px;
  left: 50px;
  margin: 0;
}














nav {
  width: 100%;
  position: fixed;
  z-index: 999;
  transition: all 500ms ease-in-out;
  /* mix-blend-mode: difference; */
  animation: fade-InDown var(--page-load-time) ease-in;
  height: var(--nav-height);
  top: 0;
  left: 0;
  /* background-color: var(--background); */
}

.navbar {
  display: flex;
  justify-content: space-between;
  padding: 12px 25px;
}

.brand a {
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: 500;
  /* font-size: 1.2rem; */
  font-size: var(--fs-sm);
}


  #brand-mob {
    display: none;
    
    }

    
.nav-links ul {
  list-style: none;
}

.nav-links li {
  display: inline-block;
  margin: 0 5px 0 25px;
  font-weight: 500;
  letter-spacing: 1px;
  /* font-size: var(--fs-sm); */
  font-size: clamp(var(--fs-normal), var(--fs-sm), var(--fs-md));
}

.nav-links a, .link-animate-v1 {  
  display: inline-block;
  padding: 0;
  background: none;

  cursor: pointer;

  &:after {
    content: "";
    width: 0; 
    height: 1.5px; 
    background: var(--foreground);
    display: block;
    transition: 0.2s duration, 0.1s delay, with easing;
    transition: width 0.2s 0.1s ease-in-out;
  }
  
  &:hover {
    &::after {
      width: 99%;
    }
  }
}
  

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

header {
  margin: 0;
  padding: 0;
  width: 100%;
}





/* ==================== 404 Page ==================== */

#error {
  background-color: #fafafa;

margin: auto auto;
    width: 100%;
    height: 100vh;

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

  
}



.error-container {
  width: 60%;
  min-height: 50vh;
  z-index: 10;
display: block;
/* flex-wrap: wrap; */
  justify-content: center;
  justify-items: center;
  align-items: center;
  
  
}

.error-container-text{

  align-items: center;
  text-align: center;
} 



.error-btn {
display: block;
position: relative;

margin: 20px auto auto auto;
  align-items: center;
  text-align: center;
  justify-content: center;
  justify-items: center;
  align-items: center;
  border-radius: 100px;
  padding: 10px 20px;
  background-color: rgb(255, 255, 255);
  font-size: 1rem;
  border-width: 2px;
  cursor: pointer;
} 

.error-btn:hover {
  opacity: 0.75;
  border-width: 2px;


}




  



/* ==================== homepage ==================== */


section {
  width: 100%;
  /* height: 100vh; */
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  align-items: normal;
  position: relative;
  animation: fadeInUp 800ms ease-in;
   overflow: hidden;

}


section-1 {

  width: 100%;
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  align-items: normal;
  position: relative;
  animation: fadeInUp 800ms ease-in;
  /* position: -webkit-sticky;
  position: sticky;
  top: 0; */
   overflow: hidden;

}



section-2 {
  /* background-color: darkgreen; */
  /* height: -webkit-fill-available; */
  
  width: 100%;
  /* height: 100vh; */
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  /* margin-bottom:100px; */
  align-items: normal;
  position: relative;
  animation: fadeInUp 800ms ease-in;
  /* position: -webkit-sticky;
  position: sticky;
  top: 0;
   */
   overflow: hidden;
  z-index: 2;
}





#home {
  background-color: #fafafa;

display: flex;
flex-wrap: wrap;
  margin: auto auto;
  width: 100%;
  height: 100%;
  /* height: 100vh; */
  /* height: 100dvh; */
  overflow: hidden;
  /* padding-top: 200px; */
  justify-content: center;
  justify-items: center;
  align-items: center;
}


#hero-img {
  display: block;
}

#hero-img-mob {
  display: none;
  
  }

.hero-img-container {
  background-color: #e2e2e2;
width: 100%;
height: 100vh;

}


.hero-img-full {
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  /* height: auto; */
  height: 100%;
  object-fit: cover;
  object-position: left center;

}


.img-container {
background-color: #c0c0c0;


  /* background-image: url("/images/img1.png"); */

display: flex;
flex-wrap: wrap;
  margin: auto auto;
  width: 100%;
  height: 100vh;
  object-fit: contain;

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


}

.bg {
  background-image: url("/portfolio/eastern-travels/Eastern-Travels-HoiAn-35.jpg");
}

.bg-2 {
  background-image: url("/portfolio/omg-your-english/OMG-Your-English-West-Hills-Los-Angeles-7.jpg");
  
}




/* img {

  width: 100%;
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

} */




/* .img-center img {
  position: absolute;
  width: auto;
  height: auto;
  max-height: 600px;
} */

/* .homepage-info-text p{
position: absolute;
bottom: 25px;
left: 25px;
font-size: 1rem;

} */


.title h1 { 

  font-size: clamp(5vw, 4rem, 7rem);
    font-weight: 600;
}


  .title_bottom {
  /* position: absolute;
  left: 25px;
  z-index: 5;
  text-align: left; */
  height: auto;
  display: flex;
  flex-wrap: wrap;
  /* padding-bottom: 5%; */
  margin-right: auto;
  position: absolute;
  bottom: 30px;
  left: 25px;
  font-weight: 600;
  font-size: clamp(5vw, 4rem, 7rem);

  mix-blend-mode: luminosity;
  color: var(--text);
  }



  .next-project-title h1 { 

    font-size: clamp(2vw, 2rem, 4rem);
    font-weight: 600;
     position: absolute;
      bottom: 30px;
      right: 75px;
}

  .next-project-title:hover { 

   opacity: 60%;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}



  /* .img-grid img{
    max-width: 100%;
    height: auto;
    max-height: auto;
    object-fit: contain;
    object-position: center;
  
  } */






  .arrow{
    /* padding: 10px; */
    animation: bounce 0.6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      /* padding-bottom: 5%; */
      margin-right: auto;
      position: absolute;
      bottom: 30px;
      right: 25px;
      font-weight: 600;
      font-size: 3rem;
      /* mix-blend-mode: difference; */
      color: rgb(0, 0, 0);
      
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(0, 5px, 0); }
}


  .arrow-right{
    /* padding: 10px; */
    animation: bounce-right 0.6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
      height: auto;
      display: flex;
      flex-wrap: wrap;
      /* padding-bottom: 5%; */
      margin-right: auto;
      position: absolute;
      bottom: 30px;
      right: 25px;
      font-weight: 600;
      font-size: 3rem;
      /* mix-blend-mode: difference; */
      color: rgb(0, 0, 0);
      
}

@keyframes bounce-right {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(10px, 0, 0); }
}





    
    








/* Information ==================== */


#information {

/* display: block; */
  /* margin: auto auto; */
  width: 100;
  height: auto;
  /* justify-content: center;
  justify-items: center;
  align-items: center; */
    margin: 50px 0px;

  
}



.container {
  width: 100%;
  margin: 50px 30px;
  height: auto;

}



.grid-container {
  margin: 100px 2%;

  
}





.grid-1 {
  box-sizing: border-box;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;


}












.card-cover {
  width: 100%;
  border-radius: 0;
  flex-direction: column;
  flex: 0 auto;
  display: flex;
  position: relative;
  overflow: hidden;
  
}

.main-card {
  grid-row-gap: 12px;
  border: 1px solid #fff;
  border-radius: 6px;
  flex-direction: column;
  text-decoration: none;
  transition: all .2s;
  display: flex;

}

.inner-image {
  width: 100%;
  flex-direction: column;
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;

}




.grid-img {
    z-index: 2;
    width: 100%;
    object-fit: contain;
    position: relative;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
}

.grid-img img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  
}





.project-title {

  font-size: 1rem;
  letter-spacing: 0;
}


  .information-section {
    width: 70%;
    padding-bottom: 50px;
    font-size: var(--fs-sm);
  }



  .profile-pic {
    position: absolute;
    right: 25px;
    width: 25%;
    padding-bottom: 10px;
    height: auto;
    z-index: 2;
    object-fit: contain;
  }


.span-heading {
  font-weight: 600;
  padding-bottom: 10px;
}






footer {

  width: 100%;
  height: auto;

  overflow: hidden;
  
}

.footer-container {
  padding: 150px 25px;



}


/* .footer-grid-3 {
  
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  grid-row-gap: 15px;
  grid-column-gap: 30px;
} */

/* .grid-3 {
    width: 100%;
    height: auto; 
  } */

.grid-3-cell {

      width: 70%;
      height: 100%;
      margin-top: 0vw;
      margin-bottom: 0vw;
      font-size: 1.25rem;
    }
    
.grid-3-container {
  width: auto;
  font-size: 1.25rem;
}


























/* NEW Section for grids */
/* ==================== sections ==================== */


/* homepage - index --------------------*/
section {

  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  /* padding-bottom: 100px; */
  /* margin-bottom:100px; */
  align-items: normal;
  position: relative;
  animation: fadeInUp 800ms ease-in;
  /* position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: visible; */
}



.section-projects {
  position: relative;
  width: 100%;  
}



img {

  width: 100%;
  max-height: auto;
  max-width: 100%;
  /* height: auto; */
  height: auto;
  object-fit: cover;
  /* object-position: center; */

}






/* NEW grid new in place of swiper ----------------------------------- */

/* ====================== Gallery Grid ===================== */

.gallery-grid {
  grid-row-gap: 16px;
  grid-template-rows: auto auto auto auto auto auto auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  position: relative;
}


.w-layout-grid-2  {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
  grid-auto-columns: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  display: grid;
  position: relative;
  gap:20px;
  
}



.is-des-txt {
    text-transform: uppercase;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 16px;
    font-family: var(--ff-heading-v2);
    font-size: var(--fs-xs);
    line-height: 120%;
}

.auto-fit {
  grid-template-columns: repeat(auto-fit,
          minmax(180px, 1fr));
}


.w-node-1 {
  grid-area: span 1 / span 3 / span 1 / span 2;
}

.w-node-2 {
    grid-area: span 1 / span 1 / span 1 / span 1;

}


.w-node-3 {
  grid-area: span 1 / span 2 / span 1 / span 2;
}


.w-node-4{
  grid-area: span 1 / span 1 / span 1 / span 1;
}

.w-node-5 {
  grid-area: span 2 / span 3 / span 2 / span 3;
}


.w-node-6 {
  grid-area: span 2 / span 3 / span 2 / span 3;
}

/* ---- grid ---- */

.grid {
  background: #EEE;
  /* max-width: 1200px; */
  width: auto;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 160px;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}

.grid-item--width2 { width: 320px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }

.grid-item--height2 { height: 300px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 360px; }













/* icons ------------------------------------------ */

.slideshow-icon {
 width: 20px;
 height: 15px;
}
.thumbnail-icon {
  width: 20px;
  height: 15px;

}



/* thumbnail ------------------------------------------ */

.thumb-btn {
position: absolute;
right: 20px;
top: 75px;
z-index: 10;
font-size: 1rem;
border: none;
background-color: #ffffff00;
cursor: pointer;
}









/* imnage sizes */

/* .img-full img{
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.img-port img {
  width: 28%;
  
}

.img-port-x3 img {
  width: 20%;
}
.img-port-67-x3 img {
  width: 25%;
}

.img-land img {
  max-width: 50%;
} */


/* .slide-no {
  font-size: 12px;
  align-items: left;

} */






/* subtitle was originally fixed */
.subtitle {
position: absolute;
left: 25px;
bottom: 20px;
text-align: left;
font-size: 1rem;
}








/* Overview Page ----------------------------------------- */

.content-wrapper {
  background: #7a4343;
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  
  
  
}

.thumbs-wrapper {
  
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-items: center;
  align-content: center;
  position: fixed;
  overflow: auto;
  overflow-x: hidden;
  

  
  

}


.thumbs-list {
  position: absolute;
  display: block;
  padding: 5% 0;
  top: 1em;
  width: auto;
  height: auto;
  margin: 0 auto;
  justify-content: center;
  justify-items: center;
  align-items: center;
  text-align: center;

  z-index: 2;

}





.thumb-item, #thumb-item {
  /* background-color: rgba(0, 0, 255, 0.291); */
  display: inline-block;
}
.thumb-item:hover {
  opacity: 60%;
  -webkit-transition: opacity 250ms ease-in-out;
  transition: opacity 250ms ease-in-out;

}



.thumb-img {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: 160px;
  min-height: 70px;
  padding: 25px;
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
}

.thumb-img-overview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 160px;
  min-height: 70px;
  padding: 35px;
  transition-property: opacity;
  transition-duration: 250ms;
  transition-timing-function: ease-in-out;
  object-fit: contain;
}






/*************************** Tablet *********************************/

/************* On screens that are 992px or less, set for Tablets ****************/
@media screen and (max-width: 992px) {
  /* show it on small screens */

  #brand-desktop {
    display: none;
    
    }
  #brand-mob {
    display: block;
    
    }





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

  
  

    
    .nav-links li {
    /* display: block; */
    letter-spacing: 0px;
    font-weight: 500;
    font-size:  var(--fs-normal);
    }













  .grid-1 {
    box-sizing: border-box;
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  
  
  }



  
}





/* Footer Tablet -----------------------------------*/



.footer-container {
  
  position: relative;
  width: 100%;
  height: auto;
}

.footer-grid-3 {
  
  display: -ms-grid;
  display: grid;
  grid-auto-columns: 1fr;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: auto auto;
  grid-template-rows: auto auto;
  grid-row-gap: 15px;
  grid-column-gap: 30px;
}

    
.grid-3-container {
  width: auto;
  font-size: 1.25rem;
  
}

/* On screens that are 734px or less*/
/********************* Mobile Landscape **********************/
@media only screen and (max-width: 734px) and (orientation: landscape) {
  
  /* Homepage Intro Mobile Landscape ============================== */

  .footer-container {
    position: relative;
  
  }










/* imnage sizes */

.img-full img{
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  /* height: auto; */
  height: 100%;
  object-fit: cover;
  object-position: center;

}
.img-port img {
 max-width: 95%;
 width: 100%;
max-height: 650px;
}

.img-port-x2 img {
  width: 50%;
}
.img-port-x3 img {
  width: 30%;
}
.img-port-67-x3 img {
  width: 30%;
}

.img-land img {
  width: 100%;
  max-width: 95%;
}
/* subtitle was originally fixed */
.subtitle {
position: absolute;
left: 25px;
bottom: 20px;
text-align: left;
font-size: 0.9rem;


}

.subtitle, .swiper-thumbs, .swiper-pagination {
  font-size: 0.9rem !important;
  
  }



.is-des-txt {
    text-transform: uppercase;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 16px;
    font-family: var(--ff-heading-v2);
    font-size: var(--fs-xs);
    line-height: 120%;
}






  .thumb-item, #thumb-item {
    display: inline-block;
  }
  .thumb-item:hover {
    opacity: 60%;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
  
  }
  
  
  
  .thumb-img {
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 140px;
    min-height: 70px;
    padding: 10px;
    transition-property: opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
  }

}








/* On screens that are 600px or less*/
/* @media screen and (min-width: 360px) and (max-width: 600px) { */

/****************** Mobile Portrait e.g 480 *************************/
@media only screen and (min-width: 0) and (max-width: 480px) {
  

  #brand-desktop {
    display: none;
    
    }

  #hero-img {
    display: none;
  }

  #hero-img-mob {
    display: block;
    
    }
  









  /* Navigation Mobile Portrait =============================== */
    

  .navbar {
    width: auto;
  
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 20px;
  
  }



  .nav-links {
    display: inline-block;
    flex-wrap: wrap;
  }
  
  .nav-links a {
    text-decoration: none;
    
    margin-left: 5px;
    padding: 0px 0px 0px 0px; 


  }
  .nav-links a:hover {
   /* color: pink; */
   color: rgba(223, 223, 223, 0.429);
   color: var(--text-links);
   transition-duration: 200ms;
   
  }





  
  
    .nav-links ul {
    list-style: none;
    
    }
    
    .nav-links li {
    
    /* display: block; */
    letter-spacing: 0px;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 3px 0;
    /* line-height: 1.2; */
    }




    .container {
  width: 100%;
  margin: 75px 20px;  
}


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



.profile-pic {
  position: relative;
  width: auto;
  height: auto;
  z-index: 2;
  object-fit: contain;
    margin: 20px auto;
    right: auto;
   
}

.information-section {
  width: 100%;

 
}

.information-section p {
 /* font-size: 1rem; */
 padding-bottom: 20px;
 
}









.grid-1 {
  box-sizing: border-box;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: grid;


}




  .swiper-slide-container img {

    width: 50%;
    max-width: 45%;
    height: 100%;
    max-height: 650px;
  }




    .next-project-title h1 { 
    /* font-size: clamp(2vw, 2rem, 4rem); */
    font-size: 24px;
    font-weight: 600;
     position: absolute;
      bottom: 30px;
      right: 75px;
}

  .next-project-title:hover { 

   opacity: 60%;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
}


  .arrow-right{
  
      bottom: 30px;
      right: 25px;
      font-weight: 600;
      font-size: 2rem;
      
}

@keyframes bounce-right {
  from { transform: translate3d(0, 0, 0);     }
  to   { transform: translate3d(10px, 0, 0); }
}




/* Grid galleries  =========================================  */
.gallery-grid {
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  position: relative;
}


.w-layout-grid-2  {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto;
  /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr;
  display: grid;
  position: relative;
  gap:20px;
  
}

.w-node-1, .w-node-2, .w-node-3, .w-node-4, .w-node-5, .w-node-6 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}










/* imnage sizes */

.img-full img{
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  /* height: auto; */
  height: 100%;
  object-fit: cover;
  object-position: center;

}
.img-port img {
 max-width: 95%;
 width: 100%;
max-height: 650px;
}

.img-port-x2 img {
  width: 50%;
}
.img-port-x3 img {
  width: 30%;
}
.img-port-67-x3 img {
  width: 30%;
}

.img-land img {
  width: 100%;
  max-width: 95%;
}


/* subtitle was originally fixed */
.subtitle, .swiper-thumbs, .swiper-pagination {
font-size: 0.9rem !important;

}








.swiper-pagination, .swiper-pagination-fraction, .swiper-pagination-horizontal, .swiper-pagination-current, .swiper-pagination-total {
  font-size: 0.9rem !important;
  right: 20px;

}





/* subtitle was originally fixed */
.subtitle {
  position: absolute;
  left: 20px;
  bottom: 20px;
  text-align: left;

  }



    
/*   
  
  .thumbs-list {
    position: absolute;
    background:#fafafa;
    display: block;
    padding: 5% 10px;
    top: 4em;
  
    width: 100%;
    height: auto;
    margin: 0 auto;
    justify-content: center;
    justify-items: center;
    align-items: flex-start;
    text-align: center;
    z-index: 2;
  
  } */
  
  
  
.thumbs-list {

  padding: 100px 10px;
  top: 1em;
}
  
  
  .thumb-item, #thumb-item {
    display: inline-block;
  }
  .thumb-item:hover {
    opacity: 60%;
    -webkit-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
  
  }
  
  
  
  .thumb-img {
    display: inline-block;
    width: auto;
    height: auto;
    max-height: 100px;
    min-height: 70px;
    padding: 10 px;
    transition-property: opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
  }

  .thumb-img-overview {
    display: block;
    width: 100%;
    height: auto;
    max-height: 320px;
    min-height: 100px;
    padding: 25px;
    transition-property: opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
    object-fit: contain;
  }

}

















/* animations----------------------------------------------*/
/* fade-in animation */
@keyframes fade-InDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
/* Title copyright and text hint animation fade-InUp */

@keyframes fadeInUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.fade {
  transition: opacity 0.8s ease-in;
}
.fadeOut {
  opacity: 0;
}
.fadeIn {
  opacity: 1;
}









/* images fade-in */
@keyframes fade-in {

  to {
    scale: 1;
    opacity: 1;
  }
}