/***********/
/*RESET CSS*/
/***********/

/* Arabic Reading Dirtection */
html[dir="rtl"] {
  direction: rtl;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
* {
  margin: 0; padding: 0; border: 0; outline: 0;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
  margin:0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'], ul, ol, ul a, ol a{
  list-style: none;
  text-decoration: none;
  color: black;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
  margin:0;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label, .btn {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  text-decoration: none;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select, .btn {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}


/*******************/
/*SGMC STYLE BEGINS*/
/*******************/

@font-face {
  font-family:'Material Symbols Outlined';
  src: url('/fonts/material-icons-outlined.woff2') format('woff2'),
       url('/fonts/material-icons-outlined.woff') format('woff'),
       url('/fonts/material-icons-outlined.eot') format('eot'),
       url('/fonts/material-icons-outlined.otf') format('otf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.material-symbols-outlined {
  font-family:'Material Symbols Outlined';
  font-size: 2rem;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

/*SGMC Cursor*/
* {cursor: url('/images/cursor.png'), auto;}
li, a, button, [role="link"], [role="button"], .linkable, .cursor, a img, a p, .btn, .faq-question{cursor: url('/images/cursor-hover.png'), auto;}
*:active {cursor: url('/images/cursor-active.png'), auto;}

/*Custom Cursonr*/
/* Circular cursor styles */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  pointer-events: none; /* Ensure it doesn't block clicks */
  transform: translate(-50%, -50%);
  z-index: 1000;
  transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease, opacity 0.2s;
}

/* Enlarged cursor on hover (for links and buttons) */
.link-hover .custom-cursor {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.3);
}

/*Screen Reader Text*/
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

/*Headings & Texts*/
body {font-family:"Roboto Slab", serif;}
nav, h1, .h1, h2, .h2, h3, .h3, button, .btn {font-family: "Outfit", sans-serif;}
strong{font-weight: 600;}
p.fontalt, ul.fontalt, span.fontalt, figcaption.fontalt{font-family: "Outfit", sans-serif;}
nav.fontalt, h1.fontalt, .h1.fontalt, h2.fontalt, .h2.fontalt, h3.fontalt, .h3.fontalt {font-family:"Roboto Slab", serif;}

h1, .h1 {font-size: clamp(2rem, 2.9vw, 4rem); font-weight: 700; line-height: 1.15;}
h2, .h2 {font-size: clamp(1.6rem, 2.2vw, 3.2rem); font-weight: 700; line-height: 1.15;}
h3, .h3 {font-size: clamp(1.4rem, 2.5vw, 2.9rem); font-weight: 200; text-transform: initial; margin:2rem 0 0 0; line-height: 1.1;}
h4, .h4 {font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 200; text-transform: initial; margin:1.2rem 0 0 0;}
p, .p, .li {font-size: 1rem; margin:2rem 0 0 0;}
p + p {margin:1.2rem 0 0 0; text-indent: 1rem;}
[class*="h"] + p {margin:2rem 0 0 0; text-indent: 0;}
section br{display: none;}

.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

p.s-text{font-size: 0.95rem; }
h1 + .h3, .h1 + .h3{font-family:"Roboto Slab", serif; margin-top: 5px;}
.separator{width: 100%; height: 80px;}
.quote{margin:2rem auto; font-size: clamp(1.2rem, 1.6vw, 1.4rem); font-weight: 200; text-align: right;}
  .odd .quote{text-align: right;}
  .img-art.odd .quote{text-align: left;}

/*Font Size Tiny*/
h1.tiny, .h1.tiny {font-size: clamp(1.2rem, 1.4vw, 1.6rem);}
h2.tiny, .h2.tiny {font-size: clamp(1.1rem, 1.3vw, 1.4rem);}
h3.tiny, .h3.tiny {font-size: clamp(1rem, 1.2vw, 1.2rem);}
p.tiny, .p.tiny, .li.tiny {font-size: 0.75rem;}
  
/*Font Size Small*/
h1.small, .h1.small {font-size: clamp(1.5rem, 1.8vw, 3rem);}
h2.small, .h2.small {font-size: clamp(1.2rem, 1.4vw, 2rem);}
h3.small, .h3.small {font-size: clamp(1.1rem, 1.2vw, 1.6rem);}
h4.small, .h4.small {font-size: clamp(1.1rem, 1.2vw, 1.6rem);}
p.small, .p.small, .li.small {font-size: 0.85rem;}

/*Font Size Big*/
  h1.big, .h1.big {font-size: clamp(3rem, 4.5vw, 6rem);}
  h2.big, .h2.big {font-size: clamp(2.4rem, 3.3vw, 4.8rem);}
  h3.big, .h3.big {font-size: clamp(2.25rem, 2.85vw, 4.35rem); margin:2rem 0 0 0;}
  p.big, .p.big, .li.big {font-size: 1.2rem;}

  /*Font Size Huge*/
  h1.huge, .h1.huge {font-size: clamp(4rem, 6vw, 8rem);}
  h2.huge, .h2.huge {font-size: clamp(3.2rem, 4.4vw, 6.4rem);}
  h3.huge, .h3.huge {font-size: clamp(3rem, 3.8vw, 5.8rem);}
  p.huge, .p.huge, .li.big {font-size: 1.4rem;}


/*Two column lists*/
.two-column-flex {display: flex; flex-wrap: wrap; gap: 0;}
.two-column-flex li {flex: 1 1 100%; list-style-type: none;}

/*Anchors & Buttons*/
#main a{color: fuchsia; text-decoration: none; transition: all 0.3s ease; cursor: url('/images/cursor-hover.png'), auto; font-weight: 600;}
#main a:active{cursor: url('/images/cursor-active.png'), auto;}
#main a:hover, #main a:active{text-decoration: none; color: lime;}
#main a{text-indent: 0;}
#main a.btn{color: white; text-align: center;}
#main a.btn:hover{text-decoration: none;}

button, .btn {display: block; max-width:260px; width: 320px; margin: 20px auto; padding: 10px; line-height: 30px; border-radius: 25px; background-color: black; color: #fff; border: 2px solid black; font-size: 20px; font-weight: 700; transition: all 0.4s ease;}
button:hover, .btn:hover {background-color: lime; box-shadow: 0 0 8px lime; border: 2px solid limegreen;}
button.no-btn, .btn.no-btn {max-width:none; width: auto; margin: 0; padding: 0; border-radius: 0; background-color: transparent; color: black; border: none; font-size: inherit; line-height: inherit; font-weight: inherit;}
button.no-btn:hover, .btn.no-btn:hover {background-color: transparent; box-shadow: none; border: none;}

/*Text Align*/
.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

/*Font Weight*/
.thin {font-weight: 100;}
.light-w {font-weight: 200;}
.normal {font-weight:400;}
.bold {font-weight: 700;}
.heavy {font-weight: 900;}

/*Font Weight*/
.italic{font-style: italic;}

/*Font Colors*/
.green {color: lime;}
.yellow {color: #fff100;}
.pink {color: fuchsia;}
.blue {color: #4cfce6;}
.orange {color: #ffa500;}
.red {color: #ff0000;}
.light {color: #f1f1f2;}
.dark {color: #999;}

/*Background Colors*/
.bg-green {background-color: lime;}
.bg-yellow {background-color: #fff100;}
.bg-pink {background-color: fuchsia; color:white;}
.bg-blue {background-color: #4cfce6;}
.bg-orange {background-color: #ffa500;}
.bg-red {background-color: #ff0000;}
.bg-light {background-color: #f1f1f2;}
.bg-dark {background-color: #404041; color:white;}

/*Site Widths*/
.site-header-inner, .site-content .grid-container, .site-footer,  .site-content .recipe{width: 740px; max-width: 90%; margin: 0 auto;}
#content {overflow: hidden;}

/*Grid System*/
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 12 columns */
  gap: 30px;
  justify-content: start; /* Align to LEFT */
  align-content: start;   /* Align to TOP */
}

.grid-container *{position: relative;}

.grid-12 {grid-column: span 12;}
.grid-11 {grid-column: span 12;}
.grid-10 {grid-column: span 12;}
.grid-9 {grid-column: span 12;}
.grid-8 {grid-column: span 12;}
.grid-7 {grid-column: span 12;}
.grid-6 {grid-column: span 12;}
.grid-5 {grid-column: span 12;}
.grid-4 {grid-column: span 12;}
.grid-3 {grid-column: span 12;}
.grid-2 {grid-column: span 6;}
.grid-1 {grid-column: span 12;}

.grid-hide{display: none;}

/* Subgrid*/
.subgrid-container {display: grid; grid-template-columns: subgrid; gap: 20px;}
.sub-grid-12 {grid-column: span 12;}
.sub-grid-6 {grid-column: span 6;}
.sub-grid-4 {grid-column: span 6;}
.sub-grid-3 {grid-column: span 6;}

/*************************/
/*Backgrounds & Ornaments*/
/*************************/

[class*="sprite-bg"] {width: 100%; background-image: none; background-size: cover; background-repeat:no-repeat;  z-index: -1;}

.mid-green {background-color: lime;}
.mid-yellow {background-color: #fff100;}
.mid-pink {background-color: fuchsia;}
.mid-blue {background-color: #4cfce6;}
.mid-orange {background-color: #ffa500;}
.mid-red {background-color: #ff0000;}
.mid-light {background-color: #f1f1f2;}
.mid-dark {background-color: #404041; color:white;}
.mid-black {background-color: black; color:white; }
.mid-white{background-color: white;}

[class*="marker"]{padding: 1% 4% 0; background-position: 0 11.8%; overflow: hidden; transform: scaleX(1.2); transform-origin: center;}
.marker-green{background-position: 0 0;}
.marker-yellow{background-position: 0 1.6%;}
.marker-pink{background-position: 0 3.3%;}
.marker-blue{background-position: 0 4.9%;}
.marker-red{background-position: 0 6.4%;}
.marker-orange{background-position: 0 8%;}
.marker-light{background-position: 0 9.5%;}
.marker-black{background-position: 0 11.1%;}

[class*="top-"].sprite-bg-1 {padding-top: 26.6%; margin-bottom: -2px;}
[class*="bottom-"].sprite-bg-1 {padding-top: 16.6%; margin-top: -2px;}
.sprite-bg-1.slogan{margin-top: -1%;}

.top-green-1 {background-position: 0 0;}
.bottom-green-1 {background-position: 0 1.5%;}
.top-yellow-1 {background-position: 0 2.3%;}
.bottom-yellow-1 { background-position: 0 3.7%;}
.top-pink-1 {background-position: 0 4.55%;}
.bottom-pink-1 { background-position: 0 5.95%;}
.top-blue-1 {background-position: 0 6.8%;}
.bottom-blue-1 { background-position: 0 8.2%;}
.top-red-1 {background-position: 0 9.05%;}
.bottom-red-1 { background-position: 0 10.45%;}
.top-orange-1 {background-position: 0 11.3%;}
.bottom-orange-1 { background-position: 0 12.7%;}
.top-light-1 {background-position: 0 13.5%;}
.bottom-light-1 { background-position: 0 14.9%;}
.top-dark-1 {background-position: 0 15.8%;}
.bottom-dark-1 { background-position: 0 17.1%;}
.top-black-1 {background-position: 0 18%;}
.bottom-black-1 { background-position: 0 19.3%;}

.top-black-2 {background-position: 0 20.3%;}
.bottom-black-2 { background-position: 0 21.6%;}
.top-light-2 {background-position: 0 22.55%;}
.bottom-light-2 { background-position: 0 23.9%;}

.top-black-3 {background-position: 0 24.75%;}
.bottom-black-3 { background-position: 0 26.1%;}
.top-light-3 {background-position: 0 27.1%;}
.bottom-light-3 { background-position: 0 28.25%;}

.top-black-4 {background-position: 0 29.2%;}
.bottom-black-4 {background-position: 0 30.7%;}
.top-light-4 {background-position: 0 31.6%;}
.bottom-light-4 {background-position: 0 32.8%;}

.top-light-6 {background-position: 0 33.8%;}
.bottom-light-6 {background-position: 0 35%;}
.top-black-6 {background-position: 0 36%;}
.bottom-black-6 { background-position: 0 37.3%;}
.top-line-6 {background-position: 0 38.25%;}
.bottom-line-6 { background-position: 0 39.55%;}

.top-light-7 {background-position: 0 40.5%;}
.bottom-light-7 { background-position: 0 41.7%;}
.top-black-7 {background-position: 0 42.8%;}
.bottom-black-7 {background-position: 0 44%;}
.top-line-7 {background-position: 0 45%;}
.bottom-line-7 { background-position: 0 46.25%;}

.top-light-8 {background-position: 0 47.2%;}
.bottom-light-8 { background-position: 0 48.45%;}
.top-black-8 {background-position: 0 49.42%;}
.bottom-black-8 { background-position: 0 50.7%;}
.top-line-8 {background-position: 0 51.8%;}
.bottom-line-8 { background-position: 0 53%;}

.top-light-9 {background-position: 0 53.9%;}
.bottom-light-9 {background-position: 0 55.3%;}
.top-black-9 {background-position: 0 56.2%;}
.bottom-black-9 { background-position: 0 57.5%;}
.top-line-9 {background-position: 0 58.4%;}
.bottom-line-9 { background-position: 0 59.8%;}

.top-light-10 {background-position: 0 60.7%;}
.bottom-light-10 { background-position: 0 62%;}
.top-black-10 {background-position: 0 62.9%;}
.bottom-black-10 { background-position: 0 64.3%;}
.top-line-10 {background-position: 0 65.2%;}
.bottom-line-10 { background-position: 0 66.5%;}

.top-light-11 {background-position: 0 67.5%;}
.bottom-light-11 { background-position: 0 68.6%;}
.top-black-11 {background-position: 0 69.8%;}
.bottom-black-11 { background-position: 0 70.9%;}
.top-line-11 {background-position: 0 72.2%;}
.bottom-line-11 { background-position: 0 73.3%;}

.top-line-12 {background-position: 0 74.3%;}
.bottom-line-12 { background-position: 0 75.3%;}


.bg-container {width: 100%; position: relative; overflow: hidden;}
.bg-mark {z-index: 0; position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); transform-origin: center; max-width: none; overflow: hidden; z-index: 0;}
.section-w .bg-mark{z-index: -1;}
.bg-mark.tiny {transform: translate(-50%, -50%) scale(0.5); transform-origin: center;}
.bg-mark.small {transform: translate(-50%, -50%) scale(0.8); transform-origin: center;}


  .magu-1-yellow {padding-top: 122%; background-position: 0 14.5%;}
  .fish-pink {padding-top: 56.6%; background-position: 0 27.1%;}
  .paw-yellow {padding-top: 91.6%; background-position: 0 21.5%;}
  .scratch-pink {padding-top: 118.3%; background-position: 0 31.8%;}

  .ball-light {padding-top: 110%; background-position: 0 39%;}
  .feathers-light {padding-top: 86.6%; background-position: 0 45.5%;}
  .paw-light  {padding-top: 91.6%; background-position: 0 50.4%;}
  .scratch-light {padding-top: 118.3%; background-position: 0 56%;}

  .ball-dark {padding-top: 110%; background-position: 0 62%;}
  .feathers-dark {padding-top: 86.6%; background-position: 0 67.1%;}
  .paw-dark {padding-top: 91.6%; background-position: 0 72.1%;}
  .scratch-dark {padding-top: 118.3%; background-position: 0 77.7%;}

  .ball-white {padding-top: 110%; background-position: 0 84%;}
  .feathers-white {padding-top: 86.6%; background-position: 0 88.5%;}
  .paw-white {padding-top: 91.6%; background-position: 0 93.6%;}
  .scratch-white {padding-top: 118.3%; background-position: 0 100%;}


  /*Separators*/

  .brd{width: 100%; margin: 10px 0 0; padding-top:23.5%; transform: scaleY(0.3);}


/**************/
/*Header & Nav*/
/**************/
.site-header {
  position: fixed;
  top:0;
  width: 100%;
  height: 56px;
  padding:8px 0;
  margin:0;
  background: #FFF;
  box-shadow: 0 2px 4px #DDD;
  z-index: 1;
}
    .site-logo {float: right;}
    .site-logo-img {float: right; display: block; width: auto; transition: all 0.5s ease;}
      .site-logo-img img {width:120px; margin:8px 0 8px 0; float: right;}
    .logo-separator {float: right; width: 3px; height: 32px; margin:4px 12px 4px 15px; background: black; transition: all 0.5s ease;}
    .site-title {float: left; display: block; font-size: 11px; line-height: 1.2; margin-top:7px;}
    .site-logo:hover .logo-separator{background: lime;}
    .site-logo:hover .site-logo-img{transform: scale(105%);}
    .site-logo p{color: black;}
    .site-logo:hover p{color:lime;}

  .site-lang {width:120px; margin-right: auto; margin-left: 0;}

    #chat-nav{opacity: 0; visibility: hidden; transition: all 0.3s ease;}
      #chat-nav .tooltip-content {left: auto; margin-left: auto; right: 50%; margin-right: -140px;}
      #chat-nav .tooltip-content::after {right: 50%; margin-right: 30px; left: auto; margin-left: auto;}

    #chat-nav.show{opacity: 1; visibility: visible;}
    .material-symbols-outlined.chat-bubble {font-size: 30px; display: block; line-height: 47px; margin-left: 5px; float: left; position: relative;}
    .material-symbols-outlined.chat-bubble:hover{color: lime;}
      .chat-bubble .one {display:block; position: absolute; top:0; right:-2px; z-index: 2; width: 16px; height: 16px; border-radius: 50%; font-size: 12px; color: white; background-color: red; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); line-height: 16px; text-align: center; font-family: "Outfit", sans-serif; font-weight: 700; transition: all 0.3s ease;}
      .chat-bubble:hover .one {transform: scale(130%);}
      
    .toggle-menu{float:left; width: 20px; height: 28px; margin: 6px auto auto 0;}
      .toggle-menu div {width: 20px; height: 2px; background: black; margin-top: 6px; transition: all 0.5s ease;}
      .toggle-menu div + div {margin-top: 6px;}
      
      .toggle-menu.tog-act {position: relative;}
      .toggle-menu.tog-act div:nth-child(even) {display:none;}
      .toggle-menu.tog-act div {width: 26px; transform: rotate(45deg); position: absolute; top: 14px; margin:0;}
      .toggle-menu.tog-act div + div {width: 26px; transform: rotate(-45deg); position: absolute;  top: 14px; margin:0;}
      


/*Main Navigation*/
.main-navigation {
  position:absolute;
  width: 100%;
  top:56px;
  right:left;
  box-shadow: 0 2px 4px #DDD;
  padding:0;
  background: #FFF;
  transition: all 0.3s linear;
  overflow: hidden;
  max-height: 0;
}

.main-navigation.active {max-height: 600px; padding:12px 0 16px;}

  .main-navigation ul, .main-navigation li {width: 100%;}
  .menu a{display: block;}

  .menu > li {
    font-size:20px;
    font-weight: 700;
    line-height: 50px;
    width: 100%;;
    padding: 0;
    opacity:0;
    transition: all 0.2s ease;
    }

    .menu > li:nth-child(2){transition-delay: 80ms;}
    .menu > li:nth-child(3){transition-delay: 160ms;}
    .menu > li:nth-child(4){transition-delay: 240ms;}
    .menu > li:nth-child(5){transition-delay: 320ms;}
    .menu > li:nth-child(6){transition-delay: 400ms;}
    .menu > li:nth-child(7){transition-delay: 480ms;}
    .menu > li:nth-child(8){transition-delay: 560ms;}
    .menu > li:nth-child(9){transition-delay: 640ms;}
    .menu > li:nth-child(10){transition-delay: 720ms;}

    .active .menu > li {
    opacity:1;
    padding: 0 30px 0 0;
  }
    .menu li:hover, .main-navigation ul li:focus {color:lime;}
      .sub-menu {
        transition: all 0.3s linear;
        overflow: hidden;
        max-height: 0;
        border-bottom-left-radius: 80px 60px;
      }
      .sub-menu.open{max-height: 600px; border-right:4px solid lime;}      
        .sub-menu li {font-size:17px; font-weight: 300; padding: 0; opacity: 0; line-height: 32px; transition: all 0.6s ease;}
        .sub-menu.open li{opacity: 1; margin-bottom:6px;}
          .sub-menu.open a{padding: 0 30px 0 0;}
        .menu ul li:hover li, .menu li:focus li {color:black;}
        .sub-menu li:hover, .sub-menu ul li li:focus {color:lime;}

/*Main Content*/
.site-content {margin:70px auto 90px;}

/*Footer*/
.site-footer {margin:0 auto 20px; border-top:1px solid black; padding-top:30px; position: relative;}
  
  #Contact .foot-tit{position: relative; z-index: 1; margin:0 auto 70px; max-width: 360px;  line-height: 1.2;}

  .claim-footer br{display: none;}

  .footer-nav { overflow:hidden;}
  .footer-nav ul {max-height:250px; margin-bottom:20px;}
  .footer-nav ul li {opacity:1; text-align: center;}

  .logo-footer {margin:30px auto 70px; clear: both; text-align: center;}
  .logo-footer img {margin:0 auto 15px; padding:0 0 20px; border-bottom: 1px solid black; width: 180px;}

  .copyright-content {text-align: center; display: block; width:100%; line-height: 1.6; text-decoration: none;}

  .icons{width: 98px; margin:0 auto; display: block; padding-bottom: 40px;}
    .icon img{width: 20px; height: 20px; float: left; display: block;}
      .x-icon img{margin-right: 6px;}

    .lang-nav{text-align: center; width:100%; position: absolute; bottom:50px; opacity: 0; visibility: hidden; transition: all 0.5s ease;}
    .lang-nav-footer.show, .lang-nav-header.show{opacity: 1; visibility: visible;}
    .lang-nav a, .lang-nav span{color: black; font-family: "Outfit", sans-serif; font-weight: 400; font-size: 12px; line-height: 14px; text-align: center; text-decoration: none; display: inline-block; width: 24px; height: 14px; margin: 15px 0 0 3px; padding: 0 0 0 3px; border-left: 1px  solid black; transition: all 0.3 ease;}
    .lang-nav a:hover, .lang-nav span:hover{color: lime; font-weight: 700;}
    .lang-nav a.marked{font-weight: 700;}
    .lang-nav a:last-child, .lang-nav span:last-child{border-left:none;}

    header .lang-nav{text-align: center; width:44px; padding:1px 5px 7px; position: fixed; bottom:10px; left:5px; right: auto; z-index: 1000; border-radius:27px; border: 1px solid #000; visibility: hidden; opacity: 0; transition: all 0.3s ease; background:#FFF;}
    header .lang-nav.show{visibility: visible; opacity: 1;}
    header .lang-nav a, header .lang-nav span{color: transparent; font-family: "Outfit", sans-serif; font-weight: 600; font-size: 8px; text-align: center; text-decoration: none; display: inline-block; width: 30px; height: 30px; line-height: 30px; margin: 6px 0 0 0; padding: 0; border-radius: 50%; border: 1px  solid #DDD; background: url("/images/flags.webp") center center; background-position: -6px -2px; transition: all ease 0.3s;}
    header .lang-nav .es{background-position: -44px -4px;}
    header .lang-nav .us{background-position: -3px -4px}
    header .lang-nav .fr{background-position: -85px -4px;}
    header .lang-nav .de{background-position: -123px -4px}
    header .lang-nav .ae{background-position: -2px -42px;}
    header .lang-nav .qa{background-position: -42px -42px;}
    header .lang-nav .sa{background-position: -84px -42px;}
    header .lang-nav .en{background-position: -123px -42px;}
    header .lang-nav a:hover, header .lang-nav span:hover{background-color: lime; font-weight: 700; color: #fff; transform: scale(1.1); transform-origin: center; border: 2px  solid #000;}
    header .lang-nav a.marked{font-weight: 600; }

/*****************/
/*Functionalities*/
/*****************/

/*Scroll to Top*/
.scroll-top.material-symbols-outlined {position:fixed; top:105px; left:0; right:auto; font-size: 40px; font-weight: 900; opacity:0; transition: all 1s ease; z-index: 2;}
.scroll-top.material-symbols-outlined.show {opacity:1;}  
.scroll-top:hover, .scroll-top:focus {color: lime;}

/*Mail & Whatsapp*/
.contact-icon{visibility: hidden; opacity:0; width:50px; height: 40px; position: fixed; background-color: black; top:150px; left: 0; right: auto; border-top-right-radius: 30px; border-bottom-right-radius: 30px; text-decoration: none; transition: all 0.4s ease; box-sizing: content-box;}
.contact-icon:hover{background-color: lime; width: 60px;}
.contact-icon.whats-function{top:195px;}
.contact-icon span{display: block; width: 100%; line-height: 40px; margin: 0 15px 0 auto; color: white; font-size: 25px; text-decoration: none; text-align: right;}
.contact-icon.show{visibility: visible; opacity:1;}

/*Popup Contact*/  
.display-contact {position: fixed; bottom:0; right:500px; opacity:0; z-index: 0; display: block; transition: all 0.4s ease;}
.display-contact.show { bottom:0; right:10px; display: block; opacity: 1; z-index: 3;}
.display-contact img {width: 290px; height: auto; transition: all 0.2s ease;}
  .display-contact img:hover {transform: translateX(10px);}
.close-btn {max-width:none; width: auto; margin: auto; padding: 10px; background: transparent; color: black; border: none; position: absolute; right:8px; top:-4px; font-size: 32px; font-weight: 700; font-family: "Outfit", sans-serif; z-index: 10;} 
.close-btn:hover{opacity: 0.7; background: transparent; border: none; box-shadow: none;}

/*Modals*/
.overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 1000; visibility: hidden; opacity: 0; transition:all 0.4s ease;}
.overlay.show {visibility: visible; opacity: 1; display: flex;}
.modal {color: black; background-color: white; padding: 20px 20px 0; border-radius: 10px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); max-width: 360px; text-align: center; visibility: hidden; opacity: 0; transition:all 0.4s ease; position: relative; border:2px solid black;}
  #overlay.show .modal{visibility: visible; opacity: 1;}
  .modal .h2 {margin-top: 25px;}
  .modal p{margin: 10px auto;}
  .modal .close-modal {color: black; background: transparent; width: 32px; height: 32px;  max-width: none; margin:0; padding: 0; border: none; border-radius: 5px; transition: all 0.3s ease; position: absolute; top:10px; right:8px; font-size: 32px;}
    .modal .close-modal span{font-size: 32px; line-height: 32px; display: block; text-align: center; width: 32px; margin:0;}
    .modal .close-modal:hover {color:lime; border: none; box-shadow: none;}
  .modal .come-on{width: 110px; height: auto; position: absolute; top:-20px; left: -40px; opacity:0; transform: translateX(-40px) rotate(-5deg); transition: all 0.3s linear 0.3s;}
  .modal .come-on-2{width: 90px; height: auto; position: absolute; top:-40px; left: 45px; opacity:0; transform: scale(40%); transition: all 0.3s linear 0.6s;}
  #overlay.show .come-on{opacity: 1;  transform: translateX(0) rotate(5deg);}
  #overlay.show .come-on-2{opacity: 1; transform: scale(100%);} 

/*Modal Forms*/
form {max-width: 320px; margin: auto; padding: 20px;}
  label {display: inline; padding: 0; font-size: 1px; color: white; position: absolute; z-index: -1;}
  input, textarea {float: left; width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ccc; border-radius: 4px; font-size: 18px; position: relative;}
  input:hover, textarea:hover { cursor: text;}
  input:focus, textarea:focus {border: 2px solid lightgreen; box-shadow: 0 0 6px lightgreen;}
  input::placeholder, textarea::placeholder {color:#999; font-weight: 300; font-size: 16px;}

  .tooltip-form {display: none; max-width: 320px; background-color: #ffdddd; color: #900; padding: 5px 10px; border-radius: 4px; margin-top: -10px; margin-bottom: 10px; font-size: 14px; float: left; text-align: left;}
  .error {border: 2px solid red; box-shadow: 0 0 6px red;}
  .success {border: 2px solid greenyellow; box-shadow: 0 0 6px greenyellow;}
  .modal p.received{margin-top: 0; line-height: 1.2; font-size:20px; color: limegreen; margin-bottom:25px; font-weight: 700;}

/*Tooltips*/  
.tooltip {position: relative; display: inline-block;}
.tooltip-content {
    display: block;
    visibility: hidden;
    width: 190px;
    background-color: white;
    border: 2px solid lime;
    color: black;
    text-align: left;
    border-radius: 10px;
    padding: 20px 30px 20px 20px;
    position: absolute;
    z-index: 1001;
    bottom: 125%; /* Position above the element */
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

#chat-nav .tooltip-content {margin-left: -160px;}
#chat-nav .tooltip-content::after {margin-left: 40px;}

.tooltip-content.none {display: none;}

.tooltip-content.bottom {top: 125%; bottom: auto;}
.tooltip-content.left {margin-left:-90px;}
.tooltip-content.right {margin-left:-190px;}

.tooltip-content span{display: block; margin: 0; line-height: 1.5; white-space: normal;word-wrap: normal; font-family:"Roboto Slab", serif; font-weight: 700; font-size: 1rem;}
.tooltip-content span + span{font-weight: 300; margin-top:5px; font-size: 0.9rem;}
.tooltip-content img {max-width: 90px; height: auto; position: absolute; right:-50px; top:-25px; transform: translateX(20px) rotate(5deg); transition: all 0.2s ease 0.3s;}

/* Arrow for the tooltip */
.tooltip-content::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -75px; border-width: 10px; border-style: solid; border-color: lime transparent transparent transparent;}
.tooltip-content.bottom::after {top: auto; bottom: 100%; left: 50%; margin-left: -75px; border-width: 10px; border-style: solid; border-color: transparent transparent lime transparent;}
.tooltip-content.left::after {margin-left:-55px;}
.tooltip-content.right::after {margin-left:45px;}

.tooltip:hover .tooltip-content{visibility: visible; opacity: 1;}
  .tooltip:hover .tooltip-content img{visibility: visible; opacity: 1; transform: translateX(0) rotate(-5deg);}

/* Scroll Spy*/
.scroll-spy-bar {position: fixed; bottom: 60px; left: 24px; width: 4px; background-color: black; height: 0; z-index: 20; transition: height 0.3s ease; border-radius: 2px;}
.scroll-spy-active {opacity: 1; visibility: visible; outline: 2px solid white;}

/* Scroll Spy Indicator Styling */
.scroll-spy-indicator {position: absolute; top: 10px; right: -3px; display: flex; flex-direction: column; gap: 12px; min-height: 1px; z-index: 20;}

.scroll-spy-indicator span {display: block; width: 10px; height: 10px; background-color: white; outline: 2px solid black; line-height: 10px; color: white; border-radius: 50%; transition: all 0.3s ease;}
.scroll-spy-indicator span:hover {background-color: fuchsia;}
.scroll-spy-indicator span a {display: block; position: absolute; left:20px; width: auto; height: 20px; line-height: 7px; font-size: 12px; text-decoration: none; font-family: "Outfit", sans-serif; color: black; display: none; text-shadow: 1px 1px 1px white;}
.scroll-spy-indicator span a:hover {color: fuchsia;}

/*Animations sprite*/
.sprite{background-image: none; background-size: 1200px 3060px; background-repeat:no-repeat;}

@keyframes walk {		
	0% { background-position: -82px -600px; visibility: visible;}
	0.0001% { background-position: -82px -600px; visibility: hidden;}
	0.0002% { background-position: -162px -600px; visibility: hidden;}
	0.0003% { background-position: -162px -600px; visibility: visible;}

  25% { background-position: -162px -600px; visibility: visible;}
	25.0001% { background-position: -162px -600px; visibility: hidden;}
	25.0002% { background-position: -82px -600px; visibility: hidden;}
	25.0003% { background-position: -82px -600px; visibility: visible;}
			
	50% { background-position: -82px -600px; visibility: visible;}
	50.0001% { background-position: -82px -600px; visibility: hidden;}
	50.0002% { background-position: -2px -600px; visibility: hidden;}
	50.0003% { background-position: -2px -600px; visibility: visible;}

  75% { background-position: -2px -600px; visibility: visible;}
	75.0001% { background-position: -2px -600px; visibility: hidden;}
	75.0002% { background-position: -82px -600px; visibility: hidden;}
	75.0003% { background-position: -82px -600px; visibility: visible;}
}

.animation-walk{width:80px; height: 95px; position: fixed; left:2px; bottom:10px; zoom:0.6; background-position: -82px -600px; z-index: 30; opacity: 0; visibility: hidden; transition: all 0.3s ease;}
.animation-walk.show{opacity: 1; visibility: visible;}
.animation-walk.animate{animation: walk 1s infinite;}

@keyframes hello {		
	0% { background-position: 0 -730px; opacity: 1;   opacity:0.5; margin-left:20px;}
	0.0001% { background-position: 0 -730px; opacity: 0;  opacity:0.5; margin-left:20px;}
	0.0002% { background-position: -380px -730px; opacity: 0;  margin-left:20px; opacity:0.5;}
	0.0003% { background-position: -380px -730px; opacity: 1;   margin-left:20px; opacity:0.5;}
  2% { background-position: -380px -730px; opacity: 1;   margin-left:20px;}
	2.0001% { background-position: -380px -730px; opacity: 0;  margin-left:20px;}
	2.0002% { background-position: 0 -730px; opacity: 0;}
	2.0003% { background-position: 0 -730px; opacity: 1;}
  4% { background-position: 0 -730px; opacity: 1;}
	4.0001% { background-position: 0 -730px; opacity: 0;}
	4.0002% { background-position: -380px -730px; opacity: 0;}
	4.0003% { background-position: -380px -730px; opacity: 1;}
  6% { background-position: -380px -730px; opacity: 1;}
	6.0001% { background-position: -380px -730px; opacity: 0;}
	6.0002% { background-position: 0 -730px; opacity: 0;  margin-right:20px; opacity:1;}
	6.0003% { background-position: 0 -730px; opacity: 1;   margin-right:20px; opacity:1;}
  8% { background-position: 0 -730px; opacity: 1;   margin-right:20px; opacity:1;}
	8.0001% { background-position: 0 -730px; opacity: 0;  margin-right:20px; opacity:1;}
	8.0002% { background-position: -380px -730px; opacity: 0}
	8.0003% { background-position: -380px -730px; opacity: 1;}
  10% { background-position: -380px -730px; opacity: 1;}
	10.0001% { background-position: -380px -730px; opacity: 0;}
	10.0002% { background-position: 0 -730px; opacity: 0;}
	10.0003% { background-position: 0 -730px; opacity: 1;}
  12% { background-position: 0 -730px; opacity: 1;}
	12.0001% { background-position: 0 -730px; opacity: 0;}
	12.0002% { background-position: -380px -730px; opacity: 0;}
	12.0003% { background-position: -380px -730px; opacity: 1;}
  14% { background-position: -380px -730px; opacity: 1;   margin-left:20px;}
	14.0001% { background-position: -380px -730px; opacity: 0;  margin-left:20px;}
	14.0002% { background-position: 0 -730px; opacity: 0;  margin-left:20px;}
	14.0003% { background-position: 0 -730px; opacity: 1;   margin-left:20px;}
  16% { background-position: -760px -730px; opacity: 1;}
	16.0001% { background-position: -760px -730px; opacity: 0;}
	16.0002% { background-position: 0 -1200px; opacity: 0;}
	16.0003% { background-position: 0 -1200px; opacity: 1;}
  20% { background-position: 0 -1200px; opacity: 1;}
	20.0001% { background-position: 0 -1200px; opacity: 0;}
	20.0002% { background-position: -760px -1200px; opacity: 0;}
	20.0003% { background-position: -760px -1200px; opacity: 1;}
  28% { background-position: -760px -1200px; opacity: 1;}
	28.0001% { background-position: -760px -1200px; opacity: 0;}
	28.0002% { background-position: -380px -1200px; opacity: 0;}
	28.0003% { background-position: -380px -1200px; opacity: 1;}
  36% { background-position: -380px -1200px; opacity: 1;}
	36.0001% { background-position: -380px -1200px; opacity: 0;}
	36.0002% { background-position: 0 -1200px; opacity: 0;}
	36.0003% { background-position: 0 -1200px; opacity: 1;}
  44% { background-position: 0 -1200px; opacity: 1;}
	44.0001% { background-position: 0 -1200px; opacity: 0;}
	44.0002% { background-position: -760px -1200px; opacity: 0;}
	44.0003% { background-position: -760px -1200px; opacity: 1;}
  52% { background-position: -760px -1200px; opacity: 1;}
	52.0001% { background-position: -760px -1200px; opacity: 0;}
	52.0002% { background-position: -380px -1200px; opacity: 0;}
	52.0003% { background-position: -380px -1200px; opacity: 1;}
  60% { background-position: -380px -1200px; opacity: 1;}
	60.0001% { background-position: -380px -1200px; opacity: 0;}
	60.0002% { background-position: 0 -1200px; opacity: 0;}
	60.0003% { background-position: 0 -1200px; opacity: 1;}
  80% { background-position: 0 -1200px; opacity: 1;}
	80.0001% { background-position: 0 -1200px; opacity: 0;}
	80.0002% { background-position: 0 -1670px; opacity: 0;}
	80.0003% { background-position: 0 -1670px; opacity: 1;}
  99.9% { background-position: 0 -1670px; opacity: 1;}
	100% { background-position: 0 -1670px; opacity: 0;}
}

.animation-canvas{display: none; position:fixed; width: 100%; width:380px; height: 440px; left:50%; top:70%; transform: translate(-50%, -50%) scale(0.6); transform-origin: center; z-index: 100000;}
.animation-canvas .cartoon, .scroll-canvas .cartoon{transform: rotate(0); position: relative; left:0; transition: all 2s ease;}
.animation-canvas.show, .scroll-canvas.show{display: block;}

.animation-hello{width:380px; height: 460px; background-position: 0 -1670px; transition: all 0.4s ease;}
.show .animation-hello{animation: hello 2s linear 0.2s; /* One-time animation */}

/*Cookies*/
.cookie-banner {display: none; position: fixed; max-width: 100%; bottom: 0; left: 0; right: 0; background-color: #F6F6F6; color: #666; padding: 20px; z-index: 1000; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; border-top-left-radius: 50%; border-top-right-radius: 50%; padding-top:70px;}
  .cookie-banner.hide {visibility: 0; opacity: 0; pointer-events: none} 
  .cookie-banner-content { max-width: 900px; margin: 0 10%; text-align: center;}
  .cookie-banner p { margin: 0 0 10px; font-size: 11px;}
  .cookie-banner-buttons { display: flex; justify-content: center; gap: 10px;}
    a.cookie-btn{display: block; max-width: 260px; width: 320px; margin: 20px auto; font-family: "Outfit", sans-serif; text-decoration: none; font-size: 18px;
      font-weight: 700;}
    .cookie-btn {background-color: #1b7a1e; color: white; border: none; padding: 10px 20px; border-radius: 5px; transition: background-color 0.3s;}
    .cookie-btn.btn-grey{background-color: grey;}
    .cookie-btn.btn-grey:hover {background-color: grey; opacity: 0.8;}
    .cookie-btn:hover {background-color:#1b7a1e;  opacity: 0.8; border:none;}
    .cookie-btn:focus {outline: none; box-shadow: 0 0 5px rgba(255, 255, 255, 0.7); border:none;}


/*Error Pages*/
@keyframes blink {
  0% { background-position-x: 0px; visibility: visible;}
	0.0001% { background-position-x: 0px; visibility: hidden;}
	0.0002% { background-position-x: -250px; visibility: hidden;}
	0.0003% { background-position-x: -250px; visibility: visible;}
			
	33.3% { background-position-x: -250px; visibility: visible;}
	33.3001% { background-position-x: -250px; visibility: hidden;}
	33.3002% { background-position-x: -500px; visibility: hidden;}
	33.3003% { background-position-x: -500px; visibility: visible;}
			
	66.6% { background-position-x: -500px; visibility: visible;}
	66.6001% { background-position-x: -500px; visibility: hidden;}
	66.6002% { background-position-x: 0; visibility: hidden;}
	66.6003% { background-position-x: 0; visibility: visible;}
}

h1.error-number{position: absolute; width: 100%; bottom:1%; font-size: clamp(10rem, 40vw, 40rem); text-align: center; z-index: -1; color:lime; font-weight: 900;}
.error-bg{max-width: 100%; height: auto; margin:100px auto -90px;}
.error-canvas{position:fixed; bottom:0; left:30px;}
.cartoon, .scroll-cartoon{visibility: hidden; opacity: 0; transition: all 0.5s ease; left:-300px; transform: rotate(20deg);}
.cartoon.show, .scroll-cartoon.show{visibility: visible; opacity: 1; left:0; transform: rotate(0);}
  .bubble-r, .bubble-l{visibility: hidden; opacity: 0; z-index: 2; background-color: lime; color: white;}
  .cartoon.show .bubble-r, .cartoon.show .bubble-l, .scroll-cartoon.show .bubble-r, .scroll-cartoon.show .bubble-l{visibility: visible; opacity: 1; margin:0; transition: all 0.5s ease 0.7s;}
  .bubble-r .arrow, .bubble-l .arrow{width:67px; height: 49px; position: absolute; bottom:-49px; left:40%; z-index: 3; background-position: -760px 0;}
  .bubble-l .arrow{right:-40%; background-position: -840px 0;}

.animation, .animation-scroll{width:250px; height: 280px; left:-30px; bottom:0; zoom:0.6; background-position: 0 0; animation: blink 0.3s 2 0.3s; animation-delay: 3s; z-index: 3;}
  .animation.angry, .animation-scroll.angry, .animation.angry5, .animation-scroll.angry5{background-position: 0 -300px;}
  .animation.angry2, .animation-scroll.angry2{background-position: -250px -300px;}
  .animation.angry3, .animation-scroll.angry3{background-position: -500px -300px;}
  .animation.angry4, .animation-scroll.angry4{background-position: -750px -300px;}
  .angryText{font-size: 24px;}
.bubble-r, .bubble-l{width:320px; height: auto; position: absolute; left:20px; top:-280px; padding:30px; border-radius: 10px; background-color: black; border:3px solid #CCC; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
.bubble-l{right:-20px; top:-280px;}
.hi .bubble-r, .hi .bubble-l{top:-180px;}
.hello-cat .bubble-r, .hello-cat .bubble-l{width:350px;}
.description, .description-top{margin:0; z-index: 2; font-size: 19px;}
.hello-top.description-top{font-size: clamp(1.6rem, 1.6vw, 1.8rem);} 
#main .description a, #main .description-top a, .scroll-cartoon .description-top a{margin-top:10px; font-weight: 700; display: block; text-align: right;}

.cartoon .close-cat{display: block; font-size: 20px; font-family: "Outfit", sans-serif; font-weight: bold; color: black;  padding: 10px; position: absolute; top: -36px; right: 0;}
.cartoon .close-cat:hover{color: lime;}

/*Scroll animations*/
.scroll-canvas{display: none; position: fixed; width:380px; height: 440px; left:50px; bottom:0; transform: scale(0.6); transform-origin: bottom left; z-index: 100000;}
.scroll-cartoon{position: absolute; left:-50px; bottom: -300px; transform: rotate(20deg); transition: all 0.5s ease;}
.scroll-cartoon.show{position: absolute; left:0; bottom:0;}
.scroll-cartoon .bubble-r{left:10px; width: 520px; height: auto; top: -200px;}
.scroll-cartoon .bubble-r p{font-size: clamp(1.5rem, 1.5vw, 1.5rem);}
.scroll-cartoon .bubble-r p:hover{color: #fff;}

/***************/
/*INDEX & PAGES*/
/***************/

/*Index*/
.bg-1{max-width: 100%; height: auto; margin-top: 30px;}
h1.landing-title, .top-landing h1{margin:20px auto 0; font-size: clamp(3.4rem, 4vw, 4.5rem); line-height: 1; max-width: 720px; text-transform: initial; font-weight: 900;}
#Intro .text-landing p{max-width: 900px; margin:20px auto; font-size: clamp(2rem, 2.5vw, 2.4rem);}
#Intro .text-landing .landing-title.center{font-size: clamp(3.5rem, 4.5vw, 4.8rem);}
.landing-title span{display: block; margin: 15px 0 2em; font-size: clamp(1.8rem, 1.6vw, 1.9rem); font-weight: 300; font-family: "Roboto Slab", serif; letter-spacing: 0; line-height: 1.05; color: black; text-transform: initial;}
.brd + .h3{margin: 0 auto 30px;}
.container-hello .landing-title + p {font-size: clamp(1rem, 1.2vw, 1.2rem);}

.intro-text{max-width: 720px; margin: 20px auto;}
.intro-text img{margin: 30px auto 0;}
.intro-text .btn{margin-top: 40px;}
#Agency .intro-text img{margin: -50px auto 0;}
#Agency p{font-weight: 300;}
#Agency strong{font-weight: 600;}
.section-title{margin:80px 0 10px; line-height: 0.9;}
.section-title.st2{margin:40px 0 35px; line-height: 0.9;}

.index-heart{max-width: 500px; margin: 0 auto;}
.heart .grid-container .h3{padding-top: 0;}
.heart .index-heart img{max-width: 360px;}
.heart .grid-container{margin:40px auto;}
.heart h2{font-weight: 500; font-family: "Roboto Slab", serif;}
.heart h2 + p{margin-top: -15px;}
.heart .h3 {font-size: clamp(1.5rem, 2vw, 2rem);}

.heart .heart-grid{margin-bottom: 0;}
.heart-ind{padding-bottom:22px;}
.heart-ind .grid-6.got-project{padding-left: 45px;}

#Works{padding-bottom: 90px; max-width: 100%;}
#Works p.h3{margin-top: 0;}
#Works h3{margin-bottom: 2.3rem;}

#main .image-container a{color: black; font-weight: 400;}
#main .image-container a:hover{color: black;}
.image-container{display: grid; grid-template-columns: repeat(1, 1fr); padding: 20px;}
.image-portfolio{width: 50%; text-align: left;}
  .image-portfolio img{padding: 2px;}
  .image-item:hover img{padding: 10px; box-shadow: 0 0 10px #333; transform: scale(1.02);}
  
  .info-portfolio{width: 80%; float: right; visibility: hidden; opacity: 0; position: absolute; left: 0; top: 30px; transition: all 0.4s ease; z-index: -3;}
  .image-item:hover .info-portfolio{visibility: visible; left: 110%; opacity: 1;}

  .image-item:nth-child(odd) .image-portfolio{text-align: right; float: right; text-align: left;}
    .image-item:nth-child(odd):hover .info-portfolio{left: -90%;}
  
    .image-title.h2.small{margin-top: 0; font-size: clamp(1.1rem, 1.6vw, 1.9rem);}
    .image-subtitle.h3.small{display: block; margin-top: 5px; font-size: clamp(0.9rem, 1.4vw, 1.5rem);}
  .image-description {display: none;}
  .lazy-load {opacity: 0; transition: opacity 0.5s ease-in-out 0.1s;}
  .lazy-load.loaded {opacity: 1;}

  #load-more-button {display:block; color: black; background-color: white; padding: 15px 50px; border: 1px solid black; text-align: center; font-size: 22px; margin: 40px auto 20px; border-radius:30px;}
  #load-more-button:hover {background-color: fuchsia; color: white; border-color: fuchsia; box-shadow: 0 0 6px fuchsia;}

#Services .mid-light{padding: 40px 0 20px;}
#Services .section-title{margin: 10px 0 10px;}
#Services p.h3{margin-top: -5px; text-transform: uppercase;}
#Services h4{margin:3rem 0 0; font-family: "Roboto Slab", serif; font-size: clamp(1.4rem, 2vw, 2.5rem); font-weight: 400;}
#Services p{margin:1.5rem 0 0;}
#Services.section-plast h3.section-title{font-weight: 900; margin: 4rem 0; font-size: clamp(4.5rem, 9vw, 10rem); line-height: 0.85;}
#Services h3.section-title br{display: block;}

#Reviews{padding-bottom: 130px;}
#Reviews h3{text-transform: uppercase;}
#Reviews .grid-6, #Services .grid-6{padding:0 10px 30px;}
.ratings{background-position: -199px -450px; width:174px; height: 33px;; margin:30px auto; background-size: 900px 2295px;}

#Agency .mid-dark{padding-bottom: 70px;}
#Agency p.h3{margin-top: 1.5rem;}
#Agency img{transform-origin: center;}
.board .grid-container{margin-top: 70px;}
.board .grid-4{padding:0 20px;}
.board .section-title{margin: 100px 0 0; text-align: center;}
.board .h3.section-subtitle{margin:0 0 5rem; text-align: center; display: block;}
.board .h1{margin-top: 10px;}
.board .h1, .board .h3, .board p{text-align: center;}
.brd-1{transform: rotate(10deg);}
.brd-2{transform: rotate(-5deg) translateY(25px);}
.brd-3{transform: rotate(8deg);}
.board .got-project p{margin:30px 0 60px 90px;}
.story .h1.section-title{margin-top: 40px;}
.team .section-title{margin:60px 0 0; text-align: center;}
.team .h3.section-subtitle{margin:0 0 4rem; text-align: center; max-width: none;}

#Awards .grid-3{grid-column: span 6;}
#Awards .aw-bg{max-width: 150px; margin:0 auto; padding-top: 150px; background-size: 600px 1530px;}
.award-bg-1{background-position: 0 -1080px;}
.award-bg-2{background-position: -150px -1080px;}
.award-bg-3{background-position: -300px -1080px;}
.award-bg-4{background-position: -450px -1080px;}
.award-bg-5{background-position: 0 -1230px;}
.award-bg-6{background-position: -150px -1230px;}
.award-bg-7{background-position: -300px -1230px;}
.award-bg-8{background-position: -450px -1230px;}
.award-bg-9{background-position: 0 -1380px;}
.award-bg-10{background-position: -150px -1380px;}
.award-bg-11{background-position: -300px -1380px;}
.award-bg-12{background-position: -450px -1380px;}
.award-title{margin-top:0;}
#Awards h3{text-transform: uppercase;}

#Clients p + p{margin-bottom: 70px;}
.clients-container {grid-template-columns: repeat(1, 1fr);}
.clients-container img{width: 100%;}
.clients-container div + div {margin-top:-15px;}

#Contact .mid-black{padding: 90px 0;}
#Contact .fish-pink{top:43%;}
#Contact .cont-link{margin: 25px 0; display: block; font-weight: 900; text-decoration: none; border: none;}
#Contact .cont-link span{color:white; display: block; text-align: center; font-size: clamp(4rem, 20vw, 10rem); margin-bottom:-2rem;}
#Contact .cont-link p{color: white; font-size: clamp(3rem, 5vw, 4rem);}
#Contact .cont-link:hover, #Contact .cont-link:hover p, #Contact .cont-link:hover span{color:lime; text-decoration: none; border: none;}
.claim-footer{margin:250px auto 250px; line-height: 0.9; position: relative;}
  .claim-footer span{display: block; z-index: -1; position: absolute; top:50%; left:58%; transform: translate(-50%, -50%);}

/*******/
/*Areas*/
/*******/
.area #description{max-width: 600px; padding:0 20px; margin:0 auto 2rem;}
.area h1 {margin: 20px 0 30px;}
.area h2 {margin:30px 0 0; font-size: clamp(2.6rem, 4vw, 4rem);}
.area h2 + .h3,  .area .h1 + .h3{margin: 10px 0 0;}
#main.area a {font-weight: 700;}

.center#grey-link{margin-top: -15px;}
.center#grey-link span{display: none;}
.center#grey-link br{display: block;}
.center#grey-link a{color: #AAA;}
.center#grey-link a:hover{color: fuchsia;}


/*Sections*/
.site-content .grid-container.top-landing, .site-content .section-w{margin-bottom: 60px;}
.site-content .grid-container.top-landing.sect{margin-bottom: 0;}
.top-landing img{width: 500px;}

#main a.go-works{font-weight: 600; display: block; height: auto; line-height: 30px;}
  #main a.go-works .works-icon{width:32px; opacity: 0; transition: all 0.3s ease; margin-right: -32px;}
  #main a.go-works .works-icon.show{opacity: 1; margin-right: 6px;}

.section-w .section-title{margin-bottom: 0;}
.section-w p.h3{margin:2rem 0 50px;}
.section-w p + p{max-width: 760px; margin:0 auto 20px;}

.inverse .mid-light{background-color: #000; color: white;}

.launch-contact{color: fuchsia;}
  .launch-contact:hover{color: lime;}
.launch-contact span.chat-bubble{font-size: 4rem; color: fuchsia; display: block; position:absolute; left:-80px; float: none;}
  .launch-contact:hover span.chat-bubble{color:lime;}

button.open-modal{display: block; margin:50px auto 0; font-size: 1.8rem; height: 60px; color: white; font-weight: 400;}
button.open-modal:hover{color: white;}
button.open-modal.landing, #main .questions a.landing{max-width: 320px; font-size: 1.5rem; font-weight: 500; height: 70px; margin:50px auto;}
#main .questions a.landing{background: transparent; color: black; margin-top: 80px; line-height: 45px;}
#main .questions a.landing:hover{background: lime; color: white;}

.section-plast .section-title {margin: 10px 0 10px;}
.section-plast p.h3 {margin-top: -5px;}
.section-plast .service-image {margin: 20px 0; float: left;}
.section-plast .service-text {margin-bottom: 10px;float: right;}

.stairs{margin-top:10px;}
.stairs .mid-light {padding:0 0 40px;}
.stairs .grid-6 {margin-top: 20px; padding-right: 90px;}
.stairs .grid-6 + .grid-6{margin-top: 20px;}
  .stairs p{font-weight: 300;} 
  .stairs h2 {margin:0; padding: 60px 0 40px;}
  .stairs h2.center{max-width: 500px; margin: 0 auto;}
  .stairs .h1 {text-transform: none;}
  .stairs .h1.small,  .stairs .h1.order-num {width: 80%; padding: 0; font-size: clamp(1.6rem, 2.5vw, 2.5rem);}
  .stairs .h1.small.open-modal{width: auto;}
  .stairs .grid-6.got-project{margin-top: 0px; line-height: 1;}


@keyframes icons {		
	0% { transform: rotate(-9deg);}
	50% { transform: rotate(15deg);}
  100% { transform: rotate(-9deg);}
}

.sprite-icons.turn{background-image: none; background-size: 1200px 1400px; background-repeat:no-repeat; transform-origin: center;}
.stairs .sprite-icons{position: absolute; top:30px; right: -15px; width: 200px; height: 200px; zoom:0.55; display: none;}

.yellow-1{background-position: 0 0;}
.yellow-2{background-position: -200px 0;}
.yellow-3{background-position: -400px 0;}
.yellow-4{background-position: -600px 0;}
.yellow-5{background-position: -800px 0;}
.yellow-6{background-position: -1000px 0;}
.yellow-7{background-position: 0 -200px;}
.yellow-8{background-position: -200px -200px;}
.yellow-9{background-position: -400px -200px;}
.yellow-10{background-position: -600px -200px;}
.yellow-11{background-position: -800px -200px;}
.yellow-12{background-position: -1000px -200px;}

.green-1{background-position: 0 -400px;}
.green-2{background-position: -200px -400px;}
.green-3{background-position: -400px -400px;}
.green-4{background-position: -600px -400px;}
.green-5{background-position: -800px -400px;}
.green-6{background-position: -1000px -400px;}
.green-7{background-position: 0 -600px;}
.green-8{background-position: -200px -600px;}
.green-9{background-position: -400px -600px;}
.green-10{background-position: -600px -600px;}
.green-11{background-position: -800px -600px;}
.green-12{background-position: -1000px -600px;}

.pink-1{background-position: 0 -800px;}
.pink-2{background-position: -200px -800px;}
.pink-3{background-position: -400px -800px;}
.pink-4{background-position: -600px -800px;}
.pink-5{background-position: -800px -800px;}
.pink-6{background-position: -1000px -800px;}
.pink-7{background-position: 0 -1000px;}
.pink-8{background-position: -200px -1000px;}
.pink-9{background-position: -400px -1000px;}
.pink-10{background-position: -600px -1000px;}
.pink-11{background-position: -800px -1000px;}
.pink-12{background-position: -1000px -1000px;}

.order-num > span {font-size: clamp(1.5rem, 2.2vw, 3rem); font-weight:900; text-align:right; position: absolute; right:-90px; top:-8px; line-height: 1;}
    .order-num span span {font-size: clamp(4rem, 6vw, 8rem);}

.recipe .section-title {margin-top: 0;}
.recipe h2 {margin:0 auto 30px;}
.recipe h2 + p{margin:0 auto 15px;}

.recipe img{max-width: 280px; margin: 10px auto 0; transform-origin: center; animation: heart 1s infinite;}
.recipe p.center {max-width: 760px; margin: 0 auto 20px;}
  .recipe .h1.center{line-height: 1.05;}
  .recipe .h4.center{line-height: 1.15;}
.recipe ul {max-width: 760px; text-align: center; margin: 0 auto 20px;}
.recipe .tooltip-content img{max-width: 90px; animation:none;}

.services .grid-4 {padding:0 20px;}

.more .grid-2{padding: 10px;}
.more .section-title{margin: 0 0 0;}
.more h4.h3{margin: 0.6rem 0 10px;}
.more p{margin-top: 20px; line-height: 1.05;}
.more img{transform-origin: center; animation: icons 3s infinite;}
#main .more a{color:black;}
#main .more a:hover, #main a:active{text-decoration: none; color: lime;}
#main .more a:hover{transform: scale(1.15); display: block;}

.board .mid-light .grid-4{padding:0 20px;}
.board .h3{margin:1rem 0 2rem;}
.team p.h3{margin-bottom: 10px;}

.story [class*="title"] + p {margin:2rem auto 50px;}
.story .h1.small{margin-bottom: 2rem;}

.contact-section #description{margin-bottom: 50px;}
.talk p.h1{margin: 40px 0 15px;}
.area .talk p.h3{font-size: clamp(1.5rem, 2vw, 2rem); margin-bottom: 50px;}
.talk .talk-raw p.h1{margin:0;}
#main.area .talk-raw a{margin-top: 0;}
.talk-raw{clear: both; width: 100%; float: left; margin: 50px 0 0;}
.talk-raw + .talk-raw{margin:20px 0 0;}
.cont-link{transform-origin: center; animation: heart 1.5s infinite;}
.talk .cont-link{display: block; font-weight: 900; text-decoration: none; border: none;}
.talk .cont-link span{color:black; display: block; text-align: center; font-size: clamp(4.5rem, 10vw, 5.5rem); float: left; padding-right: 20px;}
.talk .cont-link p{color: black; font-size: clamp(2.4rem, 4.3vw, 2.8rem); line-height: 1.9;}
#main .talk .cont-link:hover, #main .talk .cont-link:hover p, #main .talk .cont-link:hover span{color:lime; text-decoration: none; border: none;}

@keyframes heart {		
	0% { transform: scale(0.95);}
	50% { transform: scale(1);}
  100% { transform: scale(0.95);}
}
.heart img{max-width: 360px; margin: 0 auto 0; display: block; animation: heart 1s infinite; transform-origin: center;}
.heart p {margin:-20px auto 50px;}
.heart .tooltip-content img{max-width: 90px; animation:none;}

.questions .grid-6{padding:0 20px;}
.section-w.questions p + p {margin-top: 25px; text-indent:0;}
#main .questions p.h3{margin: 20px auto 30px; font-size: clamp(1.5rem, 1.9vw, 2rem); text-transform:initial; max-width: 500px;}
.questions img.thinker{max-width: 280px; margin: 0 auto -60px; display: block;}
.questions .h1.small{text-transform:initial; line-height: 1.2;}

h1.portfolio-tit{margin:40px auto 30px;}

/*Products*/
.product .text-landing {padding-bottom: 50px;}
.text-landing .city-year{margin-top:10px;}
.product .sub-grid-3 a{display: inline-block;}
.product .sub-grid-3 a:hover{transform: scale(1.05); display: block; box-shadow: 0 0 8px #555;}
.product .got-project {padding-left: 90px; grid-column: span 12; display: flex; flex-direction: column; justify-content: flex-end; height: 100%;}
  .product .got-project .h1{line-height: 1.5; font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 600;}
  .product .got-project .h2{color: black; margin-bottom: 20px; display: block; line-height: 1.05;}
  .stairs .got-project .h1{margin-top: 0px; line-height: 1.5; font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 600;}
  .stairs .got-project .h2{color:white; margin-bottom: 20px; display: block; line-height: 1.05;}
.product .tooltip-content img {max-width: 90px;}
.fig-top {margin:10px 10px -15px 0; font-size: 10px; float: right;}
.sub-grid-3 figcaption {color: black; font-size: 10px; transition:all ease 0.2s;}
  .sub-grid-3:hover figcaption{opacity:0;}
#Explained{overflow: visible;}
#Explained h2{padding:0; line-height: 1.2; font-size: clamp(1.8rem, 3vw, 2.7rem);}
#Explained .h3{margin-top: 20px; font-size: clamp(1.4rem, 2.2vw, 2rem);}
#Explained .separator{height: 40px;}
#Explained .section-title{margin-bottom: 20px;}
#Explained.stairs .sprite-icons{zoom:0.7;}
#Explained .sprite-icons{top:-30px}

#main #cta{margin:40px auto; padding-bottom: 80px;}
#main #cta .btn{display: block; visibility: hidden; opacity: 0; transition: opacity 0.3s ease; width: auto; margin: 15px 10px 0 0; padding: 6px 20px; line-height: 40px; border-radius: 25px; background-color: black; color: #fff; border: 2px solid black; font-size: 16px; font-weight: 600; transition: all 0.4s ease; float: left; height: auto;}
#main #cta .btn.show{visibility: visible; opacity: 1;}
#main #cta .btn:hover {background-color: lime; box-shadow: 0 0 8px lime; border: 2px solid limegreen; color: white;}
#main #cta .btn.inverse {background-color: transparent; color: black; border: 1px solid black; margin-right: 0;}
  #main .chat-icon{line-height: 22px; vertical-align: middle; margin-right: 6px;}
  #main .chat-icon.works-icon{margin-top:-5px}

/*Articles*/
.breadcrumb p{display: block; width: 100%; margin:0 0 20px; line-height: 16px; font-size: 16px; color: #999; font-family: "Outfit", sans-serif;}
.breadcrumb span{line-height: 18px; font-size: 18px; color: #EEE; display: inline-block; padding: 0 10px; top:3px;}
#main .breadcrumb a{color: #CCC;}
#main .breadcrumb a:hover{color: lime;}
#main .date{margin-top:10px; color: #999; font-weight: 200;}

/*Portfolio*/
#Portfolio h1{margin:50px auto 35px;}
#Portfolio p{margin-bottom: 50px;}
#Portfolio.section-w p{line-height: 1.2;}
.portfolio-list{width: 100%;}
.portfolio-list li{width: 44%; margin:5% 3%; float: left;}
  .portfolio-list li:hover{transform: scale(1.1); transform-origin: center;}
  .portfolio-list li:hover img{box-shadow: 0 0 10px #333;}
.portfolio-list li img{width: 100%; margin-bottom: 15px;}
#main .portfolio-list li a{color: #000; text-transform: capitalize; display: block; font-weight: 400; font-size: clamp(1rem, 1.3vw, 1.3rem);}
#main .portfolio-list li a p{color: #000; text-transform: initial;}
#main .portfolio-list li a:hover{color: fuchsia;}

.portfolio-list li:nth-child(odd) {clear: both;}
#Portfolio .grid-3{grid-column: span 6;}
  #Portfolio.port-nav img{max-width: 280px; margin:0 auto}

#Works .work-item, #Projects .work-item{transition: all 0.3s ease;}
#Works .work-item h3, #Projects .work-item h3{margin-bottom: 1rem;}
#Works .work-item p, #Projects .work-item p{margin: 0;}
#Works .work-item p.h4{margin: -0.8rem 0 15px; }
#Works .work-item a:hover p, #Projects .work-item a:hover p{color: #000;}

/*Blog*/
.blog-container h1{margin:2rem auto 2rem; font-size: clamp(3rem, 4.5vw, 4.5rem);}
.blog-container .blog-desc{max-width: 640px; margin: 0 auto 6rem;}
.blog .top-landing h1 {font-size: clamp(2.8rem, 3.6vw, 3.6rem); }
.blog #Explained h2 {font-size: clamp(1.6rem, 2.2vw, 2.2rem);} 
.blog .blog-feed h2{font-size: clamp(2.8rem, 2.2vw, 2.2rem); margin-top: 1rem; line-height: 1.15;}
p.author{margin-top:10px;}
  #main.blog .author a{color:black; font-weight: 200;}
  #main.blog .author a:hover{color: fuchsia;}
#main.blog .read-more{display: block; margin-top:10px; font-family: "Outfit", sans-serif; font-size: clamp(1.1rem, 1.4vw, 1.4rem); font-weight: 600;}
#main.blog h2 a{color: #000;}
#main.blog h2 a:hover, #main.blog .read-more:hover{color: lime;}
#main.blog #Explained img{width: 100%; height: auto; margin:0 0 20px;}
#main.blog #Explained h3{font-size: clamp(1.4rem, 1.8vw, 1.8rem); font-family: "Roboto Slab", serif; font-weight: 500; margin-top: 35px;} 
#main.blog #Explained h3+p{margin-top: 15px;}
#main.blog #Explained ul{margin-top: 22px;}
#main.blog #Explained li{margin: 10px 0 0; list-style: none; font-size: 1.1rem; width: auto;}
#main.blog #Explained li{margin: 10px 0 0; list-style: none; font-size: 1.1rem; width: auto;}
.transition{margin:0 auto;}
.transition img{width: 260px; display: block; margin: 0 auto;}
.transition h3{margin: 10px auto 0; text-align: center; max-width: 520px; font-family: "Roboto Slab", serif; font-weight: 400; font-size: clamp(1.4rem, 1.5vw, 1.5rem); line-height: 1.35;}

.blog-container article h2 {font-size: clamp(2.8rem, 2.2vw, 2.2rem); margin-top: 1rem;}

.share-buttons {margin-top: 12px;}
.share-buttons .p{line-height: 28px; vertical-align: bottom;}
.share-buttons a {margin-right: 10px; display: inline-block;}
.top-landing .share-buttons img {width: 24px; height: 24px; vertical-align: middle; filter: grayscale(100%); transition: filter 0.3s ease;}
.share-buttons img:hover {filter: none; transform: scale(1.2); transform-origin: center;}

/*Works*/
.work-intro p + p {text-indent: 0;}
.work-intro strong {font-weight: 800;}
.work-icon {width: 40%; margin: 5%; float: left;}
#main .work-icon a {color: black; text-align: center; display: inline-block; width: 100%;}
  #main .work-icon a:hover {color: lime;}
.included {text-indent: 0; margin: 50px 0 20px; text-align: center;}
#prod-nav li {visibility: hidden; opacity: 0; transition: all 0.3s ease; transform: scale(0.5); transform-origin: center;}
#prod-nav li.show {visibility:visible; opacity: 1; transform: scale(1);}
.work-icon span {font-size: 5rem; display: inline-block; width: 100%;}
.odder .grid-6:first-child {order: 2;}
.odder .grid-6:last-child {order: 1;}

/*FAQs*/
.questions .grid-6.faq-item{padding: 0 20px;}
.faq-item {overflow: hidden; height: auto; margin:30px 0 -60px; transition: all 0.5s ease;}
  .questions .faq-item .h1.small{font-size: clamp(1.4rem, 1.5vw, 1.6rem); margin-top: 0;}
.faq-question {padding: 25px; display: flex; justify-content:left; align-items: center; border: 1px solid #CCC; border-radius: 5px; transition: all 0.5s ease;}
  .faq-question:hover{background-color: #F0F0F0;}
.faq-question.open{background: #000; color: white;}
  .faq-question::after {content: '+'; font-size: clamp(2rem, 2vw, 2.4rem); transition: all 0.3s ease;}
    .faq-question:hover::after{font-size: clamp(2.6rem, 2.8vw, 3.2rem);}
  .faq-question.open::after {transform: rotate(45deg);}
.faq-answer {padding: 25px; background-color: #fff; max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out;}
.faq-answer.open {display: block; height: auto; border: 1px solid #CCC; margin-top:-6px; max-height: 2000px; margin-bottom: 30px;}

/*Agency*/
.agency-top .h4{margin: 40px 0 -20px;}

/*Work System*/
.work-system p.h3{font-size: clamp(1.4rem, 2.5vw, 2.4rem);}
#main .agency-top #cta{width: 330px;}

/*******************/
/*Media Query 410px*/
/*******************/
@media (max-width: 410px) {
.logo-separator{display: none;}
.site-title{display: none;}
}


/*******************/
/*Media Query 576px*/
/*******************/
@media (min-width: 576px) {

/*Forms*/
form {max-width: 360px; width: 360px;}

/*Grid System*/
.grid-12 {grid-column: span 12;}
.grid-11 {grid-column: span 12;}
.grid-10 {grid-column: span 12;}
.grid-9 {grid-column: span 8;}
.grid-8 {grid-column: span 8;}
.grid-7 {grid-column: span 8;}
.grid-6 {grid-column: span 6;}
.grid-5 {grid-column: span 6;}
.grid-4 {grid-column: span 6;}
.grid-3 {grid-column: span 4;}
.grid-2 {grid-column: span 4;}
.grid-1 {grid-column: span 4;}

.grid-hide{display: block;}

/*Header*/
.site-logo-img img {width:140px; margin:6px 0;}
.site-title {font-size: 12px; margin-top:7px;}

/*Main Content*/
.site-content {margin:90px auto 90px;}

/*Functionalities*/
.modal {max-width: 500px;}

/*Error Pages*/
h1.error-number{bottom:3%;}
.error-bg {margin:0 auto -90px;}
.bubble-r, .hi .bubble-r{left:160px; top:-100px; width: 360px;}
.bubble-r .arrow{left:15%;}
.bubble-l, .hi .bubble-l{right:-160px; top:-100px; width: 360px;}
.bubble-l .arrow{right:-15%;}

/*Index*/
.bg-1{margin-top:30px;}
.landing-title{margin-top:30px;}
.image-description {display: block;}
.heart img{max-width: 500px;}
.heart .index-heart img{max-width: 500px;}
.animation-canvas{left:30%; top:60%; transform: translate(-50%, -50%) scale(0.6);}

/*Areas*/
.grid-container.odd{grid-auto-flow: dense;}
.odd .grid-6{grid-column: 7 / 13;}
.odd .grid-6 + div{grid-column: 1 / 7;}

/*Sections*/
.section-plast .service-image, #Services .service-text{width: 46%; margin:10px 2%;}
.section-plast .service-image{margin-top: 40px;}
.section-plast .service-image.odd, #Services .service-text.odd{float: right;}

.stairs .grid-6{grid-column: span 12;}

.story .grid-container{grid-auto-flow: dense;}
.story .grid-6{grid-column: 1/7;}
.story .grid-6:nth-child(even){grid-column: 7/13;}
.story .grid-6 + div{grid-row-start: 2;}
.story .grid-6 + div + div{grid-row-start: 3;}
.story .grid-6 + div + div + div{grid-row-start: 4;}

.about img{margin-top: 50px;}

/*Products*/
.product .grid-container {grid-auto-flow: dense;}
.product .subgrid-container {grid-column: 7/13;}
.sub-grid-3 {grid-column: span 3;}
.product .got-project{grid-column: span 6;}

/*Footer*/
.lang-nav{text-align: center; position: absolute; right:0; bottom: 5px; width: 200px;}
.icons{padding-bottom: 15px;}
}

/*******************/
/*Media Query 768px*/
/*******************/
@media only screen and (min-width:768px) {
/*Site Widths*/
.site-header-inner, .site-content .grid-container, .site-footer{width: 1200px; max-width: 96%;}
.site-content .grid-container{width: 900px; max-width: 92%;}

/*Header*/
.toggle-menu{display: none;}

/*Footer*/
#Contact .foot-tit{max-width: 420px;}


/***************/
/*INDEX & PAGES*/
/***************/
section br{display: block;}

/*Grid System*/
.grid-12 {grid-column: span 12;}
.grid-11 {grid-column: span 12;}
.grid-10 {grid-column: span 12;}
.grid-9 {grid-column: span 8;}
.grid-8 {grid-column: span 8;}
.grid-7 {grid-column: span 8;}
.grid-6 {grid-column: span 6;}
.grid-5 {grid-column: span 6;}
.grid-4 {grid-column: span 4;}
.grid-3 {grid-column: span 4;}
.grid-2 {grid-column: span 4;}
.grid-1 {grid-column: span 4;}

/* Subgrid*/
.sub-grid-4 {grid-column: span 4;}

/*Backgrounds & Ornaments*/
.bg-mark.tiny{transform: translate(-50%, -50%) scale(0.2); transform-origin: center;}
.bg-mark.small{transform: translate(-50%, -50%) scale(0.4); transform-origin: center;}
.bg-mark.medium{transform: translate(-50%, -50%) scale(0.6); transform-origin: center;}

.brd{width: 100%; margin: -10px 0 -20px;}

/*Error Pages*/
.animation{zoom:1; left:20px}
.bubble-r, .hi .bubble-r{left:280px; top:-40px; width: 420px;}
.bubble-l, .hi .bubble-l{right:-280px; top:-40px; width: 420px;}

/*Index*/
#Intro .text-landing{padding-left: 20px;}
.bg-1{max-width: 95%;}
h1.landing-title{margin-top:40px;}
.section-title{margin:100px 0 60px; line-height: 0.9;}
.section-title.st2{margin:60px 0 40px;}
.image-portfolio img{padding: 4px;}

.animation-canvas{left:30%; top:30%; transform: translate(-50%, -50%) scale(0.8);}
.scroll-canvas{transform: scale(0.8);}
.scroll-cartoon{left:-80px; bottom: -400px;}
.scroll-cartoon .bubble-r{left:130px; width: 580px; top: -140px;}
#Services li {margin-top: 0;}
#Services .h3{font-family: "Roboto Slab", serif;}
#Services .h1{margin: 40px 0 20px; line-height: 1; font-size: clamp(1.5rem, 2.2vw, 3rem);}

#Agency .h1{margin-bottom: 5px;}

.clients-container {grid-template-columns: repeat(2, 1fr); gap: 40px;}
.clients-container div + div {margin-top:0;}

/*Areas*/
.center#grey-link span{display: inline; color: #AAA;}
.center#grey-link br{display: none;}

/*Sections*/
.stairs .grid-container{grid-auto-flow: dense;}
.stairs .grid-6 {grid-column: span 8; padding-right:80px;}
  .stairs .grid-6 + div{grid-row-start: 2; grid-column-start: 3; grid-column-end: 10;}
    .stairs .grid-6 + div + div{grid-row-start: 3; grid-column-start: 5; grid-column-end: 13;}
      .stairs .grid-6 + div + div + div{grid-row-start: 4; grid-column-start: 1; grid-column-end: 13;}
  .stairs h2.center {max-width: 700px;}

.order-num > span {right:-80px;}

/*Portfolio*/
.portfolio-list{width: 100%;}
.portfolio-list li{width: 20%; margin: 3% 2.5%; float: left;}

.portfolio-list li:nth-child(odd) {clear: none;}
.portfolio-list li:nth-child(4n + 1) {clear: left;}

#Portfolio .grid-3{grid-column: span 3;}

/*Work System*/
.site-content .grid-container.work-top{max-width: 640px;}

}


/*******************/
/*Media Query 992px*/
/*******************/
@media (min-width: 992px) {

/*Content Width*/
.site-content .grid-container{width: 1100px; max-width: 94%;}

/*Two column lists*/
.two-column-flex {gap: 20px;}
.two-column-flex li {flex: 1 1 45%;}

/*Paragraph Font Size*/
p, .p, .li {font-size: 1.1rem;}
p.big, .p.big, .li.big {font-size: 1.4rem;}
p.huge, .p.huge, .li.huge {font-size: 1.7rem;}

.quote{margin-left:-30px; margin-right: auto; text-align: right; max-width: 360px;}
  .odd .quote{margin-right:-30px; margin-left: auto; text-align: right;}
  .img-art .quote{margin-right:-30px; margin-left: auto; text-align: right;}
  .img-art.odd .quote{margin-left:-30px; margin-right: auto; text-align: left;}

.grid-12 {grid-column: span 12;}
.grid-11 {grid-column: span 11;}
.grid-10 {grid-column: span 10;}
.grid-9 {grid-column: span 9;}
.grid-8 {grid-column: span 8;}
.grid-7 {grid-column: span 7;}
.grid-6 {grid-column: span 6;}
.grid-5 {grid-column: span 5;}
.grid-4 {grid-column: span 4;}
.grid-3 {grid-column: span 3;}
.grid-2 {grid-column: span 2;}
.grid-1 {grid-column: span 1;}

/*Header*/
.site-header {box-shadow: none; transition: all 0.5s ease;}
  .site-header.sticky {box-shadow: 0 2px 4px #DDD; top:0;}

.site-lang {width:93px;}
  .toggle-menu {display: none;}

/*Main Navigation*/
.main-navigation {position: static;  float: right; box-shadow: none; width: auto; max-height: 600px; overflow: visible; background-color: transparent;}
.sticky .main-navigation {background: transparent;}
  .menu > li {width:auto; float:right; font-size: clamp(1.1rem, 0.9vw, 1.5rem); line-height: 60px; margin:-18px 0 0 0; padding: 10px 25px; text-indent: 0; position: relative; opacity:1;}
    .main-navigation li .sub-menu{
      position:absolute;
      width: 200px;
      background: black;
      color: #FFF;
      transition: all 0.3s linear 0.1s;
      max-height: 0;
      margin-top:-4px;
    }
    .main-navigation li:hover .sub-menu{
      max-height: 600px;
      border-top: 5px solid lime;
      padding: 20px 0 25px;
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    } 
      .sub-menu li {float: left; width: 198px; margin:5px 0 0; padding:0; text-indent:0; font-size: 15px; line-height: 40px; transition: all 0.2s ease;}
      .sub-menu li:hover{font-weight: 700; background-color: #FFF; text-indent: 20px; border-right:6px solid lime;}
        .main-navigation li:hover .sub-menu li{opacity:1; padding:0;}
        .main-navigation a {display: block;}
          .main-navigation li:hover .sub-menu a{opacity:1; padding:0 20px 0 0;}
    
          @keyframes navin {		
            0% {opacity: 0;}
            100% {opacity: 1;}
          }
        
          .main-navigation ul, .site-title, .logo-separator{opacity:0; animation: navin 0.3s linear 1s; animation-fill-mode: forwards;}
          .text-landing{opacity:0; animation: navin 0.3s linear 0.6s; animation-fill-mode: forwards;}

/*Main Content*/
.site-content {margin:110px auto 100px;}

/*Footer*/
.footer-nav{margin:0 auto; width: auto; width: 796px;}
.footer-nav ul {margin-bottom: 0;}
.footer-nav .menu li{font-size: 19px; margin:0 15px 30px; float: right;}
.claim-footer br{display: block;}

/*Functionalities*/
/*Tooltips*/  
.tooltip-content {width: 210px;}

/*Mail & Whatsapp*/
.scroll-spy-indicator span a{display: block;}

/*Error Pages*/
.error-bg {margin:0 auto -100px;}
.bubble-r, .hi .bubble-r{left:280px; top:-40px; width: 540px;}
.bubble-l, .hi .bubble-l{right:-280px; width: 540px;}

/*Index*/
.animation-canvas{left:30%; top:55%; transform: translate(-50%, -50%) scale(0.9);}
.scroll-canvas{transform: scale(0.9);}
.heart .grid-4{padding:0 20px;}

.image-portfolio img{padding: 8px;}
.image-container {grid-template-columns: repeat(2, 1fr); padding: 20px;}

.image-item:nth-child(4n + 1) .image-portfolio {text-align: left; float: left;}
.image-item:nth-child(4n + 1):hover .info-portfolio {left:110%;}

.image-item:nth-child(4n + 2) .image-portfolio {text-align: left; float: left;}
  .image-item:nth-child(4n + 2):hover .info-portfolio {left:110%;}

.image-item:nth-child(4n + 3) .image-portfolio {text-align: right; float: right;}
  .image-item:nth-child(4n + 3):hover .info-portfolio {left:-90%;}

.image-item:nth-child(4n + 4) .image-portfolio {text-align: right; float: right;}
  .image-item:nth-child(4n + 4):hover .info-portfolio {left:-90%;}

#Services .serv-tit {font-size: 4rem;}

#Reviews .grid-6, #Services .grid-6 {padding:0 20px 30px;}

#Awards .grid-3 {grid-column: span 3;} 

#Clients p {max-width: 60%; margin:30px auto;}
.clients-container {grid-template-columns: repeat(2, 1fr); gap: 50px;}


/*Sections*/
.top-landing img{width: 720px;}
.stairs .grid-6 {padding-right: 120px;}
.stairs h2 {margin:0; padding: 80px 0 50px;}
.order-num > span {right:-120px;}
.more .grid-2 {padding: 20px;}
.more .section-title{margin: 0;}
article .more .section-title{margin: 50px;}

#Agency .container-hello{padding:0 40px 0 0;}
#main .agency-top #cta{width: 440px;}

.about img{margin-top: 70px;}

.questions .grid-6{padding:0 30px;}

/*Product*/
.fig-top {font-size: 11px;}
#main #cta .btn{width: 215px;}

/*Blog*/
.blog-container{margin-left: auto; margin-right: auto; max-width: 960px;}
.blog-container.area h1{margin:3rem auto 2rem;}

/*Works*/
.work-icon{width: 20%; margin: 2.5%; float: left;}
.odder{text-align: right;}

}


/********************/
/*Media Query 1200px*/
/********************/
@media only screen and (min-width:1200px) {
/*Backgrounds & Ornaments*/
.bg-mark{transform: translate(-50%, -50%) scale(0.9);}

.brd{width: 100%; margin: -20px 0 -30px;}

/*Paragraph Font Size*/
 p, .p, .li {font-size: 1.1rem;}
 p.big, .p.big, .li.big {font-size: 1.5rem;}
 p.huge, .p.huge, .li.huge {font-size: 1.9rem;}

/*Header*/
.menu > li {margin: -18px 20px 0 0;} 

/*Footer*/
#Contact .foot-tit{margin-top: -40px;}

/*Cookies*/
.cookie-banner-content {margin: 0 auto;}

/*Error Pages*/
.error-bg {margin:30px auto -100px;}

/*Index*/
.section-title{margin:130px 0 70px;}
.section-title.st2{margin:20px 0 40px;}
.animation-canvas{transform: translate(-50%, -50%) scale(1);}
.scroll-canvas{transform: scale(1);}

#Reviews .grid-6, #Services .grid-6{padding:0 30px 40px;}

/*Area*/
.area h2{margin-top: 60px;}

/*Section*/
.about img{margin-top: 100px;}
.questions .grid-6{padding:0 50px;}
/*Products*/
.product .container-hello{padding-right: 40px;}
.fig-top {font-size: 12px;}
.sub-grid-3 figcaption {font-size: 12px;}

}

/********************/
/*Media Query 1460px*/
/********************/
@media only screen and (min-width:1460px) {
#Intro h1.landing-title{max-width: 860px;}

/*Backgrounds & Ornaments*/
.bg-mark{transform: translate(-50%, -50%) scale(0.8);}

/*Footer*/
#Contact .foot-tit{max-width: 600px;}

/*Main*/
.site-header-inner, .site-content .grid-container, .site-footer { width: 1400px; max-width: 96%;}

/*Error Pages*/
.error-bg {margin:60px auto -100px;}

/*Functionalities*/
/*Tooltips*/  
.tooltip-content {width: 240px;}

/*Mail & Whatsapp*/
.scroll-top.material-symbols-outlined {top:170px; transform: scale(1.2); right: 12px;}
.contact-icon{width:70px; height: 50px; top:220px; border: 3px solid white;}
.contact-icon:hover{width: 80px;}
.contact-icon.whats-function{top:282px;}
.contact-icon span{line-height: 50px; margin: 0 20px 0 0; font-size: 36px;}

/*Index*/
#Services .serv-tit{font-size: 4.6rem;}

#Reviews .grid-6, #Services .grid-6{padding:0 60px 40px;}
h1.landing-title{margin-top:110px;}

/*Areas*/
.area h1{margin:140px 0 70px;}
.area h2{margin-top: 120px;}

/*Sections*/
.section-plast .service-image{margin-top: 0;}
#Agency .container-hello{padding:50px 40px 0 0;}
.about img{margin-top: 140px;}

/*Blog*/
.blog-container{margin-left: auto; margin-right: auto; max-width: 1100px;}
}