@charset "utf-8"; 
/*
  .tk-elza { font-family: "elza",sans-serif; }
  .tk-bricolage-grotesque { font-family: "bricolage-grotesque",sans-serif; }
  .tk-bricolage-grotesque-semicond { font-family: "bricolage-grotesque-semicond",sans-serif; }
  .tk-bricolage-grotesque-cond { font-family: "bricolage-grotesque-cond",sans-serif; }
  .tk-bricolage-grotesque-24 { font-family: "bricolage-grotesque-24",sans-serif; }
  .tk-bricolage-grotesque-24-scond { font-family: "bricolage-grotesque-24-scond",sans-serif; }
  .tk-bricolage-grotesque-24-cond { font-family: "bricolage-grotesque-24-cond",sans-serif; }
  .tk-bricolage-grotesque-36 { font-family: "bricolage-grotesque-36",sans-serif; }
  .tk-bricolage-grotesque-36-scond { font-family: "bricolage-grotesque-36-scond",sans-serif; }
  .tk-bricolage-grotesque-36-cond { font-family: "bricolage-grotesque-36-cond",sans-serif; }
  .tk-bricolage-grotesque-48 { font-family: "bricolage-grotesque-48",sans-serif; }
  .tk-bricolage-grotesque-48-scond { font-family: "bricolage-grotesque-48-scond",sans-serif; }
  .tk-bricolage-grotesque-48-cond { font-family: "bricolage-grotesque-48-cond",sans-serif; }
  .tk-bricolage-grotesque-72 { font-family: "bricolage-grotesque-72",sans-serif; }
  .tk-bricolage-grotesque-72-scond { font-family: "bricolage-grotesque-72-scond",sans-serif; }
  .tk-bricolage-grotesque-72-cond { font-family: "bricolage-grotesque-72-cond",sans-serif; }
*/

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: "bricolage-grotesque",sans-serif;font-weight: 400;font-size:calc(17 / var(--main-width));line-height:calc(22 / var(--main-width));letter-spacing: calc(-0.17 / var(--main-width)); height: 100%;background-color:var(--primary-color);overflow-x: hidden;}

body, button, input, select, textarea{font-family: "bricolage-grotesque",sans-serif;font-weight: 400;color:var(--black-color);}
div, h1, h2, h3, h4, h5, h6, p, span{padding: 0px;margin: 0px;font-weight: normal;}
/* 
 * 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:none;}
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;}
  
 
/* ===== Scrollbar CSS ===== */
  /* Firefox */
  /* * {
    scrollbar-width: 0;
    scrollbar-color: #000000 transparent;
  }
 
  *::-webkit-scrollbar {
    width: 0;display: none;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
    border: 0px none #ffffff;
  } */
::-webkit-scrollbar{display: none !important;}

:root{
   --main-width: 1366 * 1366px;
   --primary-color: #FCD200;
   --white-color: #ffffff;
   --black-color: #000000;
}

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

#outer-wrapper{width:100%;margin:0;padding:0;} 
  
:where(section,article,figure,aside,.img-box, address, main, footer) {width: 100%;display: grid;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: 1366px;margin: 0 auto;padding: 0 calc(86 / var(--main-width));position: relative;}
.img-box img{width:100%;}
 
main :where(h1,h2,h3,h4,h5,h6,p,li){width: 100%;font-weight:  700;font-style: normal;color: var(--black-color);margin-bottom: calc(17 / var(--main-width));}
h1{font-size: calc(138 / var(--main-width));line-height: calc(115 / var(--main-width));letter-spacing: calc(-4.69 / var(--main-width));}
h2{font-size: calc(41 / var(--main-width));line-height: calc(50 / var(--main-width));letter-spacing: calc(-0.57 / var(--main-width));}
h3{font-size: calc(20 / var(--main-width));line-height: calc(33 / var(--main-width));letter-spacing: calc(-0.2 / var(--main-width));}
h4{font-size: calc(17 / var(--main-width));line-height: calc(22 / var(--main-width));letter-spacing: calc(-0.2 / var(--main-width));}
h5{font-size: calc(15 / var(--main-width));line-height: calc(20 / var(--main-width));letter-spacing: calc(-0.15 / var(--main-width));}
h6{font-size: calc(11 / var(--main-width));line-height: 1;}
p,li{font-size: calc(17 / var(--main-width));line-height: calc(22 / var(--main-width));letter-spacing: calc(-0.2 / var(--main-width));font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;margin-bottom: calc(15 / var(--main-width))} 
p strong,li strong{font-weight:700;} 

main{ margin-top: calc(66 / var(--main-width));}
 
a:not(.logo,.git)::before{content:'';position: absolute;width: 100%;height: calc(1 / var(--main-width));background-color: var(--black-color);bottom:calc(2 / var(--main-width));left: 0;transform-origin: center;transform: scaleX(0);transition: transform .2s ease-in-out;}
a:not(.logo,.git):hover::before,
a:not(.logo,.git).active::before{transform-origin: center;transform: scaleX(1);}

.intro-page{width:100%;height:100%;padding: 0 calc(90 / var(--main-width)); position:fixed;top: 0;left: 0; display:flex;align-items:center;justify-content:center;background-color:var(--primary-color);transition: height 0.7s ease;z-index:99;}
.intro-page .logo{width:100%;max-width: 1194px;height:100%;opacity: 0; visibility: hidden; transition: opacity 1.7s ease;float:left;background-position:center center;background-size:100% auto;background-repeat:no-repeat;background-image:url(../images/logo-large.svg);}

body.show {overflow-y: hidden;}
body.show .intro-page .logo{opacity:1;visibility: visible;}

body.hide {overflow-y: auto;}
body.hide .intro-page{height:0;}
body.hide .intro-page .logo{height:0;}

header{width: 100%;height: calc(66 / var(--main-width));position: fixed;top: 0;left: 0;background-color: var(--primary-color);z-index:98;}
header .inner{height: calc(66 / var(--main-width));display: flex;align-items: center;justify-content: space-between;}
header .logo{width:calc(150 / var(--main-width));height:calc(15 / var(--main-width));background-position:center center;background-size:100% auto;background-repeat:no-repeat;background-image:url(../images/logo-large.svg);}
header .git{width: auto;font-weight: 600; height: calc(13 / var(--main-width));padding-right: calc(12 / var(--main-width)); text-decoration: none;font-size: calc(12 / var(--main-width));line-height: calc(24 / var(--main-width));color: #000000;position: relative;display: flex;align-items: center;}
header .git::before{width: calc(12 / var(--main-width));height: calc(2 / var(--main-width));background-color: #000000;position: absolute;right: calc(-5 / var(--main-width));top: calc(5 / var(--main-width));content: "";}
header .git::after{width: calc(2 / var(--main-width));height: calc(12 / var(--main-width));background-color: #000000;position: absolute;right: 0;top: 0;content: "";}

 
main .hero-box {width: 100%;margin-top: calc(130 / var(--main-width));margin-bottom: calc(149 / var(--main-width));}
main .hero-box h1{width: calc(758 / var(--main-width));margin-bottom:calc(50 / var(--main-width));}
main .hero-box p{width: calc(785 / var(--main-width));font-family: "elza",sans-serif;font-weight:500;font-size: calc(41 / var(--main-width));line-height: calc(50 / var(--main-width));letter-spacing: calc(-0.57 / var(--main-width));}

main .case-studies-box,
main .case-studies-text-box{/*overflow: hidden;*/width: 100%;position: relative;}
main .case-studies-text-box .info-box{border-top: 1px solid #000;padding: calc(25 / var(--main-width)) 0 calc(15 / var(--main-width)) 0;}
main .case-studies-text-box .info-box p{width: calc(599 / var(--main-width));font-size: calc(20 / var(--main-width));line-height: calc(26 / var(--main-width));letter-spacing: calc(-0.2 / var(--main-width));}

main .case-studies-box .case-studies {background: var(--primary-color);padding-bottom:calc(55 / var(--main-width));}

body.maxh {max-height: 100dvh;overflow: hidden;}
body.maxh main .case-studies-box{max-height: 100dvh;overflow: hidden;}

main .case-studies-box .case-studies :where(.grid-sizer,.case-item){width: 100%;max-width: 569px;position: relative;} 
main .case-studies-box .case-studies .gutter-sizer{width: 4.606365159128979%;}
main .case-studies-box .case-studies .case-item:not(.grid-sizer) {padding-top:calc(55 / var(--main-width));/*background-color: var(--black-color);margin-bottom: calc(55 / var(--main-width));*/position: relative;/*float: left;height: auto;clear: left;*//* display: flex;align-items: start;justify-content: start; overflow: hidden;*//* transition: width .4s ease, height .4s ease;  */}  
main .case-studies-box .case-studies .case-item .inner-item {width: 100%;float: left;position: relative;}
/* main .case-studies-box .case-studies .case-item:not(.grid-sizer):nth-of-type(2n) {float: right;clear: right;}   
main .case-studies-box .case-studies .case-item.center-item {left: auto !important;right: 0 !important;}*/
main .case-studies-box .case-studies .case-item.left .blend-img{float: left;} 
main .case-studies-box .case-studies .case-item.right .blend-img{float: right;} 

main .case-studies-box .case-studies .case-item .blend-img{width: 100%;max-width: 569px; background-color: var(--primary-color);z-index: 2;} 
main .case-studies-box .case-studies .case-item .blend-img :where(img,video){width: 100%;height: auto;display: block;transition: transform 0.4s ease;mix-blend-mode: luminosity;opacity: 1;} 
main .case-studies-box .case-studies .case-item .blend-img .default{display: block;} 
main .case-studies-box .case-studies .case-item .blend-img .hover{display: none;} 
main .case-studies-box .case-studies .case-item .blend-img:hover .default{display: none;}
main .case-studies-box .case-studies .case-item .blend-img:hover .hover{display: block;}

main .case-studies-box .case-studies .case-item .blend-img.multiply :where(img,video){mix-blend-mode: multiply;} 
main .case-studies-box .case-studies .case-item:hover .blend-img :where(img,video){mix-blend-mode: normal;}

main .case-studies-box .case-studies .case-item .case-details{width: 100%;height: auto;position: relative;z-index: 9;/*position: absolute;left: 0;top: 0;*/ /*width: 0;height: 0;overflow: hidden; opacity: 0;visibility: hidden;transition: all .8s;*/}
main .case-studies-box .case-studies .case-item .case-details .cdd-a{opacity: 0;visibility: hidden; display: none;width: 100vw;position: relative; left: 50%;top:calc(-55 / var(--main-width));transform: translateX(-50%);
    overflow: auto;height: calc(100dvh - (calc(66 / var(--main-width))));background-color: var(--black-color);float: left; /*position: absolute;left: 0;top: 0;*/ /*width: 0;height: 0;overflow: hidden; opacity: 0;visibility: hidden;transition: all .8s;*/}

.bg-cover{width: 0;height: 0;position: absolute;top: 0;left: 0; background-color: var(--black-color);z-index: 90;pointer-events: none;visibility: hidden;}

/* main .case-studies-box .case-studies .grid-item--gigante::before,
main .case-studies-box .case-studies .grid-item--gigante::after{width: 110%;height: 100%;position: absolute;top: 0;content: "";background-color: var(--black-color);}

main .case-studies-box .case-studies .grid-item--gigante::before{left:0;transform: translateX(-95%);}
main .case-studies-box .case-studies .grid-item--gigante::after{right:0;transform: translateX(95%);} */


main .case-studies-box .case-studies .case-item .bg{width: 0;min-height: 100dvh;height: 100%;position: absolute;top: 0;content: "";background-color: var(--black-color);}
main .case-studies-box .case-studies .case-item.left .bg{left:0;transform: translateX(-50dvw);}
main .case-studies-box .case-studies .case-item.right .bg{right:0;transform: translateX(50dvw);}
 
/* body.fixscroll main .case-studies-box .case-studies .case-item.grid-item--gigante{height: 100dvh; }
body.fixscroll main .case-studies-box .case-studies .case-item .case-details {overflow: auto;height: 100dvh;} */
 
main .case-studies-box .case-studies .case-item .case-details .case-details-inner{width: 100%;height: auto;position: relative;z-index: 2;}

main .details-content{padding:calc(55 / var(--main-width)) 0;grid-template-columns: 1fr;row-gap: calc(55 / var(--main-width));}
main .details-content.reversed .two-col {direction: rtl;}
main .details-content.reversed .two-col > * {direction: ltr;} 
 
main .details-content img{width: 100%;display: block;opacity: 0;transition: opacity .4s ease;}
main .details-content img:not([data-src]){opacity: 1;}

/* main .case-studies-box .case-studies .grid-item--gigante:not(.single){width: 100%;padding: 0;display: block;left: 0 !important;height: 100dvh !important; }
main .case-studies-box .case-studies .single{width: 47.654941373534335%;} */
main .case-studies-box .case-studies .grid-item--gigante{max-width: 100%;z-index: 97;height: auto;padding: 0;}
main .case-studies-box .case-studies .grid-item--gigante .case-details .cdd-a,
main .case-studies-box .case-studies .single .case-details .cdd-a{display: block;}
main .case-studies-box .case-studies .grid-item--gigante .case-details .cdd-a::-webkit-scrollbar{display: none;}
main .case-studies-box .case-studies .grid-item--gigante .blend-img{position: absolute;top: 0;}
main .case-studies-box .case-studies .left.grid-item--gigante .blend-img{left: 0;}
main .case-studies-box .case-studies .right.grid-item--gigante .blend-img{right: 0;}
 
/* .blend-img.psa{position: absolute;top: 0;} 
main .case-studies-box .case-studies .left .blend-img.psa{left: 0;}
main .case-studies-box .case-studies .right .blend-img.psa{right: 0;}*/

/* .grid-item--gigante .blend-img {
  height: 400px;
} */


main .details-content .two-col{display: grid;grid-template-columns: calc(569/var(--main-width)) calc(569/var(--main-width));gap: calc(56 / var(--main-width));align-items: stretch;}
main .details-content .one-col{width: 100%;gap: calc(55 / var(--main-width));display: grid;}
main .details-content .two-col :where(.left-side,.right-side){width: 100%;display: flex;flex-direction: column;row-gap: calc(55 / var(--main-width));}

/* main .details-content .two-col.first .left-side .image-box:first-of-type{opacity: 0;visibility: hidden;} */

main .details-content .image-box figure{margin: 0;}
main .details-content .image-box img {width: 100%;display: block;}

main .details-content :where(.info-box,.text-box,.image-box){width: 100%;display: flex;flex-direction: column;}

main .details-content :where(.info-box,.text-box,.image-box) :where(h1,h2,h3,h4,h5,h6,p,li,div,a){color: var(--white-color);}
main .details-content :where(.info-box,.text-box,.image-box) :where(h1,h2,h3,h4,h5,h6,p,li){width: 92%;}

main .details-content .text-box .heading-box{width: 100%;display: grid;margin-bottom:calc(25/var(--main-width));}
main .details-content .text-box .heading-box :where(h2,h3){font-family: "elza",sans-serif;font-size: calc(20/var(--main-width));line-height: calc(30/var(--main-width));letter-spacing: calc(-0.2/var(--main-width));margin-bottom: 0;}
main .details-content .text-box .heading-box h2{font-weight: 700;}
main .details-content .text-box .heading-box h3{font-weight: 400;}

main .details-content .text-box .quality-list {list-style: none;margin:0;padding: 0;display: flex;flex-wrap: wrap;gap:calc(40/var(--main-width));margin-bottom:calc(30/var(--main-width));}
main .details-content .text-box .quality-list p{width: auto;font-family: "elza",sans-serif;font-weight: 500; font-size: calc(11/var(--main-width));line-height: 1;letter-spacing: calc(1.43/var(--main-width));margin-bottom: 0;}
/* main .details-content .text-box ul li::before {content: "•";position: absolute;left: 0;top: 0;} */

.story-grid {display: grid;grid-template-columns: 345px 624px;gap: 16px;align-items: flex-start;}

main :where(.story-grid,.team-container,.text-box-grid) :where(h1,h2,h3,h4,h5,h6,p,li){color: var(--white-color);}

main .details-content .story-grid .left-side {position: relative;}
main .details-content .story-grid .left-side h1 {font-size: 75px;line-height: 63px;position: relative;display: inline-block;padding-right: 0px;letter-spacing: -2.25px;color: var(--white-color);}
main .details-content .story-grid .left-side h1::after {content: "+";position: absolute;right: auto;bottom: 0;margin-left: 12px;color: #FCD200;font-size: 110px;line-height: inherit; font-weight: 400;}
main .details-content .story-grid .right-side {position: relative;margin-top: 374px;}
main .details-content .story-grid .right-side p {font-size: 20px;line-height: 26px;letter-spacing: -0.2px;margin-bottom: 0; display: inline;}
main .details-content .story-grid .right-side p:last-of-type {margin-bottom: 0px;}

main .details-content .team-container {display: flex;gap: 5.7vw;width: 100%;margin: auto;padding: 0;align-items: flex-start;margin: 168px 0 0;}
main .details-content .team-container .team-left {width: 24.40%;}
main .details-content .team-container .image-box {position: relative;display: inline-block;width: 100%;height: 286px;}
main .details-content .team-container .image-box img {width: 100%;height: auto;object-fit: cover;display: block;}
main .details-content .team-container .image-box::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;mix-blend-mode: color;background-color: #707070;opacity: 1;pointer-events: none;}
main .details-content .team-container .top-info {margin-bottom: 60px;}
main .details-content .team-container .top-info h2 {font-size: 30px;line-height: 23px;letter-spacing: -0.75px;font-weight: 500;margin: 0 0 15px 0;color: #FCD200;}
main .details-content .team-container .top-info h3 {font-size: 20px;line-height: 23px;letter-spacing: -0.5px;color: #FFFFFF;margin: 0;font-weight: 400;}
main .details-content .team-container .team-right {width:64.422%;}
main .details-content .team-container .team-right .desc {font-size: 20px;line-height: 25px;letter-spacing: -0.2px;margin-bottom: 10px;margin-left: 0;font-weight: 400;}
main .details-content .team-container .team-right .exp-info {margin-left: 209px;}
main .details-content .team-container .team-right .exp-info p {font-size: 14px;line-height: 19px;letter-spacing: -0.14px;margin-bottom: 10px;font-family: "elza",sans-serif;font-weight: 400;font-style: normal;font-display: swap;}
main .details-content .team-container .team-right .exp-text:last-of-type {margin-bottom: 0px;}
main .details-content .team-container .team-right .exp-title{display: flex;align-items: center;font-size: 14px;line-height: 22px;letter-spacing: -0.14px;color: #FCD200;margin: 40px 0 20px 0;gap: 49px; font-family: "elza",sans-serif;font-weight: 500;font-style: normal;font-display: swap;}
main .details-content .team-container .team-right .exp-title::before {content: "";display: block;width: 159px;height: 1px;background: #f4cc21;}

main .details-content .text-box-grid {display: grid;grid-template-columns: 741px 1fr;gap: 0px;width: 100%;margin: auto;   box-sizing: border-box;margin-top: 168px;}
main .details-content .text-box-grid .left-box {width: 741px;}
main .details-content .text-box-grid .left-box p {font-size: 20px;line-height: 28px;margin: 0 0 10px 0;font-size: 17px;line-height: 22px;letter-spacing: -0.17px;}


.mouse-pointer {  
  pointer-events: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  transform: translate(-50%, -50%) !important;
  border-radius: 50%; 
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;  
}
.mouse-pointer.default { 
  width: calc(12 / var(--main-width));
  height: calc(12 / var(--main-width));
  background-color: black; 
}
.mouse-pointer.plus {
  width: calc(52 / var(--main-width));
  height: calc(52 / var(--main-width));
  background-image: url(../images/cursor-plus.svg);
  background-color: var(--primary-color);
}

.mouse-pointer.close {
  width: calc(52 / var(--main-width));
  height: calc(52 / var(--main-width));
  background-image: url(../images/cursor-close.svg);
  background-color: var(--black-color);
  transform: rotate(45deg);
}
footer article{border-top: solid 1px #000000;padding: calc(55/var(--main-width)) 0 calc(60/var(--main-width)) 0;}
footer article .f-top-box{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: calc(383/var(--main-width));}
footer article .f-top-box h2{width: calc(255/var(--main-width));font-size: calc(35/var(--main-width));font-weight: 600;line-height: 1;letter-spacing: calc(-0.77/var(--main-width));margin-bottom: 0;}
footer article .f-top-box ul{width: calc(730/var(--main-width));display: flex;justify-content: space-between;gap:calc(45/var(--main-width));}
footer article .f-top-box ul li h5{font-family: "elza",sans-serif;font-weight: 600;line-height: 1;margin-bottom: calc(12/var(--main-width));}
footer article .f-top-box ul li p{font-family: "elza",sans-serif;font-size: calc(12/var(--main-width));line-height: 1;letter-spacing: calc(0.3/var(--main-width));margin-bottom: calc(10/var(--main-width));}
footer article .f-top-box ul li p a::before{transform: scaleX(1);}
footer article .f-top-box ul li p a:hover::before,
footer article .f-top-box ul li p a.active::before{transform: scaleX(0);}

footer article .logo{width:100%;height:calc(115/var(--main-width));display:flex;background-position:center center;background-size:100% auto;background-repeat:no-repeat;background-image:url(../images/logo-large.svg);}

/*.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  transition: all 0.4s ease;
}
 .masonry {
  width: 100%;
}

.grid-sizer,
.grid-item {
  width: 569px;                
}

.grid-item {
  background: #777;
  margin-bottom: 40px;
  color: #fff;
  font-size: 22px;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
 
  transition: width .4s ease, height .4s ease, transform .4s ease;
}
 
.h380 { height: 380px; }
.h569 { height: 569px; }
.h700 { height: 700px; }
 
.grid-item.expanded {
  width: 100% !important;
  height: auto !important;
  min-height: 500px;  
  background: #555;  
}
 
@media (max-width: 1200px) {
  .grid-sizer,
  .grid-item {
    width: 100%;
  }
} */

@media only screen and (min-width:768px) and (max-width:1366px) {
  :root{
    --main-width: 1366 * 100dvw; 
  }
}
@media only screen and (min-width:0px) and (max-width:767px) {

  :root{
    --main-width: 375 * 100dvw; 
  }
 
  .inner {padding: 0 calc(26 / var(--main-width));}
  
  main :where(h1,h2,h3,h4,h5,h6,p,li){margin-bottom: calc(15 / var(--main-width));}
  h1{font-size: calc(59 / var(--main-width));line-height: calc(49 / var(--main-width));letter-spacing: calc(-2.01 / var(--main-width));}
  h2{font-size: calc(41 / var(--main-width));line-height: calc(50 / var(--main-width));letter-spacing: calc(-0.57 / var(--main-width));}
  h3{font-size: calc(20 / var(--main-width));line-height: calc(33 / var(--main-width));letter-spacing: calc(-0.2 / var(--main-width));}
  h4{font-size: calc(17 / var(--main-width));line-height: calc(22 / var(--main-width));letter-spacing: calc(-0.2 / var(--main-width));}
  h5{font-size: calc(15 / var(--main-width));line-height: calc(20 / var(--main-width));letter-spacing: calc(-0.15 / var(--main-width));}
  h6{font-size: calc(11 / var(--main-width));line-height: 1;}
  p,li{font-size: calc(13 / var(--main-width));line-height: calc(17 / var(--main-width));letter-spacing: calc(-0.44 / var(--main-width));margin-bottom: calc(15 / var(--main-width))} 

  main{ margin-top: calc(66 / var(--main-width));} 

  .intro-page{padding: 0 calc(26 / var(--main-width));}
 
  header .logo{width:calc(108 / var(--main-width));height:calc(11 / var(--main-width));}

  main .hero-box {width: 100%;margin-top: calc(130 / var(--main-width));margin-bottom: calc(149 / var(--main-width));}
  main .hero-box h1{width: 100%;margin-bottom:calc(20 / var(--main-width));}
  main .hero-box p{width: 100%;font-size: calc(15.5 / var(--main-width));line-height: calc(20 / var(--main-width));letter-spacing: calc(-0.22 / var(--main-width));}
 
  main .case-studies-box .inner>.info-box{padding: calc(15 / var(--main-width)) 0 calc(35 / var(--main-width));}
  main .case-studies-box .inner>.info-box p{width: 75%;} 

  main .case-studies-box .case-studies :where(.grid-sizer,.case-item){width: 100%;} 
  main .case-studies-box .case-studies .gutter-sizer{width: 0;}
  main .case-studies-box .case-studies .case-item:not(.grid-sizer) {margin-bottom: calc(calc(45 / var(--main-width)));}    
  main .case-studies-box .case-studies .case-item.center-item {left: auto !important;right: auto !important;}

  main .case-studies-box .case-studies .case-item .case-details{width: 100%;padding: calc(70/var(--main-width)) 0;}
  main .case-studies-box .case-studies .case-item .case-details::before{left: calc(-26 / var(--main-width));}
  main .case-studies-box .case-studies .case-item .case-details::after{right: calc(-26 / var(--main-width));}

  main .details-content .case-details-inner{row-gap: calc(45 / var(--main-width));}
  main .details-content .case-details-inner.v-bottom .two-col {grid-template-columns: 1fr;}

  main .case-studies-box .case-studies .grid-item--gigante:not(.single){width: 100%;}
  main .case-studies-box .case-studies .grid-item--gigante.single{width: 100%;} 
  main .case-studies-box .case-studies .grid-item--gigante .blend-img{width: 100%;}

  main .details-content .two-col{grid-template-columns: 1fr;gap: calc(45 / var(--main-width));}
  main .details-content .one-col{gap: calc(45 / var(--main-width));}
  main .details-content .two-col :where(.left-side,.right-side){row-gap: calc(45 / var(--main-width));}

  main .details-content .text-box .heading-box{width: 100%;display: grid;margin-bottom:calc(25/var(--main-width));}
  main .details-content .text-box .heading-box :where(h2,h3){font-size: calc(20/var(--main-width));line-height: calc(30/var(--main-width));letter-spacing: calc(-0.2/var(--main-width));margin-bottom: 0;}

  main .details-content .text-box .quality-list {gap:calc(20/var(--main-width));margin-bottom:calc(20/var(--main-width));}
  main .details-content .text-box .quality-list p{font-size: calc(10/var(--main-width));line-height: 1;letter-spacing: calc(1.43/var(--main-width));}
  
  .mouse-pointer {display: none !important;}

  footer article{padding: calc(35/var(--main-width)) 0;}
  footer article .f-top-box{margin-bottom: calc(191/var(--main-width));}
  footer article .f-top-box h2{width: 100%;font-size: calc(22/var(--main-width));letter-spacing: calc(-0.48/var(--main-width));margin-bottom: calc(20/var(--main-width));}
  footer article .f-top-box ul{width: 100%;display: grid;justify-content: start;gap:calc(16/var(--main-width));}
  footer article .f-top-box ul li{margin-bottom: 0;}
  footer article .f-top-box ul li h5{margin-bottom: calc(10/var(--main-width));font-size: calc(11/var(--main-width));line-height: 1;letter-spacing: calc(0.3/var(--main-width));}
  footer article .f-top-box ul li p{font-size: calc(10/var(--main-width));letter-spacing: calc(0.25/var(--main-width));margin-bottom: calc(6/var(--main-width));}

  footer article .logo{height:calc(35/var(--main-width));}

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

}