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

html{
    background-color: #F4F2F2;
    overflow-x: hidden;
}

.important{
    color: yellow;
}

.container{
    width: 80%;
    margin: auto;
}

.container1{
    width: 50%;
    margin: auto;
}

.container2{
    width: 40%;
    margin: auto;
}

/*BUTTON*/
.buttonRegular{
    background: #4A5FD2;
    color:#fff;
    border: 0;
    padding: 15px;
    margin: 15px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.buttonRegular:hover {
    background: #fff;
    color: #4A5FD2;
    transition: color 300ms;
}

.buttonRegular:after {
    background: #fff;
    color: #4A5FD2;
    transition: 300ms;
}

.buttonIrregular{
    background:#fff;
    color:#4A5FD2;
    border: 0;
    padding: 15px;
    margin: 15px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.buttonIrregular:hover {
    background: rgb(235, 235, 235);
    color: #4A5FD2;
    transition: color 300ms;
}

.buttonIrregular:after {
    background: rgb(235, 235, 235);
    color: #4A5FD2;
    transition: 300ms;
}

/*NAVBAR*/
.space{
    height:80px;
}

.space2{
    height:57.5px;
}

.navTrigger{
    display: none;
    float: left;
    padding-right: 15px;
    padding-top: -100px;
    font-size: 25px;
    cursor: pointer;
}

.killBootstrap{
    box-sizing: content-box !important;
}

header{
    position: fixed !important;
    width: 98%;
    z-index: 1;
}

header li{
    list-style: none !important;
    display: inline-block !important;
    padding-right:10px !important;
    padding-top: 5px !important;
    transition: color 300ms;
}

header li:hover {
    color:#3E53D9;
}

header li:after {
    content: '';
    width: 0px;
    height: 2px;
    display: block;
    background: #3E53D9;
    transition: 300ms;
}

.current li {
    text-transform: uppercase;
    font-weight: bold;
    color: #3E53D9;
}

u {
text-decoration: none;
}

header li:hover:after {
width: 100%;
}

header a{
    text-decoration: none !important;
    color: #000 !important;
}



header ul{
    float: right;
}

.branding{
    margin: 0;
    padding: 0;
    display: inline-block !important;

}

.branding h4{
    font-weight: bold;
    font-size: 1.33em;
}

.message {
    margin-right: 11.8rem;
    font-size: 1.25rem;
}

.messageClients {
    margin-right: 11rem;
    font-size: 1.25rem;
}

.methodologyMessage {
    margin-right: 10.5rem;
    font-size: 1.25rem;
}

.message:hover{
    text-decoration: none;
}

.message:after{
    text-decoration: none;
}

.logo {
    height: 6rem;
    width: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

header{
     padding: 16px;
     background-color: #fff;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.killBootstrap{
    padding-bottom: 0 !important;
    height: 50px;
}

/*SIDENAV*/
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none !important;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/*PEOPLECARD INDEX.HTML*/
.people{
    background: rgb(228, 228, 228);
    padding:2rem;
}

.peopleCard{
    padding: 1rem;
    transition: box-shadow 1s;
    transition: background 1s;
    height: 27rem;
    background: rgb(247, 247, 247);
    color:#000;
}

.peopleCard a{
    text-decoration: #000;
}

.peopleCard:hover{
    box-shadow: 0 18px 24px 0 rgba(0, 0, 0, 0.2), 0 30px 49px 0 rgba(0, 0, 0, 0.19);
    background-color:#fff;
    cursor: pointer;
}

/*SHOWCASE INDEX.HTML*/
.showcase h1{
    font-size: 65px;
    font-weight: 400;
    line-height: 1.3;
}

.showcase h2{
    font-size: 20px;
    display: inline;
    width: 100%;
}


.blue{
    color: #4A5FD2;
    font-weight: 600;
}

#rowOne{
    -vendor-animation-duration: 3s;
    animation-delay: 1s;
    -vendor-animation-iteration-count: infinite;
}

#rowTwo{
    -vendor-animation-duration: 3s;
    animation-delay: 3s;
    -vendor-animation-iteration-count: infinite;
}

#rowThree{
    -vendor-animation-duration: 3s;
    animation-delay: 2s;
    -vendor-animation-iteration-count: infinite;
}

#rowFour{
    -vendor-animation-duration: 3s;
    animation-delay: 4s;
    -vendor-animation-iteration-count: infinite;
}

#rowFive{
    -vendor-animation-duration: 3s;
    animation-delay: 5s;
    -vendor-animation-iteration-count: infinite;
}

#cardShowcase{
    -vendor-animation-duration: 3s;
    animation-delay: 6s;
    -vendor-animation-iteration-count: infinite;
}

.showcaseCard{
    color: #A9A9A9;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.showcaseCard .buttonRegular{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.showcaseCard a{
    color: #A9A9A9;
    text-decoration:none;
}

.missionIntro1{
    margin-top: -3rem;
    background-image: url("../img/Paris.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 90vh;
    z-index: 3;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro2{
    margin-top: -3rem;
    background-image: url("../img/Bangkok.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 90vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro3{
    margin-top: -3rem;
    background-image: url("../img/MBS.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 90vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro4{
    margin-top: -3rem;
    background-image: url("../img/Firework.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 90vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro5{
    margin-top: -3rem;
    background-image: url("../img/whiteStickman.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 90vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro6{
    margin-top: -3rem;
    background-image: url("../img/Sustainability.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 90vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro1 .text{
    padding-top: 7rem;
}

.missionIntro1 h1{
    font-size: 4rem;
    color: #fff;
    padding: 10px;
    font-weight: bold;
    margin-left: 35rem;
    margin-right: 5rem;
    background-color: rgba(104, 104, 104, 0.5);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro1 p{
    font-size: 1.25rem;
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px;
    background-color: rgba(104, 104, 104, 0.5);
    text-align: right;
    margin-right: 5rem;
    margin-top: 2rem;
    margin-bottom: 0;
    margin-left: 60rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro2 .text{
    padding-top: 7rem;
}

.missionIntro2 h1{
    font-size: 4rem;
    margin-right: 40rem;
    padding: 10px;
    margin-left: 5rem;
    color: rgb(255, 255, 255);
    font-weight: bold;
    background-color: rgba(104, 104, 104, 0.5);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro2 p{
    font-size: 1.25rem;
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px;
    background-color: rgba(104, 104, 104, 0.5);
    text-align: left;
    margin: 5rem;
    margin-bottom: 0;
    margin-right: 60rem;
    margin-top: 2rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro3 .text{
    padding-top: 7rem;
}

.missionIntro3 h1{
    font-size: 4rem;
    color: #fff;
    font-weight: bold;
    margin-left: 40rem;
    margin-right: 5rem;
    padding: 10px;
    background-color: rgba(104, 104, 104, 0.5);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro3 p{
    font-size: 1.25rem;
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px;
    background-color: rgba(104, 104, 104, 0.5);
    text-align: right;
    margin: 5rem;
    margin-bottom: 0;
    margin-top: 2rem;
    margin-left: 60rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro4 .text{
    padding-top: 7rem;
}

.missionIntro4 h1{
    font-size: 4rem;
    color: #fff;
    font-weight: bold;
    background-color: rgba(104, 104, 104, 0.5);
    margin-right: 50rem;
    margin-left: 5rem;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro4 p{
    font-size: 1.1rem;
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px;
    background-color: rgba(104, 104, 104, 0.5);
    text-align: left;
    margin: 5rem;
    margin-top: 2rem;
    margin-bottom: 0;
    margin-right: 60rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro5 .text{
    padding-top: 7rem;
}

.missionIntro5 h1{
    font-size: 4rem;
    color: rgb(255, 255, 255);
    font-weight: bold;
    margin-left: 60rem;
    background-color: rgba(104, 104, 104, 0.5);
    margin-right: 5rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding-bottom: 10px;
}

.missionIntro5 p{
    font-size: 1.25rem;
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px;
    text-align: right;
    background-color: rgba(104, 104, 104, 0.5);
    margin: 5rem;
    margin-bottom: 0;
    margin-top: 2rem;
    margin-left: 60rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.missionIntro6 .text{
    padding-top: 7rem;
}

.missionIntro6 h1{
    font-size: 4rem;
    color: rgb(255, 255, 255);
    font-weight: bold;
    margin-left: 60rem;
    background-color: rgba(104, 104, 104, 0.5);
    margin-right: 5rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding-bottom: 10px;
}

.missionIntro6 p{
    font-size: 1.25rem;
    color: rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    padding: 25px;
    text-align: right;
    background-color: rgba(104, 104, 104, 0.5);
    margin: 5rem;
    margin-bottom: 0;
    margin-top: 2rem;
    margin-left: 60rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*WORK EXPERIENCE*/
.ourPeople{
    margin-top: 4rem;
    font-size: 1.5rem;
    font-weight: bold;
}

.ourPeoplePic {
    border-radius: 100%;
    height: 15rem;
    width: auto;
}

.card-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
.card-carousel .my-card {
    height: 20rem;
    width: 100rem;
    position: relative;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-transform: scale(0.6) translateY(-2rem);
    transform: scale(0.6) translateY(-2rem);
    opacity: 0;
    cursor: pointer;
    pointer-events: none;
    background: #fff;
    transition: 1s;
}

  .card-carousel .my-card:after {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 100%;
    background-color: rgba(0,0,0,0.3);
    bottom: -5rem;
    -webkit-filter: blur(4px);
    filter: blur(4px);
  }
  
  .card-carousel .my-card:nth-child(0):before {
    content: '0';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
  }
  
  .card-carousel .my-card:nth-child(1):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
  }
  
  .card-carousel .my-card:nth-child(2):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
  }
  
  .card-carousel .my-card:nth-child(3):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
  }

 .card-carousel .my-card:nth-child(4):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
  } 

  .card-carousel .my-card:nth-child(5):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
  } 
  
  .card-carousel .my-card:nth-child(6):before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    font-size: 3rem;
    font-weight: 300;
    color: #fff;
  } 

  .card-carousel .my-card.active {
    z-index: 0;
    -webkit-transform: scale(1) translateY(0) translateX(0);
    transform: scale(1) translateY(0) translateX(0);
    opacity: 1;
    pointer-events: auto;
    transition: 1s;
  }
  
  .card-carousel .my-card.prev, .card-carousel .my-card.next {
    z-index: 0;
    -webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
    transform: scale(0.8) translateY(-1rem) translateX(0);
    opacity: 0.6;
    pointer-events: auto;
    transition: 1s;
  }
    
/*INTRODUCE SERVICES.HTML*/
.servicesIntro .text::before{
    background-image: url("../img/servicesImg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 70vh;
    -webkit-filter: blur(0.7px);
    -moz-filter: blur(0.7px);
    -o-filter: blur(0.7px);
    -ms-filter: blur(0.7px);
    filter: blur(0.7px);
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

.servicesIntro .content{
    padding-top: 180px;
    margin-bottom: 10rem;
}

.servicesIntro h1{
    font-size: 5.5rem;
    margin-bottom: 1rem;
    margin-top: 3.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}
/*SERVICE IMG*/
.mainService {
    margin-top: 5rem;
}

.mainServiceImg{
    height: auto;
    width: 85%;
}
/*SEVICESCARD SERVICES.HTML*/
.servicesCard {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.serviceActualCard1{
    margin: 1rem;
    color: #fff;
    background: #7FCFE8;
    border-radius: 10px;
    height: 330px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.serviceActualCard1 .body{
    padding: 1rem;
}

.serviceActualCard1 .top{
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.serviceActualCard1 h1{
    font-size: 30px;
    color: #7FCFE8;
    padding: 1rem;
}

.serviceActualCard1 li{
    font-size: 15px;
    color: #fff;
}

/**/
.serviceActualCard2{
    margin: 1rem;
    color: #fff;
    background: #508CFF;
    border-radius: 10px;
    height: 330px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.serviceActualCard2 .body{
    padding: 1rem;
}

.serviceActualCard2 .top{
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.serviceActualCard2 h1{
    font-size: 30px;
    color: #508CFF;
    padding: 1rem;
}

.serviceActualCard2 li{
    font-size: 15px;
    color: #fff;
}

/**/
.serviceActualCard3{
    margin: 1rem;
    color: #fff;
    background: #4A5FD2;
    border-radius: 10px;
    height: 330px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.serviceActualCard3 .body{
    padding: 1rem;
}

.serviceActualCard3 .top{
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.serviceActualCard3 h1{
    font-size: 30px;
    color: #4A5FD2;
    padding: 1rem;
}

.serviceActualCard3 li{
    font-size: 15px;
    color: #fff;
}

/*SERVICESBRING SERVICES.HTML*/
.serviceBring{
    margin-top: 5rem;
    margin-bottom: 5rem;
    margin-left: auto;
    margin-right: auto;
    background:#4A5FD2;
    border-radius: 1px;
    height: 280px;
    width: 58rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.serviceBring h1{
    color: #fff;
    font-size: 50px;
    text-align: center;
    padding: 20px;
}

.serviceLinks a{
    text-decoration: none;
    font-weight: 1000;
    transition: color 300ms;
    color: #000;
    line-height: 40px;
    font-size: 1rem;
}

.serviceLinks a:hover{
    color:#3E53D9;
}

.serviceLinks a:after {
    background: #3E53D9;
    transition: 300ms;
}
/*ABOUTINTRO ABOUT.HTML*/
.aboutIntro .text::before{
    background-image: url("../img/Bangkok.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    -webkit-filter: blur(0.7px);
    -moz-filter: blur(0.7px);
    -o-filter: blur(0.7px);
    -ms-filter: blur(0.7px);
    filter: blur(0.7px);
    z-index: -1;
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
}

.aboutIntro .content{
    padding-top: 180px;
}

.aboutIntro h1{
    font-size: 5.5rem;
    margin-bottom: 1rem;
    margin-top: 3.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}


/*ABOUTSTORY ABOUT.HTML*/
.aboutStory{
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.aboutStory .body p{
    display: inline-block;
    overflow-wrap: break-word !important;
    opacity: 1;
    line-height: 30px;
}

.aboutStory .body{
    margin-top: 10rem;
    margin-left: auto;
    margin-right: auto;
    padding: 3rem;
}

.aboutStory h4{
    color: #000;
    font-size: 3.5rem;
    font-family: 'Open Sans', sans-serif;
}

.aboutStory p{
    color: rgb(0, 0, 0);
    font-size: 1.25rem;
    font-family: 'Times New Roman', Times, serif;
    /*font-family: 'Poppins', sans-serif;*/
}

.aboutStory i{
    font-family: 'Times New Roman', Times, serif;
}
/*ABOUTEX ABOUT.HTML*/
.aboutEx{
    background-color: #C4C4C4;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.aboutEx .body{
    width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

.aboutEx h1{
    font-size: 4rem;
    color: #fff;
}

.aboutEx p{
    font-size: 2rem;
    color: #fff;
}
/*EXPERIENCEINTRO victorTay.HTML*/
.experienceIntro .text::before{
    background-image: url("../img/eiffel.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100%;
    z-index: -1;
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
}

.experienceIntro .content{
    padding-top: 180px;
}

.experienceIntro .shape{
    font-size: 3rem;
    font-family: 'Poppins', sans-serif;
    color: #3E53D9;
}

/*EXPERIENCECREDENTIAL victorTay.HTML*/
.experienceCredential {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: #4A5FD2;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.experienceProfile{
    padding-top: 40px;
}

.experienceProfile h2{
    font-size: 1.5rem;
    margin-right: none;
}

.victorPosition {
    margin-right: -1rem;
}

.victorPosition h2{
    color: #fff;
    font-size: 1.75rem;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.victorPosition h3{
    color: #fff;
    font-size: 1rem;
    font-weight: 300;
    font-family: 'Open Sans', sans-serif;
}

.victorExperience {
    background: #fff;
    padding: 1rem;
    margin-bottom: 3rem;
    color: #4A5FD2
}

.profilePic {
    height: 15rem; 
    width: 15rem; 
    margin-bottom: 1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 100%;
    margin-left: -1rem;
}

.experienceDegrees{
    padding-left: 0.75rem;
    padding-right: 2rem;
    padding-bottom: 1rem;
    padding-top: 16px;
    background-color: #fff;
}

.experienceDegrees hr{
    border-top: 1.5px solid #4A5FD2;
    
}

.experienceDegrees h1{
    color: #4A5FD2;
    font-size: 2.5rem;
}

.experienceDegrees {
    color: #4A5FD2;
}
/*EXPERIENCECARDS victorTay.HTML*/
.experienceCards{
    width: 100vw;
    padding-top: 3rem;
    background: rgba(204, 204, 204, 0.5);
}

.experienceCards1{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards1 .body{
    padding: 1rem;
}

.experienceCards1 .top{
    background-color: #67C4C4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.experienceCards1 h1{
    font-size: 30px;
    color: #fff;
    padding: 1rem;
}

.experienceCards1 {
    font-size: 17px;
    color: #67C4C4;
}

/*MODAL 1*/
.modalOpen1{
    background: #67C4C4;
    color: #fff;
}

/**/

.experienceCards2{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards2 .body{
    padding: 1rem;
}

.experienceCards2 .top{
    background-color: #7FCFE8;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.experienceCards2 h1{
    font-size: 30px;
    color: #fff;
    padding: 1rem;
}

.experienceCards2{
    font-size: 17px;
    color: #7FCFE8;
}

/**/

.experienceCards3{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards3 .body{
    padding: 1rem;
}

.experienceCards3 .top{
    background-color: #508CFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.experienceCards3 h1{
    font-size: 30px;
    color: #fff;
    padding: 1rem;
}

.experienceCards3{
    font-size: 17px;
    color: #508CFF;
}

/**/

.experienceCards4{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards4 .body{
    padding: 1rem;
}

.experienceCards4 .top{
    background-color: #877ADB;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}

.experienceCards4 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.experienceCards4{
    font-size: 17px;
    color: #877ADB;
}

/**/

.experienceCards5{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards5 .body{
    padding: 1rem;
}

.experienceCards5 .top{
    background-color: #421BDC;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}

.experienceCards5 h1{
    font-size: 30px;
    color: #fff;
    padding: 1rem;
}

.experienceCards5{
    font-size: 17px;
    color: #421BDC;
}

/**/

.experienceCards6{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards6 .body{
    padding: 1rem;
}

.experienceCards6 .top{
    background-color: #8102FF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}

.experienceCards6 h1{
    font-size: 25px;
    color: #fff;
    padding: 1rem;
}

.experienceCards6{
    font-size: 17px;
    color: #8102FF;
}

/**/

.experienceCards7{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards7 .body{
    padding: 1rem;
}

.experienceCards7 .top{
    background-color: #BD50FF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}

.experienceCards7 h1{
    font-size: 23px;
    color: #fff;
    padding: 1rem;
}

.experienceCards7{
    font-size: 17px;
    color: #BD50FF;
}

/**/

.experienceCards8{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards8 .body{
    padding: 1rem;
}

.experienceCards8 .top{
    background-color: #E22295;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}

.experienceCards8 h1{
    font-size: 30px;
    color: #fff;
    padding: 1rem;
}

.experienceCards8{
    font-size: 17px;
    color: #E22295;
}

/**/

.experienceCards9{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards9 .body{
    padding: 1rem;
}

.experienceCards9 .top{
    background-color: #F74F77;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}

.experienceCards9 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.experienceCards9{
    font-size: 17px;
    color: #F74F77;
}

/**/

.experienceCards10{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: 350px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.experienceCards10 .body{
    padding: 1rem;
}

.experienceCards10 .top{
    background-color: #67C4C4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 75px;
}

.experienceCards10 h1{
    font-size: 30px;
    color: #fff;
    padding: 1rem;
}

.experienceCards10{
    font-size: 17px;
    color: #67C4C4;
}

.xpTitle{
    color: #4A5FD2;
    background: #fff;
    padding: 1rem; 
    margin-bottom: 1rem;
    text-align: center;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*Awards*/
.awardsIntro .text::before{
    background-image: url("../img/awards.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 45vh;
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

.awardsIntro .content{
    padding-top: 180px;
    margin-bottom: 10rem;
}

.awardsIntro h1{
    font-size: 5.5rem;
    margin-bottom: 1rem;
    margin-top: 3.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}

/*.award1Img{
    height: auto;
    width: 20rem;
}

.awards .award1{
    background-color:white;
    padding:1rem;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}*/
/*INTROCONTACT CONTACT.HTML*/
.contactIntro{
    background-image: url("../img/contactImg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 70vh;
    margin-bottom: 2rem;
}

.contactIntro h1{
    text-align: center;
    padding-top: 200px;
    color: #fff;
    font-weight: bold;
    font-size: 80px;
}

.contactIntro h2{
    text-align: center;
    padding-top: 3px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
}

/*CONTACTCARD CONTACT.HTML*/
.contactCard {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: #4A5FD2;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height: 450px;
}

.contactCard1 {
    margin-top: 2rem;
    margin-bottom: 2rem;
    background-color: #4A5FD2;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.contactCard1 .buttonRegular{
    margin: 1rem 0 0 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.contactCard1 p{
    color: #fff;
}

.contactCard1 h2{
    color: #fff;
}

.contactCard .buttonRegular{
    margin: 1rem 0 0 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.contactCard p{
    color: #fff;
}

.contactCard h2{
    color: #fff;
}

.contactProfile{
    padding-top: 40px;
}

.contactProfile h2{
    font-size: 1.7rem;
    color: #fff;
}

.contactProfile p{
    font-size: 1.1rem;
    margin-bottom: -1rem;
}

.cardDetails{
    padding-left: 0.75rem;
    padding-right: 2rem;
    padding-bottom: 15rem;
    padding-top: 16px;
    background-color: #fff;
}

.cardDetails hr{
    border-top: 1.5px solid #4A5FD2;
    
}

.cardDetails h2{
    color: #4A5FD2;
    font-size: 30px;
}

.cardDetails p{
    color: #4A5FD2;
    font-size: 0.9rem;
    margin-bottom: 5rem;
}

.contactAddress{
    margin-left: 5rem;
}

.HKDetails{
    padding-left: 0.75rem;
    padding-right: 2rem;
    padding-bottom: 17rem;
    padding-top: 16px;
}

.HKDetails hr{
    border-top: 1.5px solid #fff;
    
}

.HKDetails h2{
    color: #fff;
    font-size: 30px;
}

.HKDetails p{
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5rem;
}

.HKProfile iframe{
    width: 100%;
    height: 450px;
    margin:0;
    padding:0;
}

.TJDetails{
    padding-left: 0.75rem;
    padding-right: 2rem;
    padding-bottom: 17rem;
    padding-top: 16px;
}

.TJDetails hr{
    border-top: 1.5px solid #fff;
    
}

.TJDetails h2{
    color: #fff;
    font-size: 30px;
}

.TJDetails p{
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5rem;
}

.TJProfile iframe{
    width: 100%;
    margin:0;
    padding:0;
}

.SHDetails{
    padding-left: 0.75rem;
    padding-right: 2rem;
    padding-bottom: 19rem;
    padding-top: 1.7rem;
}

.SHDetails hr{
    border-top: 1.5px solid #4A5FD2;
    
}

.SHDetails h2{
    color: #fff;
    font-size: 30px;
}

.SHDetails p{
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 5rem;
}



.mapSH iframe{
    width: 100%;
    margin:0;
    padding:0;
}

/* Thought Leadership*/
.thoughtIntro .text::before{
    background-image: url("../img/thought.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh; 
    z-index: -1;
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
}
.thoughtIntro h1{
    font-size: 5.5rem;
    margin-bottom: 1rem;
    margin-top: 3.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}

.thoughtIntro .content{
    padding-top: 180px;
}

/* Methodology*/
.methodologyImg {
    margin-bottom: 5rem;
    margin-top: -1rem;
    width: 80%;
    height: auto;
}

.methodologyIntro .content{
    padding-top: 180px;
}

.methodologyIntro .text::before{
    background-image: url("../img/methodology.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 70vh; 
    z-index: -1;
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
}

.methodologyIntro h1{
    font-size: 5.5rem;
    margin-bottom: 1rem;
    margin-top: 3.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}

.methodologyStuff {
    margin-top: 7rem;
    padding-top: 2rem;
    background: rgba(204, 204, 204, 0.5);
    margin-bottom: none;
}
/*CLIENT PROJECTS*/
.clientsIntro .text::before{
    background-image: url("../img/clientImg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 70vh;
    -webkit-filter: blur(0.7px);
    -moz-filter: blur(0.7px);
    -o-filter: blur(0.7px);
    -ms-filter: blur(0.7px);
    filter: blur(0.7px);
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

.clientsIntro .content{
    padding-top: 180px;
    margin-bottom: 10rem;
}

.clientsIntro h1{
    font-size: 5.5rem;
    margin-bottom: 1rem;
    margin-top: 3.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}

.projectCards1{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.projectCards1 .body{
    padding: 1rem;
}

.projectCards1 .top{
    background-color: #67C4C4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.projectCards1 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.projectCards1 {
    font-size: 15px;
    color: #67C4C4;
}

/*MODAL 1*/
.modalOpen1{
    background: #67C4C4;
    color: #fff;
}

/**/

.projectCards2{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.projectCards2 .body{
    padding: 1rem;
}

.projectCards2 .top{
    background-color: #7FCFE8;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.projectCards2 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.projectCards2{
    font-size: 15px;
    color: #7FCFE8;
}

/**/

.projectCards3{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.projectCards3 .body{
    padding: 1rem;
}

.projectCards3 .top{
    background-color: #508CFF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.projectCards3 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.projectCards3{
    font-size: 15px;
    color: #508CFF;
}

/**/

.projectCards4{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.projectCards4 .body{
    padding: 1rem;
}

.projectCards4 .top{
    background-color: #877ADB;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.projectCards4 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.projectCards4{
    font-size: 15px;
    color: #877ADB;
}

/**/

.projectCards5{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.projectCards5 .body{
    padding: 1rem;
}

.projectCards5 .top{
    background-color: #421BDC;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.projectCards5 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.projectCards5{
    font-size: 15px;
    color: #421BDC;
}

/**/

.projectCards6{
    margin: 1rem;
    color: #508CFF;
    background: #fff;
    border-radius: 10px;
    height: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity: 1;
}

.projectCards6 .body{
    padding: 1rem;
}

.projectCards6 .top{
    background-color: #421BDC;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.projectCards6 h1{
    font-size: 20px;
    color: #fff;
    padding: 1rem;
}

.projectCards6{
    font-size: 15px;
    color: #421BDC;
}

/*GALLERY*/
.galleryIntro .text::before{
    background-image: url("../img/GalleryImg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 45vh;
    z-index: -1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: -1;
}

.galleryIntro .content{
    padding-top: 180px;
    margin-bottom: 10rem;
}

.galleryIntro h1{
    font-size: 5.5rem;
    margin-bottom: 1rem;
    margin-top: 3.2rem;
    font-family: 'Open Sans', sans-serif;
    color: #fff;
}

.galleryImg{
    height: auto;
    width: 23rem;
}

.galleryDescription {
    margin-top: 1.5rem;
}

.galleryDescription2 {
    margin-top: 1.5rem;
    text-align: right;
}

.gallery {
    background-color: white;
    padding:2px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/*FOOTER*/
.footer {
    background-color: #4A5FD2;
    padding-top: 1rem;
}

/*FOOTER*/
.footer a{
    text-decoration: none;
    color: #fff;
    transition: font-size 300ms;
}

.footerAward1 {
    height: 1rem;
    width: auto;
}

.footer b{
    font-size: 2.5rem;
}

.footer a:hover{
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
}

.footerLinks {
    color: #fff; 
}

.footerActualLinks{
    line-height: 1.25rem;
}

.footerStory {
    margin-bottom: 4rem;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height:11rem;
}

.footerStory a{
    font-size: 2rem;
    transition: font-size 0.3s;
}

.footerServices {
    height: 15rem;
    width: auto;
}

.footerStory a:hover{
    font-size: 3rem;
}

.footerCopyright {
    color: #fff;
    background-color: #3E53D9;
    padding: 1.25rem;
    margin: none;
}

/*INDEXFOOTER*/
.indexFooter {
    background-color: #4A5FD2;
    padding-top: 1rem;
}

/*INDEXFOOTER*/
.indexFooter a{
    text-decoration: none;
    color: #fff;
    transition: font-size 0.3s;
}

.indexFooter b{
    font-size: 2.5rem;
}

.indexFooter a:hover{
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
}

.indexFooterLinks {
    color: #fff;
}

.indexFooterActualLinks{
    line-height: 0.25rem;
}

.indexFooterStory {
    margin-bottom: 4rem;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    height:11rem;
}

.indexFooterStory a{
    font-size: 2rem;
    transition: font-size 0.3s;
    line-height: 10px;
}

.indexFooterStory a:hover{
    font-size: 3rem;
}

.indexFooterCopyright {
    color: #fff;
    background-color: #3E53D9;
    padding: 1.25rem;
    padding-bottom: 0.45rem;
    margin: none;
}
/*MEDIA CLASSES NAVBAR*/
@media (max-width: 1000px){
    header ul{
        display: none;
    }

    .navTrigger{
        display: inline;
    }
    
    .message {
        display: inline;
    }
    
    .messageClients {
        display: inline;
    }

    .methodologyMessage{
        display: inline;
    }
}

/*MEDIA CLASSES ABOUT.HTML*/
@media (max-width: 1000px){
    .aboutStory h4{
        font-size: 3rem;
    }

    .aboutStory p{
        font-size: 1rem;
    }
}

@media (max-width: 770px){
    .aboutIntro h1{
        font-size: 7rem; 
    }
}

@media (max-width: 550px){
    .aboutIntro{
        height: 40vh;
    }

    .aboutIntro h1{
        font-size: 5rem; 
    }
}

@media (max-width: 1000px){
    .ourPeople{
        font-size: 1rem;
    }

    .ourPeoplePic {
        border-radius: 100%;
        height: 14rem;
        width: auto;
    }
}

@media (max-width: 516px){
    .aboutStory .body p{
        display: inline-block;
        overflow-wrap: break-word !important;
        opacity: 1;
        line-height: 30px;
        font-size: 1rem;
    }
    
    .aboutStory .body{
        margin-top: 10rem;
        padding: 3rem;
    }

    .aboutStory{
        margin-top: 1rem;
        width: 100%;
        margin:auto;
    }

    .people .container{
        width: 100%;
        margin:auto;
    }

    .ourPeople{
        font-size: 0.7rem;
        width: 90%;
        margin: auto;
    }

    .people{
        padding: 0rem;
    }

    .people p{
        width: 80%;
        margin: auto;
    }
}

/*MEDIA CLASSES EXPERIENCE.HTML*/
@media (max-width: 1000px){
    .experienceIntro h1{
        font-size: 7rem;
    }
}

@media (max-width: 700px){
    .experienceIntro h1{
        font-size: 5rem;
    }
}

@media (max-width: 480px){
    .experienceIntro h1{
        font-size: 3rem;
    }
}

@media (max-width: 1080px){
    .experienceCards6 h1{
        font-size: 23px;
    }
}

@media (max-width: 1200px){
    .experienceCredential h1{
        font-size: 2rem;
    }
}

@media (max-width: 980px){
    .experienceDegrees{
        padding-bottom: 10px;
    }
}

@media (max-width: 770px){
    .profilePic {
        height: 18rem; 
        width: 18rem; 
    }
}

@media (max-width: 720px){
    .profilePic {
        height: 15rem; 
        width: 15rem; 
    }
}

@media (max-width: 650px){
    .profilePic {
        height: 12rem; 
        width: 12rem; 
    }
}

@media (max-width: 510px){
    .profilePic {
        height: 9rem; 
        width: 9rem; 
    }
}

@media (max-width: 520px){
    .experienceCredential h1{
        font-size: 1.4rem;
    }

    .experienceDegrees p{
        font-size: 1rem;
    }
}
/*MAEDIA CLASSES SERVICES.HTML*/
@media (max-width: 800px){
    .introduce{
        width: 40rem;
    }

    .introduce h1{
        font-size: 5rem;
    }
}

@media (max-width: 680px){
    .introduce{
        width: 35rem;
    }

    .introduce h1{
        font-size: 4rem;
    }
}

@media (max-width: 600px){
    .introduce{
        width: 30rem;
    }

    .introduce h1{
        font-size: 4rem;
    }
}

@media (max-width: 530px){
    .introduce{
        width: 25rem;
    }

    .introduce h1{
        font-size: 3.2rem;
    }
}

@media (max-width: 430px){
    .serviceActualCard1 li{
        font-size: 15px;
    }
}

@media (max-width: 780px){
    .serviceBring{
        width: 35rem;
    }
}


@media (max-width: 600px){
    .serviceBring{
        width: 30rem;
        height: 230px;
    }

    .serviceBring h1{
        font-size: 35px;
    }
}

@media (max-width: 500px){
    .serviceBring{
        width: 24rem;
        height: 200px;
    }

    .serviceBring h1{
        font-size: 30px;
    }

    .serviceBring .buttonIrregular{
        padding: 10px;
        margin: 10px;
        font-size: 15px;
    }

}

/*MEDIA CLASSES EXPERIENCE.HTML*/
@media (max-width: 920px){
    .contactIntro h1{
        font-size: 3rem;
    }
}

@media (max-width: 800px){
    .contactIntro h1{
        font-size: 2.2rem;
    }
}

@media (max-width: 690px){
    .contactIntro{
        height: 60vh;
    }

}

@media (max-width: 590px){
    .contactIntro{
        height: 60vh;
    }


}

@media (max-width: 465px){
    .contactIntro{
        height: 60vh;
    }


}

@media (max-width: 430px){
    .contactIntro{
        height: 60vh;
    }


}

@media (max-width: 991px){
    .cardDetails{
        padding-bottom: 5rem;
    }
}
iframe{
    
    padding-top: 3rem;
}

@media (max-width: 770px){
    .cardDetails{
        padding-bottom: 5rem;
    }
    .contactProfile h2{
        font-size: 1.5em;
    }
    iframe{
        width: 100; 
        height: 50;
    }
}

@media (max-width: 745px){
    .cardDetails{
        padding-bottom: 5rem;
    }

    
    iframe{
        width: 80%;
        float: left;
        height: auto;
    }

}

@media (max-width: 635px){
    .cardDetails{
        padding-bottom: 5rem;
    }

    iframe{
        width: 70%;
        float: left;
        height: auto;
    }

}


@media (max-width: 566px){
    .cardDetails{
        padding-bottom: 5rem;
    }

    iframe{
        width: 70%;
        float: left;
        height: auto;
    }

}

@media (max-width: 560px){
    .cardDetails{
        padding-bottom: 5rem;
    }

    iframe{
        width: 60%;
        float: left;
        height: auto0;
    }

}

@media (max-width: 490px){
    .cardDetails{
        padding-bottom: 5rem;
    }

    iframe{
        width: 50%;
        float: left;
        height: auto;
    }

}

@media (max-width: 430px){
    .cardDetails{
        padding-bottom: 1rem;
    }

    iframe{
        width: 40%;
        float: left;
        height: auto;
    }

}

/*NAVBAR*/
@media (max-width: 1500px){

    .message {
        margin-right: 4.5rem;
        font-size: 1rem;
    }
    
    .messageClients {
        margin-right: 6rem;
        font-size: 1rem;
    }

    .methodologyMessage{
        margin-right: 8rem;
        font-size: 1rem;
    }
}

@media (max-width: 1400px){

    .message {
        margin-right: 4rem;
        font-size: 1rem;
    }
    
    .messageClients {
        margin-right: 6.5rem;
        font-size: 1rem;
    }

    .methodologyMessage{
        margin-right: 6.5rem;
        font-size: 1rem;
    }


}

@media (max-width: 1350px){
    .message {
       display: none;
    }
    
    .messageClients {
        display: none;
    }

    .methodologyMessage{
        display: none;
    }
}

@media (max-width: 1000px){
    .methodologyStuff h3{
        font-size: 0.75rem;
    }

    .methodologyStuff h2{
        font-size: 0.7rem;
    }

    .methodologyStuff h4{
        font-size: 0.65rem;
    }

    .methodologyIntro h1{
        font-size: 4rem;
    }
}
/*Index Carousel*/
@media (max-width: 1500px) {

    .missionIntro1 .text{
        padding-top: 5rem;
    }
    
    .missionIntro1 h1{
        font-size: 3.5rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 32rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro1 p{
        font-size: 1.25rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 50rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro2 .text{
        padding-top: 5rem;
    }
    
    .missionIntro2 h1{
        font-size: 3.5rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-right: 32rem;
        margin-left: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro2 p{
        font-size: 1.25rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-left: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-right: 50rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro3 .text{
        padding-top: 5rem;
    }
    
    .missionIntro3 h1{
        font-size: 3.5rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 32rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro3 p{
        font-size: 1.25rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 50rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro4 .text{
        padding-top: 5rem;
    }
    
    .missionIntro4 h1{
        font-size: 3.5rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-right: 45rem;
        margin-left: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro4 p{
        font-size: 1.25rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-left: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-right: 50rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro5 .text{
        padding-top: 5rem;
    }
    
    .missionIntro5 h1{
        font-size: 3.5rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 50rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro5 p{
        font-size: 1.25rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 50rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro6 .text{
        padding-top: 5rem;
    }
    
    .missionIntro6 h1{
        font-size: 3.5rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 32rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro6 p{
        font-size: 1.25rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 50rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}

@media (max-width: 1340px){
    .missionIntro1 .text{
        padding-top: 5rem;
    }
    
    .missionIntro1 h1{
        font-size: 3rem;
    }
    
    .missionIntro1 p{
        font-size: 1.1rem;
    }

    .missionIntro2 .text{
        padding-top: 5rem;
    }
    
    .missionIntro2 h1{
        font-size: 3rem;
    }
    
    .missionIntro2 p{
        font-size: 1.1rem;
    }
    
    .missionIntro3 .text{
        padding-top: 5rem;
    }
    
    .missionIntro3 h1{
        font-size: 3rem;
    }
    
    .missionIntro3 p{
        font-size: 1.1rem;
    }
    
    .missionIntro4 .text{
        padding-top: 5rem;
    }
    
    .missionIntro4 h1{
        font-size: 3rem;
    }
    
    .missionIntro4 p{
        font-size: 1.1rem;
    }
    
    .missionIntro5 .text{
        padding-top: 5rem;
    }
    
    .missionIntro5 h1{
        font-size: 3rem;
    }
    
    .missionIntro5 p{
        font-size: 1.1rem;
    }

    .missionIntro6 .text{
        padding-top: 5rem;
    }
    
    .missionIntro6 h1{
        font-size: 3rem;
    }
    
    .missionIntro6 p{
        font-size: 1.1rem;
    }

    
}

@media (max-width:1260px){    
    .missionIntro1 .text{
        padding-top: 5rem;
    }
    
    .missionIntro1 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 30rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro1 p{
        font-size: 1rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 47rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro2 .text{
        padding-top: 5rem;
    }
    
    .missionIntro2 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-right: 30rem;
        margin-left: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro2 p{
        font-size: 1rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-left: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-right: 47rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro3 .text{
        padding-top: 5rem;
    }
    
    .missionIntro3 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 30rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro3 p{
        font-size: 1rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 47rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro4 .text{
        padding-top: 5rem;
    }
    
    .missionIntro4 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-right: 40rem;
        margin-left: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro4 p{
        font-size: 1rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-left: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-right: 47rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro5 .text{
        padding-top: 5rem;
    }
    
    .missionIntro5 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 47rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro5 p{
        font-size: 1rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 47rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro6 .text{
        padding-top: 5rem;
    }
    
    .missionIntro6 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 47rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro6 p{
        font-size: 1rem;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 47rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
}

@media (max-width:1200px){    
    .missionIntro1 {
        height: 100vh;
    }

    .missionIntro2 {
        height: 100vh;
    }
    
    .missionIntro3 {
        height: 100vh;
    }

    .missionIntro4 {
        height: 100vh;
    }

    .missionIntro5 {
        height: 100vh;
    }

    .missionIntro6 {
        height: 100vh;
    }
    

    .missionIntro1 .text{
        padding-top: 5rem;
    }

    .missionIntro1 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 5rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro1 p{
        font-size: 1rem;
        text-align: center;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 5rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro2 .text{
        padding-top: 5rem;
    }
    
    .missionIntro2 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-right: 5rem;
        margin-left: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro2 p{
        font-size: 1rem;
        text-align: center;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-left: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-right: 5rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro3 .text{
        padding-top: 5rem;
    }
    
    .missionIntro3 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 5rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro3 p{
        font-size: 1rem;
        text-align: center;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 5rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro4 .text{
        padding-top: 5rem;
    }
    
    .missionIntro4 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-right: 5rem;
        margin-left: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro4 p{
        font-size: 1rem;
        text-align: center;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-left: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-right: 5rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }

    .missionIntro5 .text{
        padding-top: 5rem;
    }
    
    .missionIntro5 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 5rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro5 p{
        font-size: 1rem;
        text-align: center;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 5rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro6 .text{
        padding-top: 5rem;
    }
    
    .missionIntro6 h1{
        font-size: 3rem;
        color: #fff;
        padding: 10px;
        font-weight: bold;
        margin-left: 5rem;
        margin-right: 5rem;
        background-color: rgba(104, 104, 104, 0.5);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    
    .missionIntro6 p{
        font-size: 1rem;
        text-align: center;
        color: rgb(255, 255, 255);
        font-family: Arial, Helvetica, sans-serif;
        padding: 25px;
        background-color: rgba(104, 104, 104, 0.5);
        margin-right: 5rem;
        margin-top: 2rem;
        margin-bottom: 0;
        margin-left: 5rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
}

@media (max-width:1000px){
    .servicesIntro h1{
        font-size: 3rem;
    }
    
    .thoughtIntro h1{
        font-size: 3rem;
    }

    .methodologyIntro h1{
        font-size: 3rem;
    }

    .clientsIntro h1{
        font-size: 3rem;
    }

    .aboutIntro h1{
        font-size: 3rem;
    }

    .xpTitle h2{
        font-size: 1rem;
    }
}

@media (max-width:1000px){
    .my-card h5{
        font-size: 0.5rem;
    }

    .expText{
        display: none;
    }

    .card-carousel .my-card {
        height: 10rem;
        width: 20rem;
        position: relative;
        border-radius: 10px;
        z-index: 2;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        -webkit-transform: scale(0.6) translateY(-2rem);
        transform: scale(0.6) translateY(-2rem);
        opacity: 0;
        cursor: pointer;
        pointer-events: none;
        background: #fff;
        transition: 1s;
    }
}

@media (max-width:1000px){
    .galleryImg{
        align-self: center;
        margin: none;
    }
}

@media (max-width:1000px){
    .TJProfile iframe{
        display: none;
    }
    .mapSH iframe{
        display: none;
    }
    .HKProfile iframe{
        display: none;
    }
    .SHDetails {
        margin-left:4rem;
    }
}