/* ////////////////////////////runner layout///////////////////////////////// */
   /* height: calc(80vh - 110px);Adjust height to account for header */

.runner-layout{
position: relative;
   width:100%;
  /* height: calc(85vh - 165px); */
  height: 100%;
display: grid;
grid-template-columns:1fr 3fr ;
/* border: 1px solid yellow; */
     overflow:auto;
      scroll-behavior: smooth; 
}




/* ////////////////////////////runner layout///////////////////////////////// */
@font-face {
  font-family: 'MyFont_impact';
  src: url('./myfonts/Impact.ttf') format('truetype');
       
}

@font-face {
  font-family: 'MyFont_arial';
    src: url('./myfonts/ArialBlack.ttf') format('truetype');

       
}




.frame-ico{position: relative;}
.frame-ico span
{
  width: 100%;
  height: 100%;
position:absolute;
display: grid;
justify-content: center;
align-content: center;
z-index: 2;
color: #EAECEE;
border: 1px solid white;
font-family:'MyFont_impact';
font-size:x-large;
 
  -webkit-text-stroke: 2px black;   /* Outline size and color */
}


.section-left{
transition: background-color 0.3s, color 0.3s;
 width: 100%;
height: 100%;
position:relative;
display: flex;
justify-content: center;
 /* background-color: rgba(255, 255, 255, 0.7); White background, 60% opacity */
 background-color:var(--deep-color);
}
.section-right{
  transition: background-color 0.3s, color 0.3s;
position:relative;
 width: 100%;
height: 100%;

  display: flex;
  flex-direction: column;
  background-color:var(--cool-color);
  align-items: center;
/* border: 1px solid black; */
 
}
.thumbnails{
  position:relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 4% auto 0 auto;
  width:90%;
  height:90%;
  gap: 8px;
  overflow:auto;
  scroll-behavior: smooth; 
  justify-items: center;
  align-content:start;
  padding-top:3%;
}
.square img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position:center center;

}       
.thumbnails img{
position:relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width:140px;
 cursor: pointer;
}



.Up-left{clip-path: polygon(0% 0%,0% 100%,100% 0%);background-color: #7d7777;}   
.Dwn-right{clip-path: polygon(100% 0%,100% 100%,0% 100%);background-color: #a4a4a4;}
.Up-right {clip-path: polygon(0% 0%,100% 0%,100% 100%)  ;background-color: #3c3c3c;}
.Dwn-left {clip-path: polygon(0% 0%,0% 100%,100% 100%)  ;background-color: #969796;}

.Up-left,.Dwn-right,.Up-right,.Dwn-left,.triangle-top{
width:100%;
height:100%;
position: absolute;
}
.square{
position: relative;
width: 100%;
height: 100%;

}
.plain{
  background-color:rgb(237, 236, 236);
}
  .design-space{    
  position:relative;
    /* margin: 1.4% auto 0 auto; */
  margin-top: 1.4%;
  display: flex;
  width:96%;
  padding: 2%;
  align-items: center;
  justify-content: center;
  border: 1px solid #bcbcbc;
  background-color: white;
  background-image: 
    linear-gradient(45deg, #ccc 25%, transparent 25%), 
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);


    }
.the-runner-h {
  display:block; /* show the horizontal runner  */
  position:relative;
  display: grid;
  aspect-ratio: 903/281;
  width: 100%;
  max-width: 903px;
  cursor: zoom-in;
  transition: transform 0.8s ease;
  grid-template-areas:
    "frame-top     frame-top           frame-top"
    "frame-left    patchwork-design    frame-right"
    "frame-bottom  frame-bottom        frame-bottom";
  grid-template-columns:3.89% 1fr 3.89%;
   
}
 .patchwork-design-h{
    grid-area:patchwork-design;
    display: grid;
    aspect-ratio: 833 / 211;
    width: 100%;
    max-width: 833px;
    grid-template-columns: repeat(12,1fr); /* 12columns */
    }
.frame-top-h, .frame-bottom-h {
      
    aspect-ratio:903/35;
    width: 100%;
    max-width: 903px;
    background-color: #790316;

}
 .frame-right-h, .frame-left-h{
 
 aspect-ratio:35/211;
    width: 100%;
    max-width: 35px;
    background-color: #790316;
 
 }
.frame-right-h,.frame-left-h,.frame-top-h,.frame-bottom-h
{

    background-image: url('./img-project001/3.jpg'); /* الصورة الافتراضية */
    /* Make sure 28.jpg exists in the project folder or update the path below if needed */
    /* Example: background-image: url('./images/28.jpg'); */
    background-repeat: repeat;
    background-size: 70px auto;
}
.frame-top-h
{
grid-area: frame-top;
}
.frame-right-h
{
    grid-area: frame-right;
}
.frame-left-h
{
    grid-area: frame-left;
}
.frame-bottom-h
{
    grid-area: frame-bottom;
}
.the-runner-h.zoomed {
  position:fixed;
  top: 50%;
 left:50%;

  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center center;
  cursor: zoom-out;
  overflow: auto;
  width: 60vw;
  max-height: 60vh;
  z-index: 100;




}

.row_one, .row_two, .row_three{
  width: 100%;
  display: flex;
  justify-content:space-evenly;
  gap: 5px;
  align-items: center;
}
.info_table{
   width:95%;
   margin-top: 4%;
}

.info_table p{
    color:var(--text-color);
    display: flex;
    aspect-ratio: 1/1;
    width: 100%;
    max-width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
}
.p-title{ font-family: 'MyFont_impact', sans-serif;font-size: xx-large;color: var(--text-color);}
   
    
.row_one  {background-color:var(--deep-color);}
.row_two  {background-color: var(--cool-color);}
.row_three{background-color:var(--deep-color);}
.row_one img{aspect-ratio:1/1;width: 100%;max-width:50px;border: 1px solid ;border-color: var(--text-color);}
.strip{aspect-ratio: 50/15;width: 100%;max-width: 50px;background-color: #790316;  background-repeat: repeat;
    background-size: 50px auto;border: 1px solid ;border-color: var(--text-color);}

.info-table-vertical{
  display: none;
}



/* @media (max-width: 912.98px)  */
 
@media screen and (max-width: 912.98px),  (min-width: 1000px) and (min-height: 1000px) {
 
/* For screens smaller than 911.98px, show the vertical runner and hide the horizontal runner */

.info_table{
  display: none;
}
.row_one{
  display: flex;
}
.thumbnails {
        grid-template-columns: repeat(1, 1fr);
        justify-self: center;
      
       
      }
 .design-space{
  position: relative;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.2);
    width:90%;
    height:90%;
     box-sizing: border-box;
     padding-bottom: calc(281 / 903 * 40%);
     padding-top: calc(281 / 903 * 40%);
    

    }  

.the-runner-h{
display: none; /* hide  the horizontal runner  */
}
 
  .patchwork-design-v{
    grid-area:patchwork-design-v ;
    display: grid;
    aspect-ratio: 211 / 833;
    width: 100%;
    max-width: 211px;
    
    grid-template-columns: repeat(3,1fr); /* 3columns */
    }
.frame-top-v
{
grid-area: frame-top-v;
}
.frame-right-v
{
    grid-area: frame-right-v;
}
.frame-left-v
{
    grid-area: frame-left-v;
}
.frame-bottom-v
{
    grid-area: frame-bottom-v;
}
.the-runner-v.zoomed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5);
  transform-origin: center center;
  cursor: zoom-out;
  overflow: auto;
  width: 60vw;
  height: 60vh;
  z-index: 2;
}

.frame-top-v, .frame-bottom-v {
    aspect-ratio:35/833;
    width: 100%;
    max-width: 35px;
}
 .frame-right-v, .frame-left-v{
 
 aspect-ratio:281/35;
    width: 100%;
    max-width: 281px;
 
 
 }
.frame-right-v,.frame-left-v,.frame-top-v,.frame-bottom-v
{
    background-image: url('./img-project001/3.jpg'); /* الصورة الافتراضية */
    background-repeat: repeat;
    background-size: 60px auto;
   
}
.the-runner-v{
position:relative;
display: grid; 
aspect-ratio: 281/903;
width:70%;
max-width: 281px;
box-shadow: 0 3px 10px 0 rgba(71, 71, 71, 0.2);
cursor: zoom-in;
transition: transform 0.8s ease;
 grid-template-areas:
    "frame-left-v     frame-left-v           frame-left-v"
    "frame-bottom-v   patchwork-design-v     frame-top-v"
    "frame-right-v    frame-right-v          frame-right-v";
  grid-template-columns:12.46% 1fr 12.46%;
  
}

}