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

  --offwhite:  rgb(243, 243, 243); 
  --largemaxwidth: 1720px;
  --maxwidth: 1300px;
  --newgrey: rgb(166, 166, 166);
  --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*/
}

/*=============================================================main==============================*/
main{
  background-color: rgb(255, 255, 255);
}
/*================================================section one ====================================*/
.section-one{
  width: 100%;
}
.sc1-video{
  width: 100%;
  position: relative;
  height: calc(100vh - 80px); 
  max-height: min(max(150vw, 480px), 1300px); 
  min-height: 400px;
}
.vidOne{
  height: calc(100vh - 80px);
  max-height: min(max(150vw, 480px), 1300px); 
  min-height: 400px;
  width: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  mask-composite: intersect;
}
.sc1-grid{
  max-width: 1510px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: min(calc(100vh + -170px), 450px);  
  grid-template-columns: 1fr 1.65fr; 
  gap: 10px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 8rem;
  padding-top: 80px;
}
.sc1-cont{
  display: flex;
  flex-direction: column;
  gap: 30px; 
  padding-top: 80px; 
  z-index: 10;
  padding: 20px;
  background-color:  #3481b800;
  border-radius: 20px;
}
.sc1-title{
  position: relative;
}
#int-title{
  color: white;
  text-shadow: #000 0px 0px 100px;
  font-size: min(max(min(max(8vh, 50px), 8vw), 32px), 110px); 
  font-weight: 600;
  letter-spacing: -0.068em;
  line-height: 1.75;
}
.sc1-additional{
  color: var(--yellow);
  font-weight: 500;
  
  letter-spacing: 1.28px;
}
.sc1-additional p{
  position: absolute;
  bottom: 0px;
  left:min(100%, 50% + 1400px);
  transform: translate(-100%, 0);
  padding: 25px;
  font-weight: 600;
  width: 44rem;
  color: white;
  border-top-left-radius: 10px;
  background-color: #6e97ac9f;  
  font-size: 0.9rem;   
  letter-spacing: 1.28px;    
}
.sc1-additional a{
  display: block;
  color: 	white;
  width: fit-content;
  height: fit-content;
  padding: 15px;
  border-radius: 3px;
  background-color: var(--teal);
  white-space: nowrap;
  transition: 0.2s ease;
  font-size: 1rem; 
}
.sc1-additional a:hover{
  background-color: var(--newgrey);
}
.sc1-additional a:visited{
  color: 	white;
}
@media screen and (min-width: 1500px) {
  @media screen and (min-height: 1400px) {
    .sc1-additional p{
      font-size: 30px;
      width: 65rem;
    }
    .sc1-additional a{
      font-size: 30px;
    }
  }
}
@media screen and (max-width: 450px) {
  .sc1-grid{
    padding-left: 0;
  }
  .sc1-cont{
    padding-left: 0;
  }
  .sc1-additional p{
    font-size: 0.7rem;
  }
  .sc1-video{
    min-height: 600px;/
  }
  .vidOne{
    min-height: 600px;
  }
  .sc1-additional a{
    padding: 10px;
    font-size: 0.7rem;
  }
}
@media screen and (max-height: 800px) {  
  @media screen and (max-width: 950px) {
    .sc1-additional a{
      padding: 10px;
      font-size: 0.7rem;
    }
  }
  @media screen and (min-width: 451px) {
    .sc1-grid{
      padding-top: 0;
    }
    .sc1-cont{
      padding-top: 0;
    }
  }
}
@media screen and (max-width: 400px) {
  .sc1-video{
    max-height: 600px;
  }
  .vidOne{
    max-height: 600px;
  }
}
@media screen and (max-width: 1290px) { 
  @media screen and (min-width: 951px) {
    .sc1-video{
      max-height: min(max(150vw, 480px), 1100px); 
    }
    .vidOne{
      max-height: min(max(150vw, 480px), 1100px);
    }
  }
}
@media screen and (max-width: 950px) {
  @media screen and (min-width: 451px) {
    .sc1-video{
      min-height: 450px;
    }
    .vidOne{
      min-height: 450px;
    }
    @media screen and (max-height: 670px) {
      .sc1-additional p{
        padding: 10px;
      }
    }
  }
  @media screen and (min-width: 401px) {
    .sc1-video{
      max-height: min(max(150vw, 480px), 950px); 
    }
    .vidOne{
      max-height: min(max(150vw, 480px), 950px); 
    }
  }
  @media screen and (min-width: 577px) {
    .sc1-video{
      height: calc(100vh + -96.72px);
    }
    .vidOne{
      height: calc(100vh + -96.72px);
    }
  }
  .sc1-additional a{
    padding: 15px;
  }
  @media screen and (min-width: 451px) {
    .sc1-video{
      
      height: calc(100vh + calc(calc(74.89px + calc(calc(calc(100vw+-451px)/499)*21.83)))*-1);
    }
    .vidOne{
      
      height: calc(100vh + calc(calc(74.89px + calc(calc(calc(100vw+-451px)/499)*21.83)))*-1);
    }
  }
  .sc1-title{
    font-size: 2rem;
  }
  .sc1-additional p{
    width: 100%;
  }
}
@media screen and (min-width: 951px) {
  @media screen and (max-width: 1040px) { 
    @media screen and (max-height: 680px) {    
      .sc1-additional p{
        max-width: 700px;
      }
    }
  }
}
@media screen and (max-width: 319px) {
  .sc1-video{
    height: calc(100vh + -55.11px);
  }
  .vidOne{
    height: calc(100vh + -55.11px);
  }
}
@media screen and (max-width: 600px) {
  .sc1-graphic img{
    border-radius: 10px;
  }
  .sc1-graphic label{
    border-radius: 10px;    
  }
}
@media screen and (min-width: 451px) {
  @media screen and (max-width: 720px) {
    @media screen and (min-height: 600px) {
      @media screen and (max-height: 650px) { 
        .sc1-cont{
          padding-top: 50px; 
        }
      }
    }
  }
  @media screen and (max-width: 570px) { 
    @media screen and (min-height: 651px) { 
      @media screen and (max-height: 750px) {
        .sc1-cont{
          padding-top: 50px; 
        }
      }
    }
  }
  @media screen and (max-width: 500px) {
    @media screen and (min-height: 751px) { 
      @media screen and (max-height: 799px) {
        .sc1-cont{
          padding-top: 50px; 
        }
      }
    }
  }
} 
/*===========================================section two ==================================================================================*/
.section-two{
  width: 100%;
  background-color: var(--offwhite);
  color:  var(--blue);  
}
.services-top{
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
  width: 100%;
  font-size: 1.2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  position: relative;
}
.s2-left{
  padding-right: 30px;
}
.s2-left p{
  display: inline;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 1.1px;
  color: var(--darkgrey);
  line-height: 1.4;
}
.section-two h2{
  margin-bottom: 15px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -0.28rem;
  font-size: 3.8rem;
}
.section-two h2 span{
  color: var(--newgrey);
  font-weight: 400;
  letter-spacing: -0.67rem;
}
.s2-right{
  width: 100%;
  height: 100%;
}
.s2-right picture{
  opacity: 0;
  height: 100%;
  width: 100%;
}
.s2-right img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.s2-right picture:not(:nth-child(1)) {
  position: absolute;
  top: 0;
  left: 0;
}
.quote{
  margin-top: 30px; 
}
.quote p{
  font-size: 1.5rem;
  font-weight: 600;
  font-style: italic;
  color: var(--teal);
}
.image-holder{
  position: relative;
  height: 100%;
}
@media screen and (max-width: 1500px) {
  .services-top h2{
    font-size: 3.2rem;
    letter-spacing: -0.236rem;
  }
  .section-two h2 span{
    letter-spacing: -0.564rem;
  }
} 
@media screen and (max-width: 1150px) {
  .services-top h2{
    font-size: 2.8rem;
    letter-spacing: -0.206rem;
  }
  .section-two h2 span{
    letter-spacing: -0.494rem;
  }
  .s2-left{
    padding-right: 0;
  }
} 
@media screen and (max-width: 920px) {
  .services-top{
    grid-template-columns: 1fr;
    padding-top: 0;
    padding-bottom: 20px;
  }
  .section-two h2{
    margin-top: 5px;
  }
} 
@media screen and (max-width: 700px) {
  .services-top h2{
    font-size: 2.4rem;
    letter-spacing: -0.177rem;
  }
  .section-two h2 span{
    letter-spacing: -0.423rem;
  }
}
@media screen and (max-width: 500px) {
  .s2-left p{
    font-size: 1rem;
  }
  .s2-right img{
    height: 400px;
  }
  .quote p{
    font-size: 1.2rem;
  }
  .services-top h2{
    font-size: 1.8rem;
    letter-spacing: -0.133rem;
  }
  .section-two h2 span{
    letter-spacing: -0.317rem;
  }
} 
@keyframes inout2{
  0%   {opacity: 0;}
  5%  {opacity: 1;}
  50%  {opacity: 1;}
  60%  {opacity: 0;}
  100% {opacity: 0;}
}
.image-holder picture:first-child:nth-last-child(1){
  opacity: 1;
}
.image-holder picture:first-child:nth-last-child(2){
  animation-name: inout2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}
.image-holder picture:first-child:nth-last-child(2) ~ picture:nth-child(2){
  animation-name: inout2;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: 5s;
}
@keyframes inout3{
  0%   {opacity: 0;}
  3.3%  {opacity: 1;}
  33.3%  {opacity: 1;}
  40%  {opacity: 0;}
  100% {opacity: 0;}
}
.image-holder picture:first-child:nth-last-child(3){
  animation-name: inout3;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}
.image-holder picture:first-child:nth-last-child(3) ~ picture:nth-child(2){
  animation-name: inout3;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-delay: 5s;
}
.image-holder picture:first-child:nth-last-child(3) ~ picture:nth-child(3){
  animation-name: inout3;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-delay: 10s;
}
@keyframes inout4{
  0%   {opacity: 0;}
  2.5%  {opacity: 1;}
  25%  {opacity: 1;}
  30%  {opacity: 0;}
  100% {opacity: 0;}
}
.image-holder picture:first-child:nth-last-child(4){
  animation-name: inout4;
  animation-duration: 20s;
  animation-iteration-count: infinite;
}
.image-holder picture:first-child:nth-last-child(4) ~ picture:nth-child(2){
  animation-name: inout4;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-delay: 5s;
}
.image-holder picture:first-child:nth-last-child(4) ~ picture:nth-child(3){
  animation-name: inout4;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-delay: 10s;
}
.image-holder picture:first-child:nth-last-child(4) ~ picture:nth-child(4){
  animation-name: inout4;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-delay: 15s;
}
/*===================================================section b ===================================================*/
.section-b{
  background-color: white;
} 
.b-inner{
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  align-items:center;
}
.b-text{
  padding-top: calc(5rem + -30px);
  padding-bottom: 5rem;
}
.section-b h2{
  color: var(--teal);
  text-align: center;
}
.section-b h2::before{
  content: "";
  display: inline-block;
  font-size: 4rem;
  vertical-align: middle;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--newgrey);
  margin-right: 10px;
}
.b-undertext{
  color: var(--newgrey);
  font-size: 1.8rem;
  font-weight: 500;
}
.b-undertext ul{
  list-style: none;
}
.b-undertext li{
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
.b-undertext li:not(:last-child):after {
  content: "";
  position: absolute;
  height: calc(1.5em * 0.7);
  width: 1px;
  background-color: var(--newgrey);
  margin-left: 15px;
  margin-top: calc(1.5em * 0.15);
}
.services-card-holder{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  width: 100%;
  gap: 2%;
  margin-bottom: 80px;
}
.services-card{
  border-radius: 10px;
  position: relative;
  display: flex;
  width: 100%;
  height: 500px;
  flex-direction: column;
  overflow-y: hidden;
  border-radius: 3px;
  background-color: white;
}
.service-top{
  padding-left: 17px;
  padding-right: 17px;
  padding-top: 17px;
  min-height: 200px;
  position: absolute;
  z-index: 10;
}
.service-top a{
  transition: 0.2s ease;
}
.services-card-holder a:hover .service-over{
  background:linear-gradient(180deg, rgba(105, 108, 109, 0.9) 1%, rgba(177, 179, 180, 0.5) 60%); 
}
.services-card-holder a:hover .service-info{
  text-shadow: #000 0px 0px 20px;
}
.service-top svg{
  transition: 0.2s ease;
}
.services-card h3{
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  letter-spacing: 1.5px;
}
.service-info{
  color: white;
  text-shadow: rgba(59, 80, 90, 1) 0px 0px 20px;
  font-size: 1.2rem; 
  font-weight: 400; 
}
.service-divide{
  width: 100%;
  height: 100%;
  overflow: hidden;
  filter: blur(0px);
}
.service-link{
  display: inline;
  color: var(--teal);
  font-size: 0.7rem;
  border-radius: 50%;
  border: 2px solid white;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.service-link:visited{
  color: white;
  display: inline;
}
.service-link svg{
  fill: white;
  display: block;
}
.service-divide picture{
  width: 100%;
  height: 100%;
  display: block;
}
.service-divide img{
  width: 100%;
  height: 100%;
  border-radius: inherit;
  filter: none;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  
}
.service-over{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background:linear-gradient(180deg, rgba(71, 112, 131, 0.9) 15%, rgba(0,0,255,0) 60%);
}
.services-card h3::before{
  content: "";
  display: inline-block;
  font-size: 2rem;
  vertical-align: middle;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.partner-block a{
  transition: 0.2s ease;
}
.partner-block a:hover{
  background-color: var(--newgrey);
}
.but{
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 1.5px;
}
@media screen and (max-width: 1300px) {
  .services-card-holder{
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .service-top{
    min-height: 170px;
  }
  .services-card{
    height: 400px;
  }
  .section-b h2::before{
    width: 0.8rem;
    height: 0.8rem;
  }
}
@media screen and (max-width: 900px) {
  .service-top{
    min-height: 210px;
  }
  .b-text{
    padding-top: 20px;
    padding-bottom: 50px;
  }
  .section-b h2::before{
    width: 0.7rem;
    height: 0.7rem;
  }
}
@media screen and (max-width: 715px) {
  .services-card-holder{
    grid-template-columns: 1fr;
  }
  .services-card-holder{
    margin-bottom: 40px;
  }
  .service-top{
    min-height: 170px;
  }
  .b-undertext li{
    margin-left: 2px;
    margin-right: 2px;
  } 
  .b-undertext li:not(:last-child):after {
    margin-left: 4px;
    margin-top: calc(1.5em * 0.15);
  }
  .section-b h2::before{
    width: 0.6rem;
    height: 0.6rem;
  }
}
@media screen and (max-width: 455px) {
  .service-top{
    min-height: 220px;
  }
  .services-card-holder{
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media screen and (max-width: 1150px) {
  .b-text h2{
    font-size: max(calc( 3.2rem + calc(3.687vw + -44.40px)), 1.8rem);
  }
  .b-undertext{
    font-size: max(calc( 1.8rem + calc(3.687vw + -44.40px)), 0.71rem); 
  }
}
.partner-block a{
  border-radius: 0.2rem;
  background-color: var(--teal);
  color: white;
  font-weight: 400;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
}
.partner-block p{
  line-height: 2.2;
  color: var(--teal);
  margin-bottom: 10px;
  font-size: 1.2rem;
  text-align: center;
  font-weight: 500;
}
@media screen and (max-width: 850px) {
  .partner-block p{
    font-size: 1rem;
  }
}    
/*=================================  section five   ==============================================================*/
.section-five{
  margin-left: auto;
  margin-right: auto;
  background-color: var(--offwhite);
  padding-bottom: 160px;
  overflow-x: hidden;
}
.section-five .container{
  padding: 0;
}
.sc5-holder{
  width: 100%;
  position: relative;
  aspect-ratio: 1.4/1;
}
.section-five h2{
  color: var(--teal);
  margin-left: 30px;
  padding-top: 70px;
}
.section-five h2:before{
  content: "";
  display: inline-block;
  font-size: 4rem;
  vertical-align: middle;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--newgrey);
}
.section-five h3{
  font-weight: 600;
  font-size: 1.4rem;
  margin-bottom: 5px;
  margin-top: 5px;
  color: var(--teal);
}
.section-five ol{
  list-style: none;
}
.section-five li{
  padding-top: min(3.75%, 64.5px);/*how to make this dependent to set width and height of ball on svg size ?? not just screen width   10% of max-width 1720 */
  max-width: 25%;
  position: absolute;
  width: 25%;
}
.holder-ele::before{
  width: 30%;
  aspect-ratio: 1/1;
  background-color: white;
  border-radius: 50%;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}
.holder-ele{
  color: var(--darkgrey);
  font-size: 1rem;
  font-weight: 500;
  overflow-wrap: break-word;
}
.holder-ele .ball{
  width: 20%;
  aspect-ratio: 1/1;
  position: absolute;
  left: 0%;
  top: 0%;
  transform: translate(-50%, -50%);
}
.holder-ele .ball circle{
  fill: var(--teal);
}
#sc5-background path{
  stroke: #cdd5da;
}
.sc5-holder ol li:nth-child(1){
  left: 10%;
  top: 15%;
}
.sc5-holder ol li:nth-child(2){
  left: 70%;
  top: 22%;
}
.sc5-holder ol li:nth-child(3){
  left: 42%;
  top: 42%;
}
.sc5-holder ol li:nth-child(4){
  left: 10%;
  top: 75%;
}
.sc5-holder ol li:nth-child(5){
  left: 62.5%;
  top: 80%;
}
.sc5-holder ol li:nth-child(5) .ball{
  left: 33.333%;
  top: 0%;
  width: 13.3333%;
}
.sc5-holder ol li:nth-child(5) .holder-ele::before{
  left: 33.333%;
  width: 20%;
}
.sc5-holder ol li:nth-child(5){
  max-width: 37.5%;
  width: 37.5%;
}
.small-line{
  display: none;
}
.fnbs5{
  fill: none;
  stroke: black;
  stroke-width: 5px;
}
.fns5{
  fill: none;
  stroke-width: 5px;
}
.fnbs3{
  fill: none;
  stroke: black;
  stroke-width: 3px;
}
.fnbs1{
  fill: none;
  stroke: black;
  stroke-width: 1px;
}
#stripe10 circle{
  fill: none;
}
#stripe2 circle{
  fill: none;
}
@media screen and (max-width: 875px) {
  /*switch diagram to single*/
  .section-five{
    padding-bottom: 90px;
  }
  #sc5-background{
    display: none;
  }
  .section-five li{
    position: static;
    left: auto;
    top: auto;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-top: 140px;
  }
  .sc5-holder{
    padding-left: 30px;
    padding-right: 30px;
  }
  .section-five h3{
    font-size: 1.2rem;
  }
  .sc5-holder ol li:nth-child(5){
    position: static;
    left: auto;
    top: auto;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  .holder-ele{
    position: relative;
    width: 100%;
  }
  .holder-ele .ball{
    width: 50px;
    height: 50px;
  }
  .holder-ele::before{
    width: 60px;
    height: 60px; 
  }
  .sc5-holder ol li:nth-child(1){
    padding-top: 110px;
  }
  .sc5-holder ol li:nth-child(1) .ball{
    left: 0%;
    top: 0%;
    transform: translate( 5px, -55px);
    z-index: 3;
  }
  .sc5-holder ol li:nth-child(1) .holder-ele::before{
    left: 0%;
    top: 0%;
    transform: translate( 0, -100%);
    z-index: 2;
  }  
  .sc5-holder ol li:nth-child(1) .small-line{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 1000px;
    height: 140px;
    transform: translate( 0, -100%);
    z-index: 1;
    stroke: #cdd5da;
  }
  .sc5-holder ol li:nth-child(2) .ball{
    left: 50%;
    top: 0%;
    transform: translate( -25px, -55px);
    z-index: 3;
  }
  .sc5-holder ol li:nth-child(2) .holder-ele::before{
    left: 50%;
    top: 0%;
    transform: translate( -50%, -100%);
    z-index: 2;
  }
  .sc5-holder ol li:nth-child(2) h3{
    padding-left: calc(50% - 25px);
  }
  .sc5-holder ol li:nth-child(2) .small-line{
    display: block;
    position: absolute;
    left: calc(50% + -1000px);
    top: 0;
    width: 1000px;
    height: 140px;
    transform: translate( 0, -100%);
    z-index: 1;
    stroke: #cdd5da;
  }
  .sc5-holder ol li:nth-child(3) .ball{
    left: 0%;
    top: 0%;
    transform: translate( 5px, -55px);
    z-index: 3;
  }
  .sc5-holder ol li:nth-child(3) .holder-ele::before{
    left: 0%;
    top: 0%;
    transform: translate( 0, -100%);
    z-index: 2;
  }
  .sc5-holder ol li:nth-child(3) .small-line{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 1000px;
    height: 140px;
    transform: translate( 0, -100%);
    z-index: 1;
    stroke: #cdd5da;
  }
  .sc5-holder ol li:nth-child(4) .ball{
    left: 60%;
    top: 0%;
    transform: translate( 5px, -55px);
    z-index: 3;
  }
  .sc5-holder ol li:nth-child(4) .holder-ele::before{
    left: 60%;
    top: 0%;
    transform: translate( 0, -100%);
    z-index: 2;
  }
  .sc5-holder ol li:nth-child(4) h3{
    padding-left: calc(60% );
  }
  .sc5-holder ol li:nth-child(4) .small-line{
    display: block;
    position: absolute;
    left: calc(60% + -860px);
    top: -10px;
    width: 1000px;
    height: 140px;
    transform: translate( 0, -100%);
    z-index: 1;
    stroke: #cdd5da;
  }
  .sc5-holder ol li:nth-child(5) .ball{
    width: 50px;
    height: 50px;
    left: 0%;
    top: 0%;
    transform: translate( 5px, -55px);
    z-index: 3;
  }
  .sc5-holder ol li:nth-child(5) .holder-ele::before{
    width: 60px;
    height: 60px;
    left: 0%;
    top: 0%;
    transform: translate( 0, -100%);
    z-index: 2;
  }
  .sc5-holder ol li:nth-child(5) .small-line{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 1000px;
    height: 140px;
    transform: translate( 0, -100%);
    z-index: 1;
    stroke: #cdd5da;
  }
}
@media screen and (max-width: 1150px) {
  .section-five h2{
    font-size: max(calc( 3.2rem + calc(3.687vw + -44.40px)), 1.8rem);
  }
}
@media screen and (max-width: 1200px) {
  .section-five h2:before{
    width: 0.8rem;
    height: 0.8rem;
  }
}
@media screen and (max-width: 900px) {
  .section-five h2:before{
    width: 0.7rem;
    height: 0.7rem;
  }
}
@media screen and (max-width: 660px) {
  .section-five h2:before{
    width: 0.6rem;
    height: 0.6rem;
  }
}

/*=======================================================section four =====================================================*/
.section-four{
  margin-top: 0px;
  background-color:  white; 
  padding-top: 30px;
}
.section-four h2{
  margin-bottom: 15px;
  color: var(--teal);
}
.section-four h2::before{
  content: "";
  display: inline-block;
  font-size: 4rem;
  vertical-align: middle;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--newgrey);
}
.section-four p{
  color: var(--darkgrey);
  font-size: 1rem; 
  font-weight: 500;
  text-align: center;
}
.pc{
  display: grid;
  grid-template-columns: 11fr 9fr;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  margin-bottom: 50px;
}
.pc-left-up{
  display: grid;
  grid-template-columns: 2fr 2fr 7fr;
}
.c1{
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}
.c1-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  scroll-behavior: smooth;
  transition: 1s;
}
.cimage{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  object-fit: cover;
  opacity: 0;
  transition: all 1s;
}
.c2{
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}
.c2-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  scroll-behavior: smooth;
  transition: 1s;
}
.pc-txt{
  grid-row-start: 2;  /*for responsive change text size and grid row start to 1 add grid row end to 3 or 4 for two different effects probs 3 is better*/
  grid-row-end: 4; 
  grid-column-start: 3;
  grid-column-end: 4;
  grid-auto-flow: row;
  overflow-x: hidden;
  margin-left: 10px;
  margin-right: 10px;
}    
.section-four h3{
  color: var(--teal);
  font-size: 1.4rem;
  font-weight: 600;
}
.txt-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  scroll-behavior: smooth;
  transition: 1s;
}
.pc-controls{
  margin-left: auto;
  margin-right: 15%;
  width: 80px;
  border: 2px solid var(--newgrey);
  border-radius: 20px;
  padding-left: 7px;
  padding-right: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pc-controls svg{
  fill: var(--newgrey);
  vertical-align: middle;
}
.pc-controls label{
  cursor: pointer;
}
.pc-controls label:hover svg{
  fill: var(--teal);
}
.img-conta{
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}
.pc-left-down{
  display: grid;
  grid-template-columns: 2fr 5fr 4fr;
}
.circ{
  width: 100%;
  outline: 4px solid var(--teal);
  outline-offset: -1px;
  overflow: hidden;
  border-radius: 50%;
  gap: 10px;
}
.c3{
  grid-column-start: 2;
  grid-column-end: 3;
}
.c3-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  scroll-behavior: smooth;
  transition: 1s;
}
.pc-right{
  grid-template-columns: 1fr;
  position: relative;
}
.c4-scroller{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  scroll-behavior: smooth;
  transition: 1s;
}
.txt-ele{
  height: 0px;
  overflow: hidden;
}
.vidpro{
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  mask-composite: intersect;
}
.proc-further p{
  position: absolute;
  bottom: 0;
  right: 0;
  line-height: 2.2;
}
.proc-further a{
  border-radius: 0.2rem;
  background-color: var(--teal);
  color: white;
  font-weight: 500;
  padding: 15px;
  font-size: 1rem;
  letter-spacing: 1.5px;
  transition: 0.2s ease;
}
.proc-further a:hover{
  background-color: var(--newgrey);
}

.proc-further-two{
  display: none;
  margin-top: 45px;
  margin-bottom: 15px;

  width: 100%;
}
.proc-further-two a{
  border-radius: 0.2rem;
  background-color: var(--teal);
  color: white;
  font-weight: 400;
  padding: 10px;
  font-size: 1.2rem;
  line-height: 2;
}
#pro1:checked ~ main .txt-ele:nth-child(1){
  height: 100%;
  overflow: visible;
}
#pro2:checked ~ main .txt-ele:nth-child(2){
  height: 100%;
}
#pro3:checked ~ main .txt-ele:nth-child(3){
  height: 100%;
}
#pro4:checked ~ main .txt-ele:nth-child(4){
  height: 100%;
}

#pro1:checked ~ main .c1-scroller{
  transform: translate(0%, 0);
}
#pro1:checked ~ main .c2-scroller{
  transform: translate(0%, 0);
}
#pro1:checked ~ main .c3-scroller{
  transform: translate(0%, 0);
}
#pro1:checked ~ main .c4-scroller{
  transform: translate(0%, 0);
}
#pro1:checked ~ main .txt-scroller{
  transform: translate(0%, 0);
}

#pro2:checked ~ main .c1-scroller{
  transform: translate(-100%, 0);
}
#pro2:checked ~ main .c2-scroller{
  transform: translate(-100%, 0);
}
#pro2:checked ~ main .c3-scroller{
  transform: translate(-100%, 0);
}
#pro2:checked ~ main .c4-scroller{
  transform: translate(-100%, 0);
}
#pro2:checked ~ main .txt-scroller{
  transform: translate(-100%, 0);
}

#pro3:checked ~ main .c1-scroller{
  transform: translate(-200%, 0);
}
#pro3:checked ~ main .c2-scroller{
  transform: translate(-200%, 0);
}
#pro3:checked ~ main .c3-scroller{
  transform: translate(-200%, 0);
}
#pro3:checked ~ main .c4-scroller{
  transform: translate(-200%, 0);
}
#pro3:checked ~ main .txt-scroller{
  transform: translate(-200%, 0);
}

#pro4:checked ~ main .c1-scroller{
  transform: translate(-300%, 0);
}
#pro4:checked ~ main .c2-scroller{
  transform: translate(-300%, 0);
}
#pro4:checked ~ main .c3-scroller{
  transform: translate(-300%, 0);
}
#pro4:checked ~ main .c4-scroller{
  transform: translate(-300%, 0);
}
#pro4:checked ~ main .txt-scroller{
  transform: translate(-300%, 0);
}


#pro1:checked ~ main .c1-scroller .img-conta:nth-child(1) img{
  opacity: 1;
}
#pro1:checked ~ main .c2-scroller .img-conta:nth-child(1)   img{
  opacity: 1;
}
#pro1:checked ~ main .c3-scroller .img-conta:nth-child(1)   img{
  opacity: 1;
}
#pro1:checked ~ main .c4-scroller .img-conta:nth-child(1)  img{
  opacity: 1;
}

#pro2:checked ~ main .c1-scroller .img-conta:nth-child(2)  img{
  opacity: 1;
}
#pro2:checked ~ main .c2-scroller .img-conta:nth-child(2)  img{
  opacity: 1;
}
#pro2:checked ~ main .c3-scroller .img-conta:nth-child(2)  img{
  opacity: 1;
}
#pro2:checked ~ main .c4-scroller .img-conta:nth-child(2)  img{
  opacity: 1;
}

#pro3:checked ~ main .c1-scroller .img-conta:nth-child(3)  img{
  opacity: 1;
}
#pro3:checked ~ main .c2-scroller .img-conta:nth-child(3)  img{
  opacity: 1;
}
#pro3:checked ~ main .c3-scroller .img-conta:nth-child(3)  img{
  opacity: 1;
}
#pro3:checked ~ main .c4-scroller .img-conta:nth-child(3)  img{
  opacity: 1;
}

#pro4:checked ~ main .c1-scroller .img-conta:nth-child(4)  img{
  opacity: 1;
}
#pro4:checked ~ main .c2-scroller .img-conta:nth-child(4)  img{
  opacity: 1;
}
#pro4:checked ~ main .c3-scroller .img-conta:nth-child(4)  img{
  opacity: 1;
}
#pro4:checked ~ main .c4-scroller .img-conta:nth-child(4)  img{
  opacity: 1;
}


@media screen and (max-width: 1150px) {
  .section-four h2{
    font-size: max(calc( 3.2rem + calc(3.687vw + -44.40px)), 1.8rem);
  }
  .section-four h3{
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 850px) {
  .pc{
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
    margin-bottom: 0px;
    text-align: center;
  }
  .pc-left{
    order: 1;
  }
  .pc-right{
    order: 0;
  }
  .pc-left-down{
    display: none;
  }
  .c1{
    display: none;
  }
  .c2{
    display: none;
  }
  .pc-left-up{
    grid-template-columns: 1fr;
  }
  .pc-controls{
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }
  .proc-further p{
    display: none;

  }
  .proc-further-two{
    display: flex;
    justify-content: flex-end;
  }
  .proc-further-two p{
    margin-left: auto;
    display: inline-block;
  }
  .proc-further-two a{
    font-size: 1rem;
  }
}
.proc-further-two a:hover{
  background-color: var(--newgrey);
}
@media screen and (max-width: 500px) {
  .proc-further-two p{
    text-align: center;
    line-height: 2.5;
  }
}
/*==========================================================================section three ==================================================================================*/
.section-three{
  background-color: var(--teal);
  color: var(--yellow);
  font-size: 1.2rem; 
  overflow: hidden;
  font-weight: 500;
}
.section-three h2{
  color: white;
}
.section-three h2::before{
  content: "";
  display: inline-block;
  font-size: 4rem;
  vertical-align: middle;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--newgrey);
}
.c-grid{
  display:flex;
  flex-direction: row;
  margin-bottom: 0px;
}
.c-grid a{
  color: white;
}
.enq{
  color: var(--blue);
  margin-left: auto;
  background-color: var(--green);
  margin-right: 10%;
  max-width: fit-content;
  max-height: fit-content;
  aspect-ratio: 100/100;
  border-radius: 50%;
  padding: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-top: auto;
}
form{
  color: var(--darkgrey);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: grid;
  grid-auto-flow: row;
  row-gap: 15px;
  font-size: 1.1rem;
}
form label{
  display: block;
  font-weight: 500;
  margin-bottom: 0rem;
}
.form .form-ele:nth-child(2){
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.5rem;
}
.form .form-ele:nth-child(2) input{
  border-radius: 5px;
  padding: 0.35rem;
  border:  1px solid var(--newgrey);
  width: 100%;
  font-weight: 500;
  color: var(--darkgrey);
}
.form .form-ele:nth-child(3) input{
  width: 100%;
  border-radius: 5px;
  padding: 0.4rem;
  border:  1px solid var(--newgrey);
  font-weight: 500;
  color: var(--darkgrey);
}
.form .form-ele:nth-child(4) select{
  width: 100%;
  border-radius: 5px;
  padding: 0.4rem;
  border:  1px solid var(--newgrey);
  font-weight: 500;
  color: var(--darkgrey);
}
.form .form-ele:nth-child(5) textarea{
  width: 100%;
  border-radius: 5px;
  padding: 0.4rem;
  border:  1px solid var(--newgrey);
  resize: vertical;
  font-weight: 500;
  color: var(--darkgrey);
}
.form select:hover{
  cursor: pointer;
}
form button{
  width: 100%;
  padding: 0.4rem;
  background-color: var(--teal);
  border: 3px solid var(--teal);
  border-radius: 5px;
  color: white;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s ease;
  letter-spacing: 1.5px;
  font-size: 1rem;
}
form button:hover{
  background-color: var(--newgrey);
  border-color: var(--newgrey);
}
.contact-info{
  color: #3E505B;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 20px;
}
address{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: var(--maxwidth);
  margin-left: auto;
  margin-right: auto;
  color: var(--yellow);
  font-style: normal;
}
address ul{
  list-style: none;
}
.follow-us{
  width: 100%;
  border-radius: 0.6rem;
  color: white;
  padding: 0px; 
  display: flex;
  flex-direction: column;
  margin-top: 0px;
  margin-bottom: 0px;
  font-style: normal;
  position: relative;
}
.follow-us img{
  width: 30%; 
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 1;
}
.get-in-touch{
  color:white;
  border-radius: 0.6rem;
  padding: 40px; 
  border: 3px solid var(--teal);
  margin-top: 0px;
  margin-bottom: 0px;
  width: 100%;
  font-style: normal;
  background-color: white;
}
.dets{
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 500;
  color: white;
  font-size: 1.2rem;
}
#emailad{
  word-break: break-all;
}
.dets svg{
  fill: white;
  width: 45px;
  height: 45px;
}
.dets li:not(:last-child){
  margin-bottom: 50px;
}
.dets div{
  display: inline-block;
  vertical-align: middle;
}
address li{
  margin-bottom: 0px;
}
address svg{
  display: inline-block;
  vertical-align: middle;
}
.contact-pic-holder{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.contact-pictures{
  width: 100px;
  margin-left: 20px;
  margin-right: 20px;
  height: 100px;
  border-radius: 50%;
  outline: 4px solid var(--newgrey);
  position: relative;
}
.contact-pictures img{
  object-fit: cover;
  object-position: 50% 30%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#disc{
  color: var(--teal);
  font-size: 0.8rem;
  margin-top: 5px;
}
.contact-pic-holder .contact-pictures:nth-child(2) img{
  object-position: 50% 10%;
}
@media screen and (max-width: 500px) {
  .section-three p{
    font-size: 1rem;
  }
  .get-in-touch{
    padding: 10px;
  }
  .form .form-ele:nth-child(1){
    grid-template-columns: 1fr;
  }
  .contact-pictures{
    width: 60px;
    height: 60px;
    margin: 5px;
  }
  .dets svg{
    width: 25px;
    height: 25px;
  }
  #disc{
    font-size: 0.8rem;
  }
}
@media screen and (max-width: 1150px) {
  .section-three h2{
    font-size: max(calc( 3.2rem + calc(3.687vw + -44.40px)), 1.8rem);
  }
}
@media screen and (max-width: 850px) {
  address{
    grid-template-columns: auto;
  }
} 
@media screen and (max-width: 920px) {
  .section-three{
    min-height: 0;
  }
} 
@media screen and (max-width: 1340px) {
  .section-three p{
    width: 100%;
  }
  .contact-pictures{
    margin-left: 5px;
    margin-right: 5px;
  }
} 
@media screen and (max-width: 400px) {
  .c-grid{
    flex-direction: column;
  }
} 
@media screen and (max-width: 1000px) {
  .contact-pictures{
    width: 60px;
    height: 60px;
    margin: 5px;
  }
}