html{  scroll-behavior: smooth;}

:root {
    --ux-red: #FF3636;
    --ux-black: #191919;
    --ux-grey: #9E9E9E;
}

.img {
    opacity: 0; transition: opacity 0.8s ease-in-out;  
    background-image: var(--bg-image);
}

*{margin: 0;padding: 0}
*{font-family: 'Heebo', sans-serif; font-family: Arial, serif;}

ul{list-style: none;}

body{background-color: #f2f2f2; color: var(--ux-black);}


h1{font-size: 48px; font-weight: 800; letter-spacing:-4px; line-height: 38px; margin: 150px 0 10px; text-transform: uppercase;}
h2{font-weight: normal;}
h1 b,h2 b{color: var(--ux-red); font-weight: bold;}
h2{font-size: 22px; font-weight: bold;margin: 0 0 10px 0 }
h3{font-size: 18px}
p {font-size: 13px} 
li{font-size: 12px}
li b{font-size: 15px}
q{font-size: 0.8rem; font-style: italic; display: block; margin: 10px}


header, section{ width: 100%; height: auto; display: block; position: relative;}
header div.link-contact{position: absolute; top: -100px; right: 10px}
header div.link-contact ul li{text-align: right;}
header p{margin: 0 0 10px 0; font-size: 0.9rem}

section h2{text-transform: uppercase; letter-spacing: -0.09rem; color: #000}
section h2 b{color:var(--ux-red); }
section p{margin: 0 0 10px 0}

.text{padding: 0 20px}

section {margin: 50px auto;}
section.case h2{margin: 10px 20px}
h3.center{text-align: center; margin: 100px auto 30px; font-weight: 300}

.btn-linkedin{background: url("images/ico-linkedin.svg") center center;background-repeat:no-repeat; background-size: contain; width: 16px; height: 16px; display: block; text-indent: -9999px; position: absolute; top: -30px; right: 40px}
.btn-email{background: url("images/ico-email.svg") center center;background-repeat:no-repeat; background-size: contain; width: 16px; height: 16px; display: block; text-indent: -9999px; position: absolute; top: -28px; right: 0}

.img-profile{background: url("images/img-profile.png") center center; background-repeat:no-repeat; background-size: contain;width:110px; height:110px; display: block; position: absolute;top:-100px; left: 30px}

 
.img-key-visual{background: url("images/img-key-visual.svg") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 3 / 2}

.img-lean-startup{background: url("images/img-lean-startup.svg") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 30px auto; aspect-ratio: 1.5 / 1}
.img-goal-align{background: url("images/img-goal-align.svg") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 30px auto;aspect-ratio: 2 / 1;}

.img-mentor{position: relative;}
.img-mentor-1{background: url("images/img-mentor-1.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 16 / 9}
.img-mentor-2{background: url("images/img-mentor-2.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 16 / 9}
.img-mentor-3{background: url("images/img-mentor-3.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 16 / 9}
.img-mentor-4{background: url("images/img-mentor-4.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 16 / 9}
.logo-googleforstartup{background: url("images/logo-googleforstartup.png") center center; background-repeat:no-repeat;  background-size: cover; width:265px; height:70px; display: block; position: absolute;right: 0; bottom: -30px}


.case-1{background: url("images/img-case-1-mobile.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 69 / 56; position: relative;}
.case-2{background: url("images/img-case-2-mobile.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 69 / 56; position: relative;}
.case-3{background: url("images/img-case-3-mobile.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 69 / 56; position: relative;}
.case-4{background: url("images/img-case-4-mobile.png") center center; background-repeat:no-repeat;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto; aspect-ratio: 69 / 56; position: relative;}
.caselogo2{background: url("images/caselogo2.png") center center; background-repeat:no-repeat;  background-size: cover; width:100%; height:50px; display: block; margin: 0 auto;}
.caselogo3{background: url("images/caselogo3.png") center center; background-repeat:no-repeat;  background-size: cover; width:100%; height:50px; display: block; margin: 0 auto;}
.caselogo4{background: url("images/caselogo4.png") center center; background-repeat:no-repeat;  background-size: cover; width:100%; height:50px; display: block; margin: 0 auto;}



.img-team-1{background: url("images/img-team-1.png") center center; background-repeat:no-repeat ;  background-size: contain; width:100%; height:auto; display: block; margin: 0 auto;aspect-ratio: 5 / 3;}

section.case{color: #fff}
section.case div{margin: 0 0 70px 0; }
section.case h3{text-align: left; margin: 0; font-weight: bold; text-transform: uppercase;}
section.case h4{text-transform: uppercase; margin: 0 0 10px 0}
section.case h4:after{content: ""; width:220px; height: 1px; background: #fff; display: block; margin: 5px 0}
section.case h3,
section.case h4{font-size: 1rem}
.list-case{position: relative;}
.list-case a{width: 100%; height: 100%; position: absolute; display: block;}
.list-case div{position: absolute; bottom: -30px; left: 20px}
.caselogo2,
.caselogo3,
.caselogo4{position: absolute;bottom: -30px; right: 0; width: 414px }

.box-grid ul{display: grid; grid-gap: 10px;grid-template-columns: minmax(50%, 1fr) 50%;}
.box-grid ul li b{display: block}


.box-grid-list ul{display: grid; grid-gap: 10px;grid-template-columns: minmax(50%, 1fr) 50%}
.box-grid-list ul li b{display: block}
.box-grid-list ul{margin:0 0 30px 0}


.box-grid-list-large ul{display: grid; grid-gap: 10px;grid-template-columns: minmax(50%, 1fr) 50%}
.box-grid-list-large ul li b{display: block}
.box-grid-list-large ul{margin: 0 0 30px 0}


.box-grid ul li:nth-child(1) b{border-bottom: 3px solid var(--ux-red); width:150px}
.box-grid-list ul li b{border-bottom: 1px solid var(--ux-red); width:20px; font-weight: 800; letter-spacing: -1px}
.box-grid-list-large ul li b{border-bottom: 1px solid var(--ux-red); width:20px; font-weight: 800; letter-spacing: -1px}


.closing { text-align: center; }
.closing h3{font-size: 38px; font-weight: 800; letter-spacing:-4px; line-height: 32px; margin: 150px 0 10px; text-transform: uppercase;}
.closing h3 b{color: var(--ux-red);font-weight: 800; }
.closing .img-profile-bottom{background: url("images/img-profile.png") center center; background-repeat:no-repeat; background-size: contain;width:100px; height:100px; display: block; margin: 0 auto;top: -220px; position: relative;}
.closing h2{ font-size: 1.2rem; letter-spacing:-0.09rem  }

section.highlight h3{border-bottom: 5px solid var(--ux-red); width:200px; font-weight: 800; letter-spacing: -1px; margin: 200px auto 10px}
section.highlight p{ width: 80%; margin: 0 auto }

section.qa-section{ font-size: 0.9rem }
section.qa-section dt{font-weight: bold;}
section.qa-section dd{font-size: 0.8rem}
.qa-group{margin: 0 20px 20px 20px}


.fade{ opacity:0}

.fade {animation: fadein .5s forwards;}
.fade:nth-child(1) {animation-delay: .2s;}
.fade:nth-child(2) {animation-delay: .4s;}
.fade:nth-child(3) {animation-delay: .6s;}
.fade:nth-child(4) {animation-delay: .9s;}
.fade:nth-child(5) {animation-delay: 1s;}
.fade:nth-child(6) {animation-delay: 1.2s;}
.fade:nth-child(7) {animation-delay: 1.4s;}
.fade:nth-child(8) {animation-delay: 1.6s;}


@keyframes fadein { 
    100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
              0% {
                opacity: 0
              }

              50%,100% {
                opacity: 1;
              }
            }



@-moz-keyframes fadeIn {
              0% {
                opacity: 0
              }

              50%,100% {
                opacity: 1;
              }
            }



@keyframes fadeIn {
              0% {
                opacity: 0
              }

              50%,100% {
                opacity: 1;
              }
            }

.mySlides{-webkit-transition: all 0.4s ease;    -moz-transition: all 0.4s ease;    -o-transition: all 0.4s ease;    transition: all 0.4s ease;}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 5px; 
  padding: 10px;
  background-color: #f0f0f0;
  margin: 10px
}

.grid-item {
  background-color: #ffffff;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-style: italic;
  font-size: 0.7rem;
  color: #333;
}

/* The specific red box style */
.highlight {
  background-color: #ff4136; /* Vibrant Red */
  color: white;
}

.intro h1{color: var(--ux-black)}
  .intro h2{color: var(--ux-red)}
  .intro h3{color: var(--ux-grey)}

  .intro h1,
  .intro h2,
  .intro h3{font-size: 1.8rem; line-height: 1.6rem; text-transform: uppercase;letter-spacing: -0.09rem; font-weight: bold; margin: 0}

  .img-brand{background: url(images/img-brand.png); width: 120px; height: 63px; display: block; background-repeat: no-repeat; background-size: cover; margin: 30px 0 10px 0; position: relative;}
  .img-brand a{width: 100%; height: 100%; position: absolute; display: block;}

  .panel-scroll{overflow-x: scroll;}
  .img-group{width: max-content;}
  .img-group img{height: 200px}

  div.section{margin: 20px 0}
  .text-group div{margin: 0 0 20px 0}
  .text-group h3{margin: 0 0 5px 0}
  .text-group li{margin: 0 0 8px 0}

  .group-portfolio{margin: 0 0 50px 0;}
  .group-portfolio img{width: 100%; height: auto; margin: 0 0 20px 0}

  .project-banner {
  display: grid;
  grid-template-columns: 0.2fr 0.6fr;
  font-family: Arial, sans-serif;
  line-height: 1.2;
  font-size: 1rem;
  max-width: 500px;
  position: relative;
  top: -50px
}

.labels {background-color: var(--ux-black);  color: #ffffff; padding: 5px; text-align: left; font-weight: bold;}
.details {  background-color:  var(--ux-red);  color: #ffffff;  padding: 5px;}
.labels li, .details li {  margin-bottom: 2px;  font-size: 1rem}
.details .bold {  font-weight: bold;}

@media screen and (min-width: 1200px) {

header,section {max-width: 1200px; margin: 90px auto}

header ul{ margin: 20px 0 0 }
header li{ font-size: 14px }
header p{font-size: 1.1rem; line-height: 1.5rem}

h1{font-size: 48px}
h2{font-size: 2rem}
h3{font-size: 30px}
p {font-size: 18px} 
li{font-size: 18px}
li b{font-size: 22px; font-weight:bold}

h3{margin: 50px auto 10px}

section.case h3, section.case h4{font-size: 1.5rem}
section.case ul li{font-size: 1rem; line-height: 1.6rem; text-transform: uppercase;}

section.highlight h3{width:380px; }
q{text-align: center; font-size: 1rem}

.grid-container {  grid-template-columns: 1fr 1fr 1fr;gap: 15px; }
.grid-item {font-size: 0.9rem;}

.logo-googleforstartup{bottom: -10px; right: -20px; width: 360px; height: 100px}


.img-key-visual{aspect-ratio: 5.5 / 2; margin: 0 0 50px 0}
.img-lean-startup{aspect-ratio: 6 / 2; margin: 0 0 50px 0}
.img-goal-align{aspect-ratio: 9 / 3; margin: 0 0 50px 0}

.box-grid ul li:nth-child(1) b{border-bottom: 3px solid var(--ux-red); width:250px}
.box-grid-list ul li b{border-bottom: 3px solid var(--ux-red); width:30px; font-weight: 800; letter-spacing: -1px}
.box-grid-list-large ul{margin: 0 0 20px 0}
.box-grid-list-large ul li{font-size: 24px; line-height: 30px}
.box-grid-list-large ul li b{font-size: 30px}

.box-grid-list-large ul li b{border-bottom: 4px solid var(--ux-red); width:50px; font-weight: 800; letter-spacing: -1px}
section.case div{margin: 0 0 40px 0}
section.case h2{margin: 20px 0}
.list-case{ position: relative;height: 330px; position: relative; }



.list-case div{  position: absolute; bottom: 20px; left: 80px}
.case-1{background: url("images/img-case-1.png") center center; background-repeat:no-repeat;  background-size: contain; width:1200px; height:336px; display: block; margin: 0 auto;}
.case-2{background: url("images/img-case-2.png") center center; background-repeat:no-repeat;  background-size: contain; width:1200px; height:335px; display: block; margin: 0 auto;}
.case-3{background: url("images/img-case-3.png") center center; background-repeat:no-repeat;  background-size: contain; width:1200px; height:335px; display: block; margin: 0 auto;}
.case-4{background: url("images/img-case-4.png") center center; background-repeat:no-repeat;  background-size: contain; width:1200px; height:335px; display: block; margin: 0 auto;}

.caselogo2,
.caselogo3,
.caselogo4{position: absolute;bottom: 0; right: 0; width: 410px }

section.qa-section{font-size: 1.1rem; max-width: 800px; margin: 0 auto }
section.qa-section dd{font-size: 0.9rem}

.intro h1,
.intro h2,
.intro h3{font-size: 3rem; line-height: 2.8rem; text-transform: uppercase;letter-spacing: -0.09rem; font-weight: bold; margin: 0}

.text{padding: 0}

.img-group img{height: 400px}

.text-group{ display: grid;  grid-template-columns: 1fr 1fr 1fr;  column-gap: 40px;}
.text-group h3{font-size: 1.3rem}
.text-group li b{font-size: 1.1rem}
.text-group li{font-size: 1rem}
.text-group.text{padding: 0}

}

}