/* Common style */
h1{
  font-size: 5em;
 font-family: "Montserrat", sans-serif;
  margin:0;
}
.section{
  text-align:center;
}
.controlArrow.prev {
  left: 50px;
}
.controlArrow.next{
  right: 50px;
}

#infoMenu li a {
  color: #fff;
}

/* Fullpage configuration */
.section, .slide {
  top: 0;
  left: 0;
  visibility: visible;
  overflow: hidden;
  width: 100%;
  height: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Parallax container configuration */
.intro {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  position: relative;
}
 

.intro .logo{width: 100%; padding:  200px 0 0 0;}


.intro .intro-1 {width: 50%; float: left; }
.intro .intro-1 h1{     font-family: 'Times New Roman';
    font-size: 65px;
    width: 50%;
    float: right;
    margin: 50px 30px 0 0px;
    border-right: 1px solid #000;
    text-align: right;
    padding: 0 30px 0 0;
    font-weight: normal;}
.intro .intro-2 {width: 50%;  float: left;}
 .intro .intro-2 p{     font-family: "Montserrat", sans-serif;margin: 60px 0 0 0;    font-size: 20px;    text-align: left;    width: 58%;    line-height: 33px;}
 
.intro .introducing{    width: 40%;    float: right;    margin: 9% 10% 0 4%; }
.intro .introducing h2{ font-family: "Montserrat", sans-serif; font-size: 20px; text-align: left;     font-weight: 400;}
.intro .introducing p{ font-family: "Montserrat", sans-serif; font-size: 20px;  text-align: left; float: left; width: 80%; line-height: 33px;}
.intro .introducing img{width: 50%; float: left;}


.intro .the-new-era{    width: 40%;    float: left;    margin: 15% 0% 0 25%; }
.intro .the-new-era h2{   font-size: 65px; text-align: left; margin: 0; font-family: 'Times New Roman';    font-weight: 400;}
  .intro .the-new-era p{ font-family: "Montserrat", sans-serif; font-size: 20px;  text-align: left; float: left; width: 80%; line-height: 33px;}


     .intro .the-advantage{    width: 40%;    float: right;    margin: 9% 9% 0 4%; }
     .intro .the-advantage h2{ font-family: "Montserrat", sans-serif; font-size: 20px; text-align: left;     font-weight: 400;}
  .intro .the-advantage p{ font-family: "Montserrat", sans-serif; font-size: 20px;  text-align: right; float: left; width: 51%; line-height: 33px;}
    .intro .the-advantage img{width: 50%; float: left;}


    .intro .minds-behind{    width: 40%;    float: right;    margin: 15% 7% 0 4%; }
     .intro .minds-behind h2{ font-family: "Montserrat", sans-serif; font-size: 20px; text-align: left;     font-weight: 400;}
  .intro .minds-behind p{ font-family: "Montserrat", sans-serif; font-size: 20px;  text-align: right; float: left;     width: 52%; line-height: 33px;}
    .intro .minds-behind img{width: 50%; float: left;}

.intro .the-network{    width: 40%; float: left;    margin: 9% 0% 0 20%; }
     .intro .the-network h2{ font-family: "Montserrat", sans-serif; font-size: 20px; text-align: left;     font-weight: 400;}
     .intro .the-network h3{     font-family: "Montserrat", sans-serif;font-size: 20px;    text-align: right;    width: 50%;   font-weight: 400;}
  .intro .the-network p{ font-family: "Montserrat", sans-serif; font-size: 20px;  text-align: left; float: left;    width: 56%; line-height: 33px;}
    .intro .the-network img{width: 50%; float: left;margin: 0px 0 15px;}

  

/* Parallax container background */
#section0 .intro {
  background-image: url('../images/1.jpg');
}
#section1 .intro {
  background-image: url('../images/2.jpg');
}
#section2 .intro {
  background-image: url('../images/3.jpg');
}

#section3 .intro {
  background-image: url('../images/4.jpg');
}

#section4 .intro {
  background-image: url('../images/5.jpg');
}

#section5 .intro {
  background-image: url('../images/6-6.jpg');
}

#section6 .intro {
  background-image: url('../images/7.jpg');
}


#section7 .intro {
  background-image: url('../images/8.jpg');
}


.s-row {
    display: grid;
    gap: 0px;
    align-items: center;
}

  .s-row h5 { font-size: 20px; font-family: "Montserrat", sans-serif; }
  .s-row h4 { font-size: 40px; font-family: "Montserrat", sans-serif; color: #9e6a28;margin: 0;}
  .s-row h4 span { font-size: 20px; font-family: "Montserrat", sans-serif;color: #9e6a28; }

.grid-1 {
    grid-template-columns: repeat(1, 1fr);padding: 60px 0 30px 0;
}

.grid-3 {
    grid-template-columns: repeat(6, 1fr);
}
.s-col {
    text-align: center;
    position: relative;
}

.grid-3 .s-col:not(:last-child)::after, .grid-3 .s-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 0;
    height: 100%;
    width: 1px;
    background: #d6d6d6;
}

.grid-5 .s-col:not(:last-child)::after, .grid-5 .s-col:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 0;
    height: 100%;
    width: 1px;
    background: #9e6a28;
}



.grid-5 {
    grid-template-columns: repeat(5, 1fr);padding: 60px 0 30px 0;
}

.s-coll {
    text-align: center;
    position: relative; font-family: "Montserrat", sans-serif;    font-weight: bold;
}

.s-coll a{font-family: "Montserrat", sans-serif; color: #000;}

.s-collr {
    text-align: right;
    position: relative; font-family: "Montserrat", sans-serif; font-size: 12px; 
}
.grid-2 {
    grid-template-columns: repeat(1, 1fr);padding: 5% 20px 30px 20px;
}

@media only screen and (min-width: 1801px) and (max-width: 1700px) {
  .intro .the-advantage p {  font-size: 17px;  line-height: 28px;}
  .intro .the-new-era p{   font-size: 17px;  line-height: 28px;}
  .intro .introducing p{   font-size: 17px;  line-height: 28px;}
  .intro .intro-2 p{  font-size: 17px;  line-height: 28px;}
  .intro .logo {   padding: 170px 0 0 0;}

}

@media only screen and (min-width: 1501px) and (max-width: 1600px) {
   .intro .the-advantage p {  font-size: 17px;  line-height: 28px;}
  .intro .the-new-era p{   font-size: 17px;  line-height: 28px;}
  .intro .introducing p{   font-size: 17px;  line-height: 28px;}
  .intro .intro-2 p{  font-size: 17px;  line-height: 28px;}
  .intro .logo {   padding: 150px 0 0 0;}
}
@media only screen and (min-width: 1401px) and (max-width: 1500px) {
   .intro .the-advantage p {  font-size: 17px;  line-height: 28px;}
  .intro .the-new-era p{   font-size: 17px;  line-height: 28px;}
  .intro .introducing p{   font-size: 17px;  line-height: 28px;}
  .intro .intro-2 p{  font-size: 17px;  line-height: 28px;}
  .intro .logo {   padding: 140px 0 0 0;}
}
@media only screen and (min-width: 1301px) and (max-width: 1400px) {
   .intro .the-advantage p {  font-size: 15px;  line-height: 28px;}
  .intro .the-new-era p{   font-size: 15px;  line-height: 28px;}
  .intro .introducing p{   font-size: 15px;  line-height: 28px;}
  .intro .intro-2 p{  font-size: 15px;  line-height: 28px;}
  .intro .logo {   padding: 130px 0 0 0;}
}
@media only screen and (min-width: 1201px) and (max-width: 1300px) {
     .intro .the-advantage p {  font-size: 15px;  line-height: 28px;}
  .intro .the-new-era p{   font-size: 15px;  line-height: 28px;}
  .intro .introducing p{   font-size: 15px;  line-height: 28px;}
  .intro .intro-2 p{  font-size: 15px;  line-height: 28px;}
  .intro .logo {   padding: 130px 0 0 0;}
}
@media only screen and (min-width: 1101px) and (max-width: 1200px) {
     .intro .the-advantage p {  font-size: 14px;  line-height: 25px;}
  .intro .the-new-era p{   font-size: 14px;  line-height: 25px;}
  .intro .introducing p{   font-size: 14px;  line-height: 25px;}
  .intro .intro-2 p{  font-size: 14px;  line-height: 25px;}
  .intro .logo {   padding: 130px 0 0 0;}
}
@media only screen and (min-width: 1001px) and (max-width: 1100px) {
     .intro .the-advantage p {  font-size: 13px;  line-height: 24px;}
  .intro .the-new-era p{   font-size: 13px;  line-height: 24px;}
  .intro .introducing p{   font-size: 13px;  line-height: 24px;}
  .intro .intro-2 p{  font-size: 13px;  line-height: 24px;}
  .intro .logo {   padding: 100px 0 0 0;}
}


@media only screen and (min-width: 0px) and (max-width: 1000px) {
    .grid-2 {
        grid-template-columns: repeat(1, 1fr);
    }
.grid-5 {
        grid-template-columns: repeat(3, 1fr); padding: 20px 0 10px 0;
    }
.s-collr {
  text-align: center;}
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
.s-col{ margin: 0 0 10px 0;}
    #section0 .intro {
  background-image: url('../images/1-mob.jpg');
}
.s-row h4 {
  font-size: 18px;}
.intro .logo {
  width: 100%;}
.s-row h4 span {
  font-size: 12px;}
  .intro .logo img {
  width: 75%;}

    #section1 .intro {
  background-image: url('../images/2-mob.jpg');
}

   #section2 .intro {
  background-image: url('../images/3-mob.jpg');
}

   #section3 .intro {
  background-image: url('../images/4-mob.jpg');
}
   #section4 .intro {
  background-image: url('../images/5-mob.jpg');
}

   #section5 .intro {
  background-image: url('../images/6-6-mob.jpg');
}

  #section6 .intro {
  background-image: url('../images/7-mob.jpg');
}


.intro .intro-1 h1 {
  font-family: 'Times New Roman';
  font-size: 35px;
  width: 100%;
  float: right;
  margin: 50px 0px 0 0px;
  border-right: 0px solid #000;
  text-align: center;
  padding: 0 0 0 0;
  font-weight: normal;
}.intro .intro-1 {
  width: 100%;
  float: left;
}.intro .intro-2 {
  width: 100%;
  float: left;
}
.intro .intro-2 p { 
  margin: 0px 0 0 0;
  font-size: 16px;
  text-align: center;
  width: 96%;
  line-height: 33px;
  padding: 2%;
}

.intro .introducing {
  width: 100%; margin: 0;
  float: left;}

  .intro .introducing h2{ text-align: center;
font-size: 20px;}

.intro .introducing img{width: 75%;
    margin: 0 auto;
    float: none;}

  .intro .introducing p { 
  margin: 0px 0 0 0;
  font-size: 14px;
  text-align: center;
  width: 96%;
  line-height: 25px;
  padding: 2%;
}
.intro .the-new-era{
  width: 100%;margin: 0;
  float: left;}

  .intro .the-new-era h2{  text-align: center;font-size: 35px; padding: 20px 0 0;
  width: 100%;
  float: right;}

  .intro .the-new-era p{  margin: 0px 0 0 0;
  font-size: 14px;
  text-align: center;
  width: 96%;
  line-height:25px;
  padding: 2%;}

  .intro .the-advantage{
  width: 100%; margin: 0px 0 0 0;
  float: left;}

  .intro .the-advantage h2{   text-align: center;
  width: 100%;
  float: right;}

   .intro .the-advantage p{  margin: 0px 0 0 0;
  font-size: 14px;
  text-align: center;
  width: 96%;
  line-height: 25px;
  padding: 2%;}

  .intro .the-advantage img{
width: 75%;
    margin: 0 auto;
    float: none;}


    .intro .minds-behind p {  margin: 0px 0 0 0;
  font-size: 14px;
  text-align: center;
  width: 96%;
  line-height: 25px;
  padding: 2%;}

     .intro .minds-behind {
  width: 100%; margin: 0;}

  .intro .the-network {
  width: 100%; margin: 0;}

  .intro .the-network p {  margin: 0px 0 0 0;
  font-size: 14px;
  text-align: center;
  width: 96%;
  line-height: 25px;
  padding: 2%;}

  .intro .minds-behind h2{text-align: center;}

  .intro .minds-behind img{
width: 75%;
    margin: 0 auto;
    float: none;}

    .intro .the-network img{
width: 75%;
    margin: 0 auto;
    float: none;}

    .intro .the-network h2{text-align: center;}

    .intro .the-network h3{text-align: center; width: 100%;}
.grid-1 { 
  padding: 40px 0 0px 0;
}.s-row h5 {
  font-size: 12px;}

  .logo-box{width: 100%;}
  .logo-box img{width: 40%;}

  .logo-box1{width: 100%;}
  .logo-box1 img{width: 50%;}

}