/*Alexrivera.vegas - neilmclean.com - portfolio code*/
/*Copyright 2024 Estebagel*/

/* General Styles */
html, body {
    overflow-x: auto; /* Allow horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    height: 100%; /* Ensure full height */
  }
  
  /* Footer Styles */
 /* .footer-credits, .footer-credits-text {
      color: #000000 !important;
    background-color: #fbfbfb !important;
  }
  */
  /*#colophon {
          color: #fbfbfb;
    background-color: #fbfbfb;
  }
  */
  /* Position the menu in the bottom right corner */
  .elementor-widget-uael-nav-menu {
    position: fixed; /* Fixes the position to the viewport */
    bottom: 0; /* Align to the bottom of the screen */
    right: 0; /* Align to the right of the screen */
    z-index: 1000; /* Ensure the menu appears on top of other elements */
    padding: 20px; /* Optional padding around the menu */
  }
  
  /* Style for the menu items (optional) */
  .uael-nav-menu {
  
    border-radius: 8px; /* Rounded corners */
    padding: 10px;
  }
  
  .uael-menu-item {
    color: #fff; /* Menu item text color */
    text-decoration: none; /* Remove underline from links */
    padding: 10px 15px; /* Add some padding to the menu items */
  }
  
  .uael-menu-item:hover {
    color: #00ff5a; /* Change color on hover */
  }
  
  #mobile-vertical-menu {
    position: fixed; /* Fixes the position to the viewport */
    bottom: 0; /* Align to the bottom of the screen */
    left: 0; /* Align to the left of the screen */
    width: 75%; /* Take up the full width of the screen */
    z-index: 1000; /* Ensure it's on top of other elements */
    padding: 85px 0;
    text-align: left;
      max-width: fit-content;
  }
  /* For desktop */
  @media (min-width: 1025px) {
    .elementor-custom-embed-image-overlay img {
      width: 100vw; 
      height: 100vh;
      object-fit: cover; 
      object-position: center; 
    }
  }
  
  /* For mobile devices and tablet */
  @media (max-width: 1024px) {
    .elementor-custom-embed-image-overlay img {
      width: 100vw; 
      height: 100vh;
      object-fit: cover; 
      object-position: center; 
    }
  }
  
  .elementor-custom-embed-image-overlay {
    pointer-events: none; /* Disable clicking on the overlay */
  }
  
  .elementor-custom-embed-play {
  
      pointer-events: auto; /* Enable clicking only on the play button */
  }
  @media (min-width: 1260px) {
  .elementor-custom-embed-play {
  
      position: absolute;
    top: clamp(25%, 50%, 25vw); /* Vertically center */
    left: 50%; /* Horizontally center */
    transform: translate(-50%, -50%); /* Perfectly center the button */
    z-index: 1001; /* Ensure it stays on top of other elements */
    pointer-events: auto; /* Optional: Ensure the button isn't interactable */
  }
  }
  .elementor-wrapper {
    position: relative; /* Ensure the play button is positioned relative to the wrapper */
  }
  
  
  
  
  
  
  
  
  /* Page and Navigation */
  .body-architect {
    border: 0;
    height: 100%;
  }
  
  /* page-architect {}*/
  
  /* Navigation */
  .nav-architect {
    float: left;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 998;
    width: 200px;
    min-height: 550px;
    left: 50px;
    opacity: 0.95;
  }
  
  .nav-container-architect {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 550px;
    text-align: left;
    margin-top: -275px;
    overflow: visible;
  }
  
  .nav-container-top-architect {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: static;
  }
  
  /* Text Wrap */
  .text-wrap {
    word-wrap: break-word; /* For older browsers */
    overflow-wrap: break-word; /* Modern equivalent */
    white-space: normal; /* Prevents unnecessary padding */
  }
  
  /* Elementor Widget Styling */
  .elementor .elementor-widget.selection-architect a:hover {
    color: #00ff5a; /* Hover color */
  }
  
  .elementor .elementor-widget.selection-architect-selected {
    color: orange; /* Visited link color */
  }

  
  
  /* Content and Layout */
  .content-main-architect {
    margin-left: 280px;
    opacity: 1;
    overflow-x: visible;
    min-height: 510px;
    height: 510px;
  }
  
  /* Media Queries */
  @media (min-width: 768px) {
    .content-main-architect {
      min-height: 580px;
      height: 80vh;
    }
  }
  
  @media (min-width: 1025px) {
    .content-main-architect {
      min-height: 580px;
      height: 80vh;
    }
  }

  @media (min-height: 1000px) {
    .content-main-architect {
      min-height: 580px;
      height: 82vh;
    }
  }
  
  /* Clearfix for Horizontal Scrolling */
  .clearfix-architect {
    overflow-x: auto;
    overflow-y: hidden;
    margin-left: -280px;
  }
  
  @media (min-width: 768px) {
    .clearfix-architect {
      padding-left: 280px;
    }
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect {
      padding-left: 280px;
    }
  }
  
  
  /* Clearfix for Horizontal Scrolling that is google */
  .clearfix-architect-google {
    overflow-x: auto;
      overflow-y: hidden;
    margin-left: -280px;
  }
  
  @media (min-width: 768px) {
    .clearfix-architect-google {
      padding-left: 280px;
    }
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect-google {
      padding-left: 280px;
    }
  }
  
  
  
  /* Asset Containers for Different Scroll Behaviors */
  .assets-architect {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  .assets-architect h3 {
     padding-left: 0px;
  } 
  
  .assets-architect h1, 
  .assets-architect h2, 
  .assets-architect h3, 
  .assets-architect h4, 
  .assets-architect h5, 
  .assets-architect h6,
  .assets-architect p, 
  .assets-architect div {
    white-space: normal; /* Allow text inside to wrap */
    word-wrap: break-word; /* Ensure long words break appropriately */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
  }
  
  @media (min-width: 768px) {
    .assets-architect {
        width: max-content;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
  }
  
  /* The class for google drive api */
  @media (min-width: 768px) {
    .assets-architect-google {
        width: max-content;
        touch-action: pan-x;
        height: 100vh;
            overflow-x: inherit;
        white-space: nowrap;
    }
  }
  
  .assets-architect-dungeon {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  .assets-architect-dungeon h3 {
     padding-left: 0px;
  } 
  
  .assets-architect-dungeon h1, 
  .assets-architect-dungeon h2, 
  .assets-architect-dungeon h3, 
  .assets-architect-dungeon h4, 
  .assets-architect-dungeon h5, 
  .assets-architect-dungeon h6,
  .assets-architect-dungeon p, 
  .assets-architect-dungeon div {
    white-space: normal; /* Allow text inside to wrap */
    word-wrap: break-word; /* Ensure long words break appropriately */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
  }
  
  @media (min-width: 768px) {
  .assets-architect-dungeon {
    width: 4727px;
    touch-action: pan-x;
    height: 100vh;
    overflow-x: auto;
    white-space: nowrap;
    }
  }
  
  .assets-architect-making {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  .assets-architect-making h3 {
     padding-left: 0px;
  } 
  
  .assets-architect-making h1, 
  .assets-architect-making h2, 
  .assets-architect-making h3, 
  .assets-architect-making h4, 
  .assets-architect-making h5, 
  .assets-architect-making h6,
  .assets-architect-making p, 
  .assets-architect-making div {
    white-space: normal; /* Allow text inside to wrap */
    word-wrap: break-word; /* Ensure long words break appropriately */
    overflow-wrap: break-word; /* Modern equivalent of word-wrap */
  }
  
  @media (min-width: 768px) {
    .assets-architect-making {
        width: 50727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
  
  
    .assets-architect-making .elementor-widget-container img {
      height: 650px; /* Set a consistent height for all images */
      width: auto;  /* Allow width to vary to maintain aspect ratio */
      display: inline-block; /* Keep images in a horizontal row */
      vertical-align: center; /* Align images to the top */
    }
  
    .assets-architect-making .elementor-widget-container {
      display: inline-block; /* Ensure the container also maintains horizontal layout */
      vertical-align: top; /* Align container to the top */
    }
  }
  .assets-architect-zobot {
    width: 100vw;
    touch-action: pan-y;
    height: auto;
    overflow-y: auto;
    white-space: nowrap;
  }
  
  @media (min-width: 768px) {
    .assets-architect-zobot {
        width: 10727px;
        touch-action: pan-x;
        height: 100vh;
        overflow-x: auto;
        white-space: nowrap;
    }
      
      .assets-architect-zobot .elementor-widget-container img  {
      height: 500px; /* Set a consistent height for all images */
      width: auto;  /* Allow width to vary to maintain aspect ratio */
      display: inline-block; /* Keep images in a horizontal row */
      vertical-align: center; /* Align images to the top */
    }
  
    .assets-architect-zobot .elementor-widget-container {
      display: inline-block; /* Ensure the container also maintains horizontal layout */
      vertical-align: top; /* Align container to the top */
    }
  }
  
  
  /* Elementor Elements inside Asset Containers */
  .assets-architect > .elementor-element,
  .assets-architect-works > .elementor-element,
  .assets-architect-works-short > .elementor-element,
  .assets-architect-works-mid > .elementor-element {
    display: inline-block;
    height: 100%;
    vertical-align: top; /* Ensure vertical alignment */
  }
  
  /* Image Styles */
  .assets-architect img,
  .assets-architect-works img,
  .assets-architect-works-short img,
  .assets-architect-works-mid img {
    height: 100%; /* Fill height of parent */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Removes inline-block space below the image */
  }
  
  /* Footer Styling */
  .footer-credits {
    color: #141414;
    background-color: #141414;
  }
  
  .footer-credits-text {
    color: #939393;
    background-color: #141414;
  }
  
  /* Academic History Section */
  .content-main-architect-y {
    opacity: 1;
    overflow-y: auto;
    min-height: 510px;
    height: 510px;
  }
  
  @media (min-width: 768px) {
    .content-main-architect-y {
      margin-left: 280px;
      min-height: 580px;
      height: 80vh;
    }
  }
  
  @media (min-width: 1025px) {
    .content-main-architect-y {
      margin-left: 280px;
      min-height: 580px;
      height: 80vh;
    }
  }

  @media (min-height: 1000px) { /* Desktop */
    .content-main-architect-y{
      height: 82vh;
  
  }
  }

  @media (min-width: 1840px) {
    #yourDiv {
      --content-width: unset;
    }
  
  }
  
  /* Clearfix for Vertical Scrolling */
  .clearfix-architect-y {
    overflow-y: scroll;
  }
  
  @media (min-width: 768px) {
    .clearfix-architect-y {
      margin-left: -280px;
      padding-left: 280px;
    }
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect-y {
      margin-left: -280px;
      padding-left: 280px;
    }
  }
  
  /* Additional Asset Containers */
  .assets-architect-y {
    height: 2400px;
    touch-action: pan-y;
  }
  
  .content-main-architect-items-y {
    min-height: 620px;
    height: 750px;
  }
  
  @media (min-width: 1025px) {
    .assets-architect-items-scroll-y {
      max-height: 45px !important;
      overflow: auto;
    }
  }
  
  /* Another Academic Section */
  .content-main-architect-xy {
    opacity: 1;
    overflow-y: auto;
    min-height: 510px;
    height: 510px;
  }
  
  @media (min-width: 768px) {
    .content-main-architect-xy {
      min-height: 550px;
      height: 550px;
    }
  }
  
  @media (min-width: 1025px) {
    .content-main-architect-xy {
      margin-left: 280px;
      min-height: 550px;
      height: 550px;
      overflow-x: visible;
    }
  }
  
  .clearfix-architect-xy {
    overflow-y: scroll;
  }
  
  @media (min-width: 1025px) {
    .clearfix-architect-xy {
      height: auto;
      overflow-x: scroll;
      margin-left: -280px;
      padding-left: 280px;
    }
  }
  
  .assets-architect-xy {
    height: 2400px;
    touch-action: pan-y;
  }
  
  @media (min-width: 1025px) {
    .assets-architect-xy {
      width: 7227px;
      touch-action: pan-x;
    }
  }
  
  /* Additional Asset Work Containers */
  .assets-architect-works-xy {
    width: 10000px;
    touch-action: pan-x;
  }
  
  .grid-content-xy {
    height: 500px;
    min-height: 600px;
  }