@charset "utf-8";

@import url("fonts/stylesheet.css");
/*::-webkit-scrollbar {
  display: none;
}*/
input,select,textarea{-webkit-appearance: none;-moz-appearance: none;appearance: none;border-radius: 0;-webkit-border-radius:0; -moz-border-radius:0; }
 
html{-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;height: 100%;height: 100%;}

body{margin: 0;padding:0;font-family: 'Aeonik', sans-serif;font-weight: 400;font-size:calc(16 / var(--main-width));line-height:1.3;height: 100%;background-color:var(--white-color);overflow-x: hidden;}

body, button, input, select, textarea{font-family: 'Aeonik', sans-serif;font-weight: 400;color:var(--black-color);}
div, h1, h2, h3, h4, h5, h6, p, span{padding: 0px;margin: 0px;font-weight: 400;}
/* 
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate
 * Also: hot pink! (or customize the background color to match your design)
 */

::-moz-selection{background: var(--black-color);color: var(--white-color);text-shadow: none;}
::selection{background: var(--black-color);color: var(--white-color);text-shadow: none;}

/* =============================================================================
   Links
   ========================================================================== */

a{color:var(--black-color);text-decoration:none;outline: none;position: relative;}
a:hover{text-decoration:underline;}
a:focus{outline: none;}

/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active{outline: 0;}
img {border-style:none}
/* =============================================================================
   Lists
   ========================================================================== */

ul, ol{margin:0;padding-left: 0;list-style-type:none;}
li ul, li ol{margin: 0;padding:0;}

/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/e 
 */

img{border: 0;-ms-interpolation-mode: bicubic;vertical-align: middle;border-style:none;outline:none;}

/*
 * Correct overflow not hidden in IE9 
 */

svg:not(:root){overflow: hidden;}

/* =============================================================================
   Tables
   ========================================================================== */

table{border-collapse: collapse;border-spacing: 0;}
td{	vertical-align: top;}

/* ==== primary styles =====================================================
   Author: Abbas Tahir
   ========================================================================== */

/* For image replacement */
.ir{display: block;border: 0;text-indent: -999em;overflow: hidden;background-color: transparent;background-repeat: no-repeat;text-align: left;direction: ltr;}
.ir a{display: block;height: 100%;}
.hidden{display: none !important;visibility: hidden;}
  
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after{content: "";display: table;}
.clearfix:after{clear: both;}
.clearfix{zoom: 1;}   
.web{display:block;}
.mobile{display:none;}
*{box-sizing:border-box;} 

html.lenis{height: auto;}
.lenis.lenis-smooth {scroll-behavior: auto;}
.lenis.lenis-smooth [data-lenis-prevent] {overscroll-behavior: contain;}
.lenis.lenis-stopped {overflow: hidden;}
.lenis.lenis-scrolling iframe {pointer-events: none;}
  
:root{
   --main-width: 1440 * 100dvw;
   --gray-color: #8C8C8C;
   --white-color: #ffffff;
   --black-color: #000000;
}

.web{display:grid;}
.mobile{display:none;}

#outer-wrapper{width:100%;margin:0;padding:0;} 
  
:where(section,article,figure,aside,.img-box, address, main) {width: 100%;display: grid;grid-template-columns: 1fr;margin: 0;padding: 0;position: relative;font-style: normal;}
figure{background-size: cover;background-repeat: no-repeat;background-position: center center;}
figure img{width: 100%;}
video{width: 100%;height: auto;object-fit: cover;border:0;object-position: center center;}
.inner {width: 100%;/*max-width: 1440px;margin: 0 auto;*/padding: 0 calc(48 / var(--main-width));position: relative;}
.img-box img{width:100%;}

/* main{z-index: 11;margin-top: calc(89 / var(--main-width));} */

/* a:not(.logo,.menu)::before{content:'';position: absolute;width: 100%;height: 1px;background-color: var(--black-color);bottom:0;left: 0;transform-origin: center;transform: scaleX(0);transition: transform .2s ease-in-out;}
a:not(.logo,.menu):hover::before,
a:not(.logo,.menu).active::before{transform-origin: center;transform: scaleX(1);} */
/*Home-Page-Start*/ 
     
.info :where(h1,h2,h3,h4,h5,h6,p,li){width: 100%;margin: 0;padding: 0;margin-bottom: calc(20 / var(--main-width));}
.info :where(p,li){font-weight: 400;margin-bottom: calc(15 / var(--main-width));}
.info :where(ul,ol){list-style: disc;padding-left: calc(20 / var(--main-width));}
.info ol{list-style: decimal;}
/* .info a::before{transform: scaleX(1);}
.info a:hover::before{transform: scaleX(0);} */
 
header{width: 100%;position: fixed;top: 0;left: 0;background: transparent !important; /*background: #fff;*/z-index: 10;/*height: calc(89 / var(--main-width));*/}
header .inner{display: grid;grid-template-columns: 1fr auto;align-items: center;justify-content: space-between;/*padding-top: calc(35 / var(--main-width));padding-bottom: calc(35 / var(--main-width));*/}
.logo{width: calc(90 / var(--main-width));font-weight: 900;position: absolute;top: calc(35 / var(--main-width));left: calc(48 / var(--main-width));z-index: 10;line-height: 1;text-decoration: none !important;}
.logo img{width: 100%;}
.menu{display: none;}
header :where(nav, nav div,nav div ul){display: grid;grid-auto-flow: column;align-items: center;gap: calc(24 / var(--main-width));position: relative;}
header nav{justify-content: start;position: absolute;top: calc(35 / var(--main-width));right: calc(48 / var(--main-width));}
header nav a{font-size: calc(12 / var(--main-width));}
header nav div ul{list-style: none;opacity: 0;visibility: hidden;/*transition: all 0.15s ease;*/}
header nav div .link {cursor: pointer;/*display: inline-block;background: none;border: none;transition: color 0.3s ease;*/}
/* header nav #menu-box ul {transform: translateX(-5px);} */
header nav #menu-box .link::after{content: "Menu";}
header nav #contact-box {margin-left: calc(70 / var(--main-width));width: calc(60 / var(--main-width));justify-content: end;}
header nav #contact-box ul{grid-auto-flow: row;align-items: end;justify-items: end;position: absolute;right: 0;top: calc(100% + (16 / var(--main-width)));row-gap: calc(5 / var(--main-width));/*transform: translateY(-5px);*/}
header nav #contact-box .link::after{content: "Contact";}
/* header nav #menu-box.active ul{transform: translateX(0);}
header nav #contact-box.active ul{transform: translateY(0);} */
.language {display: grid;gap: calc(10 / var(--main-width));grid-auto-flow: column;align-items: center;position: relative;}
.language li a.active {font-weight: bold;}

header nav div.active ul{opacity: 1;visibility: visible;}
header nav div.active .link{color: var(--gray-color);}
header nav div.active .link::after{content: "Close" !important;} 
header nav div.active:hover .link{text-decoration: none;}
/* header nav div.active .link::before{transform: scaleX(0);}
header nav div.active .link:hover::before{transform: scaleX(0);} */
body.blend-active header{mix-blend-mode: difference;}
/* body.blend-active header *{color: var(--white-color);fill: var(--white-color);outline: none;stroke-width: 0px;} */
body.blend-active .logo,
body.blend-active .menu{mix-blend-mode: difference;}
body.blend-active .logo img,
body.blend-active .menu img{filter: invert(1);}
body.blend-active header nav a{filter: invert(1);}
/* Home page Start ---------------------- */
.projects-main{height: 100dvh;align-items: center;justify-content: center;justify-items: center;overflow: hidden;}
.projects-main h2{margin-bottom: calc(40 / var(--main-width));font-size: calc(12 / var(--main-width));text-align: center;}
.projects-main .projects-grid {gap: calc(25 / var(--main-width)) 0;z-index: 5;align-items: center;justify-content: center;justify-items: center;text-align: center;}

.projects-main .row{display: grid;grid-auto-flow: column;gap: calc(37 / var(--main-width));justify-content: center;}
.projects-main .row article a{z-index: 99;font-size:calc(14 / var(--main-width));}
.projects-main .row article a:hover,
.projects-main .row article.active a{color: var(--white-color);text-decoration: underline;}
/* .projects-main .row article a:hover::before,
.projects-main .row article.active a::before{background-color: var(--white-color);transform: scaleX(1);}  */
.projects-main .row article figure{position: absolute;top: 0;left: 0;max-width: calc(599 / var(--main-width));z-index: 1;}
.projects-main .row article figure :where(img,video){/*width: auto;*/display: grid;position: absolute;display: none;/*opacity: 0;*//*transform: scale(.8);*/transition: opacity 0.3s ease-in-out, transform 0.4s ease; will-change: transform, opacity;}
.projects-main .row article.open figure :where(img,video){display: block;/*opacity: 1;*//*transform: scaleX(1);*/}
/* Home page End ---------------------- */
 
/* Photo page Start ---------------------- */ 
.photo-main{margin-top: calc((54 / var(--main-width)) + (89 / var(--main-width)));margin-bottom: calc(48 / var(--main-width));}
.photo-main .photo-grid{column-gap:calc(70 / var(--main-width));row-gap:calc(80 / var(--main-width));}
.photo-main .row{width: 100%;display: grid;grid-auto-flow: column;grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);gap: calc(70 / var(--main-width));padding: 0;align-items: start;transition: grid-template-columns 0.5s ease;will-change: grid-template-columns;}
/*.photo-main .row article{position: relative;width: 100%;aspect-ratio: 1200 / 1500;}
.photo-main .row article figure{position: relative;width: 100%;height: 100%;object-fit: cover;margin: 0px;padding: 0px;cursor: pointer;}
.photo-main .row article figure img{display: grid;width: 100%;}*/
.photo-main .photo-grid article figure{cursor: pointer;}

.photo-main .photo-grid article aside{width: calc(127 / var(--main-width));position: absolute;left:calc(100% + (13 / var(--main-width)));bottom: 0;opacity: 0;visibility: hidden;transition: opacity 0.3s ease-in-out; will-change: opacity;}
.photo-main .photo-grid article aside p{margin-top: calc(10 / var(--main-width));font-size: calc(14 / var(--main-width));display: grid;grid-auto-flow: row;}
.photo-main .photo-grid article aside p span{color: var(--gray-color);width: 100%;}
.photo-main .photo-grid article:last-of-type aside{right:calc(100% + (13 / var(--main-width)));left: auto;text-align: right;}
 .photo-main .photo-grid article.horizontal{grid-auto-flow: row;row-gap:calc(13 / var(--main-width)) ;}
.photo-main .photo-grid article.horizontal aside{position: relative;left:auto;bottom: auto;top:auto;}

.photo-main .photo-grid article.horizontal:last-of-type aside {text-align: left;right: auto;}
.photo-main .photo-grid article aside p:first-of-type {margin-top: calc(0 / var(--main-width));}


.photo-main .row.grid1{grid-template-columns: minmax(0px, 1.75fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);}
.photo-main .row.grid2{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.75fr) minmax(0px, 1fr) minmax(0px, 1fr);}
.photo-main .row.grid3{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1.75fr) minmax(0px, 1fr);}
.photo-main .row.grid4{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1.75fr);}

.photo-main .photo-grid article.active{z-index: 3;}
.photo-main .photo-grid article.active aside{opacity: 1;visibility: visible;}

.photo-main .photo-grid.fakeCol{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);} 
.photo-main .photo-grid.fakeCol article aside{display: none;}

/* Photo page End ---------------------- */

/* About page Start ---------------------- */ 
.about-main{margin-top: calc((54 / var(--main-width)) + (89 / var(--main-width)));margin-bottom: calc(48 / var(--main-width));}
.about-main .about-grid{grid-template-columns: calc(899 / var(--main-width)) calc(353 / var(--main-width));column-gap: calc(102 / var(--main-width));justify-content: space-between}

.about-main .info-box{width: calc(899 / var(--main-width));}
.about-main .info-box :where(p,li){margin-bottom: calc(25 / var(--main-width));font-size: calc(23 / var(--main-width));line-height: 1.2;}
.about-main .info-box li{margin-bottom: calc(10 / var(--main-width));}
.about-main .info-box :where(p,li):last-of-type{margin-bottom: 0;}
/* .about-main .info-box .img-box{width: 265px;position: absolute;right: 0;bottom: 0;} */
 
.about-main .key-box{width: calc(575 / var(--main-width));margin-top: calc(104 / var(--main-width));display: grid;grid-template-columns: repeat(3, 1fr);align-self: start;gap: calc(40 / var(--main-width));}
.about-main .key-box div{width: 100%;display: grid;grid-template-columns: 1fr;align-self: start;}
.about-main .key-box h2{min-height: calc(21 / var(--main-width));margin-bottom: calc(20 / var(--main-width));font-size: calc(16 / var(--main-width));font-weight: 400;text-transform:uppercase;letter-spacing: calc(1 / var(--main-width));}
.about-main .key-box ul{list-style: none;padding-left: 0;}
.about-main .key-box :where(p,li){margin-bottom: 0/*calc(4 / var(--main-width));*/;} 

.about-main article .img-box{display: grid;align-self: flex-start;/*padding-top: 24vw;*/}
.about-main article .img-box.mobile{display: none;}
/* About page End ---------------------- */

/* Design page Start ---------------------- */
.design-main{height: 100dvh;align-items: center;justify-content: start;justify-items: start;position: fixed;}
.design-main>.inner{padding:0;}
.design-main .design-grid {will-change: transform;align-items: center;display: flex;list-style: none;margin: 0;padding: 0;height: 100vh;padding: 0 calc(58 / var(--main-width)) 0 calc(48 / var(--main-width));}
.design-main .design-grid .dsp{width: 100%;float: left;display: flex; }
.design-main .design-grid .dsp>article {width: calc(345 / var(--main-width));height: calc((345 / var(--main-width)) + (40 / var(--main-width))); flex-shrink: 0;margin-left: calc(24 / var(--main-width)); display: flex;align-items: start;justify-items: start;justify-content: start;cursor: pointer;}
.design-main .design-grid .dsp>article:first-child {margin-left: 0;}
.design-main .design-grid article .dp-item{width: 100%;display: grid;grid-template-columns: 1fr;row-gap: calc(16 / var(--main-width));align-items: start;} 
.design-main .design-grid article .dp-item .dp-info{display: grid;grid-template-columns: 1fr;gap: 3px;margin-top: auto;align-self: start;}
.design-main .design-grid article .dp-item .dp-info p{font-size: calc(14 / var(--main-width));}
.design-main .design-grid article .dp-item figure{display: grid;grid-template-columns: 1fr;gap: 0;margin-bottom: auto;}
   /* Popup */
.design-details{position: fixed;top: 100%;left: 0;width: 100%;height: 100%;background-color: var(--white-color);justify-content: start;align-items: start;overflow: hidden;opacity: 1;visibility: visible;transition:all .3s ease;z-index: 98;} 
.design-details.open{opacity: 1;visibility: visible;top: 0;}
.design-details article>.sw{display: grid;align-content: start; background-color: var(--white-color);max-height: 100%;grid-template-columns: calc(775 / var(--main-width)) calc(435 / var(--main-width));gap: calc(133 / var(--main-width));justify-content: space-between;}
.design-details .dp-box{width: 100%;height: 100dvh;overflow-y: auto;} 
.design-details .dp-box img{width: 100%;display: block;object-fit: cover;}
.design-details .dp-box .sw {height: auto;padding-top: calc(147 / var(--main-width));padding-bottom: calc(48 / var(--main-width));display: grid;}
.design-details .dp-item {width: 100%;float: left;position: relative;}
.design-details .back{display: none !important; position: absolute;left: calc(50% - ((133/2) / var(--main-width)));top: calc(35 / var(--main-width));z-index: 10;opacity: 0;visibility: hidden;}
.design-details .back,
.design-details .logo{opacity: 0;visibility: hidden;transition: all .35 ease;/*transition-delay: .3s;*/}
.design-details .dp-image{width: 100%;display: grid;grid-template-columns: 1fr;row-gap: calc(100 / var(--main-width));}
.design-details .dp-image .zoom{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}

.dp-intro{width: 100%;height: auto;position: relative; display: grid;grid-template-columns: 1fr;gap: calc(3 / var(--main-width)); } 
.dp-intro .small,.dp-intro a{font-size: calc(14 / var(--main-width));margin-bottom: calc(6 / var(--main-width));line-height: 1;} 
.dp-intro .small.last{margin-bottom: calc(40 / var(--main-width));}

.dp-intro.mobile{display: none;} 

.dp-intro b,
.dp-intro span{color: var(--gray-color);font-weight: 400;line-height: 1;} 
.dp-intro .website{position: absolute;right: 0;top: 0;text-decoration: underline;}
.dp-intro .website:hover{text-decoration: none;}

.design-details .dp-box::-webkit-scrollbar{display: none;}

.design-details.open{opacity: 1;visibility: visible;top: 0;}
.design-details.open .back,
.design-details.open .logo{opacity: 1;visibility: visible;}

.mouse-pointer {cursor: none;width: calc(68 / var(--main-width));height: calc(68 / var(--main-width));max-width: calc(68 / var(--main-width));max-height: calc(68 / var(--main-width));
   pointer-events: none;position: fixed;left: 0;top: 0;z-index: 1000;transform: translate(-50%,-50%);
  transition: transform 50ms ease-out;opacity: 0;visibility: hidden;background-position:center center;background-size:calc(68 / var(--main-width));background-repeat:no-repeat;background-image:url(../images/mouse-close.svg);}
 
.design-details.open .mouse-pointer{opacity: 1;visibility: visible;}
.design-details.open .mouse-pointer.hide {
  opacity: 0;visibility: hidden;
  pointer-events: none;
}
 
/*error 404*/
.error-404{width:100%;margin:50px 0 0 0;padding:0;float:left;text-align:center;}
.error-404 .t-inner{width:100%;margin:0 0;padding:0;display:inline-block;text-align:center;max-width: 58%;}
.error-404 .t-inner div{width:68%;margin:0 0 0 4%;padding:0;float:left;text-align:left;}
.error-404 .t-inner div h1{width:100%;float:left;margin:0 0 20px 0;padding:0;font-weight: 500;float:left;font-size: 40px;line-height: 45px;letter-spacing: -0.4px;color: #000000;position:relative;}
.error-404 .t-inner p{width:100%;margin:0 0 20px 0;padding:0;float:left;font-size: 20px;line-height: 26px;letter-spacing: -0.2px;color:#000000;position:relative;}
.error-404 .t-inner img{width:26.8%;margin:0 0;padding:0;float:left;}
.error-404 .t-inner a.btn{width:auto;height:auto;font-size: 20px;line-height: initial;letter-spacing: -0.2px;padding:7px 15px 10px;float:none;display:inline-block;background-color: #000000;color: #fff;text-decoration: none;}
/*error 404*/

.arrow{width: 100px;height: 100px;position: fixed;bottom: 0;background-color: transparent;z-index: 999999;display: none !important;}
.arrow.l{left: 0;}
.arrow.r{right: 0;}
.fancybox__backdrop{background: rgba(255, 255, 255, 1) !important;filter: blur(200px) !important;}
.fancybox__slide.has-image>.fancybox__content{width: auto !important; height: 85svh !important;}
.has-map .fancybox__content, 
.has-pdf .fancybox__content, 
.has-youtube .fancybox__content, 
.has-vimeo .fancybox__content, 
.has-html5video .fancybox__content{width: auto !important; height: 85svh !important;}

.f-button:not(.is-next, .is-prev){width: calc(68 / var(--main-width));height:calc(68 / var(--main-width));background: none;background-position:center center;background-size:calc(68 / var(--main-width));background-repeat:no-repeat;background-image:url(../images/mouse-close.svg);pointer-events: none;position: fixed;left: 0;top: 0;z-index: 1000;border-radius: 50%;transform: translate(-50%,-50%);background-color: none;box-shadow:none;transition: none;}
.f-button:not(.is-next, .is-prev) svg{display: none !important;}

.f-button:not(.is-next, .is-prev).hover{display: none !important;}

.fancybox__viewport.is-draggable {
  cursor: none !important;
  cursor: none !important;
}
.basic { 
    height: 100dvh; 
    align-items: center;
    display: grid;
}
.sly-slider {
  width: 100%;
  position: relative;
  padding: 0;
}


/* Controls */
.controls {
  position: absolute;
  top: 13.837064676616913vw;
  left: 0;
  width: 100%;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s; 
  display: none !important;
}

  .controls a {
      width: 3.109452736318408vw;
      height: 3.109452736318408vw;
      position: absolute;
      top: 0;
      border-radius: 100px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: 100% auto;
      background-color: #4dabd6;
  }

  .controls .prevPage {
      left: -0.808457711442786vw;
      background-image: url(../images/prev-slide-arrow.svg);
  }

  .controls .nextPage {
      right: -0.808457711442786vw;
      background-image: url(../images/next-slide-arrow.svg);
  }

  .controls a.disabled {
      opacity: 0;
      visibility: hidden;
  }
/* Scrollbar */
.scrollbar{margin:0;background-color: transparent; height: 6px;width: 100%;position: absolute;top: 86svh;left: 0;z-index: 9999999999;display: none !important;}
.scrollbar:before {content: "";width: 100%;height: 1px;background-color: #707070;top: 0.15625vw; position: absolute;left: 0;}
.scrollbar .handle{width: 100%;height: 100%;background: #707070;cursor: grab;z-index: 9;}
.scrollbar .handle .mousearea {position: absolute;top: 0;left: 0;width: 100%;height: 6px;}
/* .scrollbar.drg-outer:before {
      height: .25rem;
  }

  .scrollbar.drg-outer:before {
      height: .25rem;
  } */

      /* .scrollbar:hover .handle, .scrollbar:hover:before, .scrollbar .handle:hover, .scrollbar .handle:visited, .scrollbar .handle.dragged {
          height: .25rem;
      } */



/* .design-main .inner>article{grid-auto-flow:column; align-items: start;padding-bottom:calc(48 / var(--main-width));}
.design-main .inner>article article{width: calc(345 / var(--main-width));margin-left: calc(24 / var(--main-width)); display: grid;grid-auto-flow: row;row-gap: calc(16 / var(--main-width));align-items: start;} */

/* Design page End ---------------------- */
 
@media only screen and (min-width:768px) and (max-width:1440px) {
   
   :root{
      --main-width: 1440 * 100dvw; 
   }
}
/* tablet */
@media only screen and (min-width:768px) and (max-width:1024px) {
   .photo-main .photo-grid{column-gap:calc(50 / var(--main-width));}

.photo-main .row{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);gap: calc(50 / var(--main-width));}
  .photo-main .row.grid1 {grid-template-columns: minmax(0px, 1.75fr) minmax(0px, 1fr) minmax(0px, 1fr);}
  .photo-main .row.grid2 {grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.75fr) minmax(0px, 1fr);}
  .photo-main .row.grid3 {grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1.75fr);}

.photo-main .photo-grid.fakeCol{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);} 
}

/*@media only screen and (min-width:0px) and (max-width:768px) and (orientation: landscape) {
  
  .video-box{height: 100dvh;}
}*/
@media only screen and (min-width:0px) and (max-width:767px) {

:root{
   --main-width: 375 * 100dvw; 
   --main-height: 812 * 100dvh; 
} 
header nav{width: 100%;height: 100dvh;float: none;margin: 0;padding: 0;justify-content: center;position: fixed;top: 0;left: 0;background-color: #ffffff;transition:0.2s all;visibility:hidden;opacity:0;overflow: hidden;display: none;}
header nav > ul{width: 100%;margin-top: 0;line-height: normal;}
header nav ul li{width: 100%;margin: 0 0;padding: 0 0;line-height: normal;}
header nav ul li a{padding-bottom: 0;font-size: calc(18 / var(--main-width));line-height: normal;}
/* header nav ul li a::before{content: '';position: absolute;width: 100%;height: 0.26666666666666666vw;background-color: #FF6F31;bottom: 0;left: 0;transform-origin: right;transform: scaleX(0);transition: transform .3s ease-in-out;}
header nav ul li a:hover::before,
header nav ul li a.active::before{transform-origin: left;transform: scaleX(1);} */


.inner{padding: 0 calc(20 / var(--main-width));}
 
     
.info :where(h1,h2,h3,h4,h5,h6,p,li){margin-bottom: calc(20 / var(--main-width));}
.info :where(p,li){margin-bottom: calc(15 / var(--main-width));}
.info :where(ul,ol){padding-left: calc(20 / var(--main-width));}
 
.logo{top: calc(35 / var(--main-width));left: calc(20 / var(--main-width));mix-blend-mode: normal;z-index:auto;}
.menu {width: calc(44 / var(--main-width));height: calc(44 / var(--main-width));position: absolute;right: calc(20 / var(--main-width));top: calc(23 / var(--main-width));/*background-image: url(../images/icon-menu.svg);background-position: center center;background-size: calc(44 / var(--main-width));background-repeat: no-repeat;*/display: block;}
.menu img{width: calc(44 / var(--main-width));height: calc(44 / var(--main-width));}
.menu #m-m{display: block;}
.menu #m-c{display: none;}

header :where(nav, nav div,nav div ul){width: 100%;display: flex;flex-direction: column;justify-content: center;  align-items: center;gap: calc(24 / var(--main-width));text-align: center;}
header nav div .link {cursor: pointer;display: inline-block;background: none;border: none;transition: color 0.3s ease;display: none !important;}
header nav #menu-box ul {visibility: visible;opacity: 1;}
header nav #menu-box .link::after{content: "Menu";}
header nav #contact-box {margin-left: calc(0 / var(--main-width));width: 100%;justify-content: end;text-align: center;}
header nav #contact-box ul{display: flex;flex-direction: column;align-items: center;gap: calc(16 / var(--main-width));margin-top: calc(75 / var(--main-height));width: 100%;}
header nav #contact-box .link{display: block!important;font-size: calc(18 / 375 * 100vw);}
header #contact-box ul li {width: max-content;font-size: calc(16 / 375 * 100vw);}
header #contact-box ul li a {font-size: calc(16 / 375 * 100vw);text-decoration: underline;}
header #contact-box ul li a:hover{text-decoration: none;}
header #contact-box ul li:last-of-type {margin-top: calc(53 / var(--main-height));}
 
body.nav-open header nav{visibility:visible;opacity:1;display: flex;padding-bottom: calc(60 / var(--main-height));}
body.nav-open header .menu.active{z-index: 9;/*background-image:url(../images/icon-close.svg);*/}
body.nav-open header .menu.active #m-m{display: none;}
body.nav-open header .menu.active #m-c{display: block;}
body.nav-open header .logo{z-index: 99999;color: #000000;}

body.nav-open.blend-active header{mix-blend-mode: normal !important;}
/* body.blend-active header *{color: var(--white-color);fill: var(--white-color);outline: none;stroke-width: 0px;} */
body.nav-open.blend-active .logo,
body.nav-open.blend-active .menu{mix-blend-mode: normal !important;}
body.nav-open.blend-active .logo img,
body.nav-open.blend-active .menu img{filter: none !important;}
body.nav-open.blend-active header nav a{filter: none !important;}
   /* .video-box{height: 55vw;} */
.language {
    display: grid;
    gap: calc(10 / var(--main-width));
    grid-auto-flow: column;
    align-items: center;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;width: auto!important;
}
/* Home page Start ---------------------- */
.projects-main{height: 100dvh;align-items: center;justify-content: center;justify-items: center;overflow: hidden;}
.projects-main h2{display: none;}
.projects-main .projects-grid {gap: 0;}

.projects-main .row{grid-auto-flow: row;gap:0;justify-content: center;height: 100dvh;width: 100%;}
.projects-main .row article{display: none;position: absolute;left: 0;top: 0;}
.projects-main .row:first-of-type article:first-of-type{display: grid;}
.projects-main .row article a{z-index: 99;position: absolute;left: 0;bottom: calc(48 / var(--main-width));display: grid;width: 100%;} 

.projects-main .row article figure{height: 100dvh;width: 100% !important;align-items: center; position: relative;display: grid;grid-template-columns: 1fr; top: auto !important;left: auto !important;max-width: calc(100% / var(--main-width));}
.projects-main .row article figure :where(img,video){display: grid;}
.projects-main .row article.open figure :where(img,video){display: grid;/*opacity: 1;*//*transform: scaleX(1);*/}
.projects-main .row article figure :where(img,video){width: 100%;display: grid;position: relative;}

/* Home page End ---------------------- */
 
.photo-main .photo-grid{column-gap:calc(30 / var(--main-width));row-gap: calc(42 / var(--main-width));}

.photo-main .row{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);gap: calc(38.5 / var(--main-width));overflow: hidden;}
.photo-main .row.grid1{grid-template-columns: minmax(0px, 2.45fr) minmax(0px, 1fr);}
.photo-main .row.grid2{grid-template-columns: minmax(0px, 1fr) minmax(0px, 2.45fr);} 
.photo-main .photo-grid article aside p {margin-top: calc(10 / var(--main-width));font-size: calc(12 / var(--main-width));}
.photo-main .photo-grid article aside{left: calc(100% + (6.97 / var(--main-width)));width: 100%;opacity: 0;visibility: hidden;transition: all .35s;}
.photo-main .photo-grid article.active aside{width: calc(115 / var(--main-width));opacity: 1;visibility: visible;}
.photo-main .photo-grid article.horizontal aside {position: absolute;}
.photo-main .photo-grid article.horizontal.active aside {position: relative;}


.photo-main .photo-grid.fakeCol{grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr);} 

.contact-box .inner{/*padding: 0 calc((110/2) / 768 * 100vw);*/padding-bottom: calc(70 / 768 * 100vw);}
.contact-box .info{width: 100%;row-gap: calc((40) / 768 * 100vw);}
.contact-box .info h1{font-size: calc(46 / 768 * 100vw);}
.contact-box .info p{font-size: calc(26 / 768 * 100vw);}
.photo-main { margin-top: calc(95 / var(--main-width));}


/* About page Start ---------------------- */ 
.about-main{margin-top: calc((95 / var(--main-width)));}
.about-main .about-grid{grid-template-columns: 1fr;justify-content: start} 
.about-main .info-box{width: 100%;}
.about-main .info-box :where(p,li){margin-bottom: calc(25 / var(--main-width));font-size: calc(16 / var(--main-width));}
.about-main .info-box li{margin-bottom: calc(10 / var(--main-width));} 
 
.about-main .key-box{width: 100%;margin-top: calc(80 / var(--main-width));grid-template-columns: repeat(1, 1fr);gap: calc(40 / var(--main-width));}
.about-main .key-box h2{min-height: initial;}

.about-main article .img-box{display: grid;align-self: flex-start;margin-top: calc(40 / var(--main-width));margin-bottom: calc(40 / var(--main-width));/*padding-top: 24vw;*/}
.about-main article .img-box.web{display: none !important;}
.about-main article .img-box.mobile {display: block;}
/* About page End ---------------------- */

.design-main .design-grid article .dp-item .dp-info p {font-size: calc(12 / var(--main-width));}

.design-main .design-grid .dsp>article:last-child {padding-right: calc(20 / var(--main-width));}
.design-main .design-grid .dsp>article {margin-left: 0;padding-left: calc(20 / var(--main-width));width: calc(310 / var(--main-width));
    height: calc((296.5217590332031 / var(--main-width)) + (40 / var(--main-width)));padding-top: calc(20 / var(--main-width));}
 
.design-main .design-grid { 
    display: grid; 
    padding: 0; 
}
  
.dp-intro.mobile {display: block;}
.design-details .inner {padding: 0;}
.design-details article {height: 100dvh;overflow-y: auto;}
   .design-details article>.sw {float: left;display: flex;flex-wrap: wrap; grid-template-columns: 1fr !important;gap: 0;width: 100%;height: auto;padding-top: calc(95 / var(--main-width));padding-bottom: calc(48 / var(--main-width));}
.design-details .dp-box {height: auto;overflow-y: hidden;float: left; }

.dp-intro .small, .dp-intro a {font-size: calc(12 / var(--main-width));margin-bottom: calc(10 / var(--main-width));line-height: 1;}
.dp-intro .website {position: relative;margin-bottom: calc(45 / var(--main-width));float: left;width: 100%; top: auto;left: auto;right: auto;}
.design-details .dp-box .sw {width: 100%;float: left; height: auto;padding-top: 0;padding-bottom: 0;}
  
.design-details .dp-image{margin-top: calc(40 / var(--main-width));margin-bottom: calc(40 / var(--main-width));row-gap: calc(0 / var(--main-width));}

.design-details .dp-image div{padding: 0 calc(20 / var(--main-width)); display: flex !important;overflow-x: auto !important;overflow-y: hidden;  gap: calc(20 / var(--main-width));white-space: nowrap;scroll-behavior: smooth;}
.design-details .dp-image figure {flex: 0 0 auto !important;display: block;width: auto;height: calc(386.8829 / var(--main-width));}
.design-details .dp-image img,
.design-details .dp-image video {height: calc(386.8829 / var(--main-width));}

.design-details .dp-intro,
.design-details .info{padding-left: calc(20 / var(--main-width));padding-right: calc(20 / var(--main-width));}

.mouse-pointer {
    cursor: initial;
    width: calc(44 / var(--main-width));
    height: calc(44 / var(--main-width));
    max-width: calc(44 / var(--main-width));
    max-height: calc(44 / var(--main-width));
    left: auto !important;
    right: calc(20 / var(--main-width)) !important;
    top: calc(23 / var(--main-width)) !important;
    transform: initial; 
    background-size: calc(44 / var(--main-width));
    position: absolute !important;
}
.design-details.open .mouse-pointer.hide {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
/*error 404*/
.error-404{padding:5.69158878504673vw 5.373831775700935vw 4.345794392523365vw;margin: 0;}
.error-404 .t-inner{width:100%;margin:0 0 0 0;max-width: 100%;}
.error-404 .t-inner figure{width:100%;margin-bottom:7.009345794392523vw;text-align:center;}
.error-404 .t-inner figure img{width:25.8%;float:none;display:inline-block;}
.error-404 .t-inner div {width: 100%;margin: 6vw 0 0 0px;padding: 0;float: left;text-align: center;}
.error-404 .t-inner div h1{margin-bottom:3.5046728971962615vw;text-align:center;font-size:6.763285024154589vw;line-height:7.971014492753622vw;}
.error-404 .t-inner div p{margin:0 0 3.4641288433382138vw 0;font-size: 3.3816425120772946vw;line-height: 4.830917874396135vw;text-align:center;}
.error-404 .t-inner img{width:26.8%;float: none;}
.error-404 .t-inner a.btn{float: none;font-size: 2.803738317757009vw;line-height: 4.205607476635514vw;border: 0.23364485981308408vw solid #000000;display: inline-block;}
/*error 404*/
.web{display:none;}
.mobile{display:grid;}
}
/*@media only screen and (orientation: landscape) {
  .video-box{height: 100dvh;}
}*/