:root {
  --blue: #1e2425  ; /*nav link colour*/
  --yellow:  #1E506D; /*contact button */

  --offwhite:  rgb(243, 243, 243); 
  --largemaxwidth: 1720px;
  --maxwidth: 1300px;
  --newgrey: #a6a6a6;
  --darkgrey:   #2f393d;
  --teal: #6e97ac;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --outline-width: 3px;
  --outline-color: rgba(0, 125, 250, 1);
  --outline-offset: -3px; /*use where it could stick out of page structure*/
}

.proj-banner{
  width: 100%;
  height: 500px;
  position: relative;
}
.banner-picture{
  height: 100%;
  width: 100%;
  display: block;
}
.banner-picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.proj-ban-over{
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: absolute;
  background:linear-gradient(180deg, rgba(0,0,255,0) 50%, rgba(71, 112, 131, 0.5) 95%); 
}
.banner-title-holder{
  position: absolute;
  bottom: 40px;
  width: 100%;
  z-index: 10;
}
.banner-title-holder .container{
  padding-bottom: 10px;
  padding-top: 10px;
}
.proj-banner h1{
  font-size: 3.2rem; 
  color: white;
  font-weight: 700;
  margin-bottom: 5px;
}
.banner-title-holder p{
  color: white;
}


.int-cont{
  background-color: white; 
  box-shadow: rgba(149, 157, 165, 0.2) 4px 4px 12px;  
  border-top: 10px solid var(--teal); 
}
.int-cont .container{
  padding: 0;
}
.proj-intro{
  display: grid;
  width: 100%;
  grid-template-columns: auto 1fr;
}
.overview{
  padding-left: 20px;
  padding-right: 20px;
  
}
.overview-cont{
  background-color: var(--teal);
  display: inline-block;
  border-bottom-left-radius: 9px;
  border-bottom-right-radius: 9px;
  padding-top: 3px;
  padding-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  border-top: 1px solid var(--teal);
}

.glance-ele:not(:last-child) {
  border-right: 2px solid var(--offwhite);
}
.glance-ele{
  padding: 20px;
  text-align: center;
  vertical-align: middle;
}
.int-cont h2{
  font-size: 2rem;
  color: var(--teal);
}
.overview p{
  font-size: 0.8rem;
  color: white;
  line-height: 1.2rem;
}
.overview h2{
  font-size: 1.2rem;
  color: white;
  font-weight: 600;
  display: inline-block;
}
.glance{
  display: grid;
  width: 100%;
  overflow: hidden;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-top: 15px;
  margin-bottom: 15px;
}
.glance p{
  font-size: 0.7rem;
  font-weight: 600; 
  color: var(--teal);
}
.glance svg{
  width: 50px;
  height: 50px;
}
.glance-ele h3{
  font-size: 0.8rem;
  color: var(--newgrey);
  font-weight: 500;
}
/*
@media screen and (max-width: 1150px) {
  .project h1{
    font-size: max(calc( 3.2rem + calc(3.687vw + -44.40px)), 1.8rem);
  }
  .project p{
    font-size: 1rem;
  }
  .project ul{
    font-size: 1rem;
  }
}
@media screen and (max-width: 800px) {
  .project h2{
    font-size: 1.5rem;
  }
  .project h3{
    font-size: 1.2rem;
    text-align: center;
  }
}*/

.txt{
  font-size: 1rem;
}
.tbold{
  color: var(--darkgrey);
  font-size: 2.5rem;
  font-weight: 800;
}
.main-stuff h2{
  color: var(--newgrey);
  font-size: 1rem;
  margin-top: 8px;
  margin-bottom: 8px;
}
/*brief*/
.brief{
  position: relative;
  margin-top: 65px;
  margin-bottom: 45px;
}
.brief span{
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 300px;
  height: 4px;
  transition: 1s ease-in-out;
  background-color: var(--teal);
}
.brief-one{
  width: 60%;
  margin-right: auto;
  margin-bottom: 28px;
}
.brief-two{
 width: 70%;
 margin-left: auto;
}

/*solution*/

.conta{
  max-width: var(--maxwidth);
  margin-left: auto;
  margin-right: auto;
}
.line-div{
  position: relative;
  width: 100%;
  height: 240px;
}
.solution span{
  position: absolute;
  width: 4px;
  height: 100%;
  background-color: var(--teal);
  top: 0;
  left: 45%;
  transform: translateX(-50%);
}
.sol-grid{
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 20px;
  
}
.sol-two{
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 30px;

}
.sol-two .tbold{
  margin-bottom: 28px;
}
.sol-one{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sol-picture{
  width: 100%;
  height: 100%;
  display: block;
}
.sol-picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sol-run{
  width: 100%;
  position: relative;
  padding-bottom: 120px;
  padding-top: 100px;
}    
.sol-run img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.sol-run span{
  margin: 0;
  position: absolute;
  height: 100%;
  top: 0;
  left: 45%;
  transform: translateX(-50%);
  z-index: 5;
}
.im-run{
  z-index: 10;
  position: relative;
  margin-bottom: 90px;  
  width: 100%;
  display: grid;
  aspect-ratio: 3;
  gap: 15px;
  overflow: hidden;
}
.sol-three{
  grid-template-columns: 2fr 1fr;
}
.sol-four{
  grid-template-columns: 1fr 1fr;
}
.sol-five{
  grid-template-columns: 2fr 1fr;
}
.banner-picture-two{
  width: 100%;
  display: block;
  margin-bottom: 80px;
  max-height: 500px;
}
.banner-picture-two img{
  width: 100%;
  object-fit: cover;
  object-position: center;
  max-height: 500px;
}
/*OUTCOME*/
.outcome{
  position: relative;
}
.outcome span{
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 300px;
  height: 4px;
  transition: 1s ease-in-out;
  background-color: var(--teal);
}
.outcome .tbold{
  margin-bottom: 28px;
}
.out-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 60px;
}
.out-one{
  padding-right: 30px;
}
.quote{
  background-color: var(--teal);
  padding: 30px;
  position: relative;
}
.quote-txt{
  font-size: 1rem;
  margin-bottom: 5px;
}
.author{
  color: white;
  font-size: 0.8rem;
}
.outcome picture{
  display: block;
  margin-bottom: 60px;
}
.outcome img{
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-height: 600px;
}
.quote svg{
  width: 80px;
  height: 80px;
  position: absolute;
}
.quote-one{
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}
.quote-two{
  right: 0;
  bottom: 0;
  transform: translate(0%, 50%);
}




@media screen and (max-width: 920px) {
  /*.blog h1{
    font-size: max(calc( 3.2rem + calc(3.687vw + -44.40px)), 1.8rem);
  }*/
  .out-grid{
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .quote svg{
    width: 60px;
    height: 60px;
  }
  .tbold{
    font-size: 2rem;
  }
  .proj-intro{
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width:800px) {
  .brief-one{
    width: 75%;
  }
  .brief-two{
    width: 100%;
  }
  .sol-grid{
    grid-template-columns: 1fr;
  }
  .sol-two{
    padding-top: 10px;
  }
  .im-run{
    margin-bottom: 10px;
    gap: 10px;
  }
  /*.im-run{
    grid-template-columns: 1fr;
  }*/

}
@media screen and (max-width:650px) {
  .im-run{
    grid-template-columns: 1fr;
    gap: 0;
    height: 350px;
    margin-bottom: 40px;
  }
  .sol-three img:nth-child(2){
    display: none;
  }
  .sol-four img:nth-child(1){
    display: none;
  }
  .sol-five img:nth-child(2){
    display: none;
  }
  .sol-run{
    padding-bottom: 30px;
  }
}

@media screen and (max-width: 500px) {
  
  .glance{
    grid-template-columns: 1fr 1fr;
  }
  .glance-ele{
    padding: 10px;
  }
  .glance-ele:nth-child(even){
    border-right: none;
  }
  .quote{
    padding: 2px;
  }
  .quote svg{
    width: 40px;
    height: 40px;
  }
  .tbold{
    font-size: 1.7rem;
  }
  .brief-one{
    width: 100%;
  }
  .sol-one{
    height: 400px;
  }
  .banner-picture-two img, .outcome img{
    height: 350px;

  }
}


/*
@media screen and (max-width: 800px) {
  .out-in-grid{
    grid-template-columns: 1fr;
  }
  .blog h2{
    font-size: 1.5rem;
  }
  .blog h3{
    font-size: 1.2rem;
    text-align: center;
  }
  .blog-intro{
    height:700px;
  }
}*/