body {
    position: relative;
    padding: 0;
    margin: 0;
    letter-spacing: 1.5px;
    font-family:"Julius Sans One";
    
  }
  /*font-family: "Courier New", Courier, monospace;*/
  html {
    scroll-behavior: smooth;
  }
  h1 {
    color: #000;
    letter-spacing: 1px;
    font-size: 40px;
    width: auto;
    font-family: 'Hind', 'Arial', 'sans-serif';
  }
  #navigation
  {
    float: right;
    width: 100%;
    
  }
  
  a {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    padding: 1px 0;
    margin: 0 20px;
    margin-top:2%;
    transition: all 0.15s ease-in-out;
  }

  /* NAVIGATION */
nav {
  /*background: #fff;*/
  position: absolute;
   top: 0;
   right: 0;
   z-index: 999;
   padding: 10px 10px;
   text-align: right;
   color: #000;
   font-size: 18px;
   letter-spacing: 1px;
  /*box-shadow: 0px 5px 0px #dedede;*/
}
nav ul{
  float: right;
}
nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #000;
  /*font-weight: 800;
  text-transform: uppercase;*/
  margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}


/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
  position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 0%;
  content: '.';
  color: transparent;
  background: #aaa;
  height: 1px;
}
nav.stroke ul li a:hover:after {
  width: 100%;
}

nav.fill ul li a {
  transition: all 2s;
}

nav.fill ul li a:after {
  text-align: left;
  content: '.';
  margin: 0;
  opacity: 0;
}
nav.fill ul li a:hover {
  color: #fff;
  z-index: 1;
}
nav.fill ul li a:hover:after {
  z-index: -10;
  animation: fill 1s forwards;
  -webkit-animation: fill 1s forwards;
  -moz-animation: fill 1s forwards;
  opacity: 1;
}
ul li{
  animation:fadeDown .5s forwards;
  opacity:0;
  cursor:pointer;
  transform:translateY(-20px);
  transition:all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

@keyframes fadeDown{
  0%{
    opacity:0;
    transform:translateY(-20px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
  }
}

.pt-page-moveFromRight {
  animation: moveFromRight 1s ease;
}
@keyframes moveFromRight {
  from { -webkit-transform: translateY(100%); }
}

.inset {
  color: grey;
  text-shadow: -1px -1px 1px #444, 1px 1px 1px #ccc;
  font-size: 6vw;
  letter-spacing:-2px;
}
.textD:hover{
  color:#fff !important;
}
.textD:hover span
{
  color:rgb(180, 180, 180) !important;
  /*
  display: inline-block;
  margin-left:5%;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); */
}
.zoom
{
  width: 100%;
  left: 50%;
  position: relative;
  transform: translateX(-50%);
}
 /* NAVIGATION END */

 /* HEADER */
 .header_background
 {
     width:100%;
     height:100%;
     z-index:-9999;
     overflow: hidden;
     position: absolute;
 }
 
 .hov-color-home:hover {
    color: #777;
 }
 .hov-color-about:hover {
   color:  #777;
 }
 .hov-color-services:hover {
   color:  #777;
 }
 .hov-color-contact:hover {
   color:  #777;
 }
 
 .wide {
   box-sizing: border-box;
   width: 100%;
   /*padding: 80px 60px 60px 60px;
   min-height: 100vh;*/
 }

 #home{
  position: relative;
  overflow: hidden;
 }

 .content-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  height: 100%;
 }

 .inner-content-container{
  display: flex;
  align-items: center;
  justify-content: end;
 }

 .header_logo2 {
  width: 30%;
 }

 .text-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: -3rem;
 }

 .typewriter-font2
 {
   font-size:50pt;
   z-index: 999999;
   margin: 0rem;
 }
 /*Type-writer effect*/
 .typewriter {
     
   overflow: hidden; /* Ensures the content is not revealed until the animation */
   /*border-right: .15em solid #eee; /* The typwriter cursor */
   white-space: nowrap; /* Keeps the content on a single line */
   /*margin: 0 auto; /* Gives that scrolling effect as the typing happens */
   letter-spacing: .15em; /* Adjust as needed */
   animation: 
     typing 3.5s steps(40, end),
     blink-caret .75s step-end infinite;
 }
 .typewriter2 {
   
   overflow: hidden; /* Ensures the content is not revealed until the animation */
   /*border-right: .15em solid #eee; /* The typwriter cursor */
   white-space: nowrap; /* Keeps the content on a single line */
   /*margin: 0 auto; /* Gives that scrolling effect as the typing happens */
   letter-spacing: .15em; /* Adjust as needed */
   animation: 
     typing 3.5s steps(40, end),
     blink-caret .75s step-end infinite; 
     
 }

 .typewriter-font
 {
   font-size: 17pt;
   /*color:#666;*/
   position: relative;
   z-index: 999999;
   margin: 0rem;
   color:#F0F0F0;
   font-size: 16pt;
 }

 /* The typing effect */
 @keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

 .textDecor {
  color:#000;
  font-size: 7vw;
  letter-spacing:-2px;
  position: relative;
  padding-right: 2rem;

  text-shadow:  /*grey*/
    1px 1px 0px grey,
    2px 2px 0px grey,
    3px 3px 0px grey,
    4px 4px 0px grey,
    5px 5px 0px grey,
    6px 6px 0px grey,
    7px 7px 0px grey,
    8px 8px 0px grey,
    9px 9px 0px grey,
    10px 10px 0px grey,
    11px 11px 0px grey,
    12px 12px 0px grey;
}


.textD {
  font-size: 68pt;
  font-weight: 700;
  color: #c2c0c0 ;
  
  animation-name: flicker;
  animation-delay: 0.5s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes flicker {
  0% {
   color:rgb(180, 180, 180);
  }
  25% {
    /*color:#c2c0c0;*/
    color:#fff;
  }
  50% {
    color:rgb(180, 180, 180);
  }
  75% {
    color:#fff;
  }
  100% {
    color:rgb(180, 180, 180);
  }
}


/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: grey;
  }
}

.double-shadow {
  text-shadow: 2px 2px 0px grey, 4px 4px 0px rgba(0, 0, 0, 0.15);
}
  /* HEADER END*/

  /* VISION */
#learn {
  position: relative;
}

.section-vision{
  z-index: 1;
  position: relative;
}

.learn-image-container, .vision-container {
  display: flex;
  flex-direction: row;
  margin-left: 2rem;
}

.vision-pics {
  width:150px;
  height:700px;
  margin: 0.5rem;
}

.vision-pic-top-1
{
  margin-top: 20%;
}
.vision-pic-top-2
{
  margin-top: 40% ;
}
.background-colour
{
  color:#000;
  background-image: linear-gradient(to right, rgb(182, 182, 182),#F2F2F2, #DBDBDB,#EAEAEA);
  background-position: center left;
  width: 100%;
  height: 55vh;
  margin-top: 20%;
  position:absolute;
  bottom: 0;
  z-index: -999;
}

.content_style
{
  margin-top: -6%;
  font-size:10pt;
}

.content_style2
{
  margin-top: 7%;
  color:#000;
}

.newFont
{
  /*font-family: "Luckiest Guy";*/
  font-family:"Julius Sans One";
}

.vision-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  align-self: center;
}

.vision-text {
  width: 100%;
  text-align: center;
  margin-top:1rem;
}


  /* VISION END*/


  /* ABOUT */
  #about {
    position: relative;
    /*height: 175vh;*/
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .parallax-about-background {
    background-size: 100% 100%;
  }

.max-width {
  width: 100%;
}

.about-box
{
  background-image: linear-gradient(to right, #9da8aa34, rgba(185, 185, 185, 0.178));
  font-size: 12pt;
    padding: 60px;
    color: #fff;
    width:50%;
    box-shadow: 10px 10px grey;
    position: relative;
}

.about-box-person1{
  
  height: fit-content;
  margin-left: 5%;
  margin-top: 10%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.about-box-person2 {
  
  height: fit-content;
    margin-top: 5%;
    margin-bottom: 5%;
    float: right;
    display: flex;
    margin-right: 5%;
    flex-direction: row;
    align-items: center;
}

.about-img1
{
  width: 60%;
  margin-left: -8%;
  margin-top: -6%;
}

.about-img2
{
  width: 65%;
  margin-left: -3.8rem;
  margin-top: -2rem;
} 
.heading-background-about
{
  transform: rotate(-45deg); 
  color: #fff;
    /* justify-content: start; */
    position: absolute;
    margin-left: -15%;
    margin-top: 12.9%;
    text-align: center;
    font-size: 15pt;
    border-bottom: 100px solid rgba(110, 110, 110, 0.9);
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    width: 600px;
    z-index: 0;

}
.toptobottom
{
  width: 0;
  padding: 15px 57px 6px 30px;
  word-wrap: break-word;
}
.about-header-text
{
  width: 60%;
  font-size: 11pt;
  margin-top: 5rem;
  display: flex;
  align-self: end;
}

.about-span {
  margin-left:-18%;    
  position: absolute;
  padding: 30px;
}
.parallax-about-img-1 {
  /* The image used */
  background-image: url("../images/about-img1.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.parallax-about-img-2{
  /* The image used */
  background-image: url("../images/about-img2.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.align-text-about-person-1
{
  width: 56%;
  z-index: 999;
  margin-top: -1rem;
}

.align-text-about-person-2
{
  width: 100%;
  z-index: 999;
  margin-top: -1rem;
}
.solid-line1
{
  border-bottom: 350px solid rgba(190, 190, 190, 0.322);
  border-left: 450px solid transparent;
  right: 0;
  bottom: 0;
    position: absolute;
}
.solid-line2
{
  border-bottom: 350px solid rgb(255, 255, 255,0.6);
  border-left: 450px solid transparent;   
  bottom: 0;
  position: absolute;
  right: 0;
}


.parallax-about-background{
  /* The image used */
   background-image: url("../images/backpic5.jpg");
  background-attachment: fixed;
  background-position: right;
  background-repeat: no-repeat;
}
  /* ABOUT END */

/* SERVICES */
#services{
  padding: 5rem 0rem 15rem;
}

.sevice-content-container{
  display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 10rem;
}

.services-header-align{
  display: flex;
  flex-direction: row;
  justify-content: center;
    align-items: center;
    column-gap: 2rem;
    width: 100%;
}

.services-header-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.carousel {
  width:800px;
  height: 300px;
  display: relative;

}
.carousel img {
  display: hidden; /* hide images until carousel prepares them */
  cursor: pointer; /* not needed if you wrap carousel items in links */
}

.center-carousel
{
  border-radius: 20px;
}
.center-text
{
  text-align: center;
  border-radius: 20px;
}
.carsourel-img1-width
{
  height: 400px;
  width:600px;
  border-radius: 20px;
}
.carsourel-img2-width
{
  height: 400px;
  width: 600px;
  border-radius: 20px;
}
.display-mobile-text:hover .mobile-text-box {
  display:block;
  opacity: 1;
  height: 400px;
  width:600px;
  background-color:rgba(0,0,0,0.5);
  border-radius: 20px;
}
.display-web-text:hover .web-text-box{
  display:block;
  opacity: 1;
  height: 400px;
  width:600px;
  background-color:rgba(0,0,0,0.5);
}
.mobile-text-box {

  top: -17%;
  left: 12.5%;
  display:none;
  position: absolute;
  z-index: 9999;
  color: white;
}
.web-text-box{
  top: -17%;
  left: 12.5%;
  display:none;
  position: absolute;
  z-index: 9999;
  color: white;
  border-radius: 20px;
}
.mobile-text-content
{
  text-align: center;
  margin-top:13%;
  width:80%;
  margin-left:10%;
}
.web-text-content{
  text-align: center;
  margin-top:10%;
  width:80%;
  margin-left:10%;
  border-radius: 20px;
}
.solid-line-about1
{
  width: 30%;
  height: 5px;
  background-color: #000;
  animation-name: overlay;
  animation-duration: 2s;
  animation-delay: 2s;
  animation-iteration-count: 1;
}
.solid-line-about2
{
  width: 30%;
  height: 5px;
  background-color: #000;
  animation-name: overlay;
  animation-duration: 2s;
  animation-delay: 3s;
  animation-iteration-count: 1;
}

.solid-line-about3
{
  width: 50%;
  height: 5px;
  background-color: #666;
  animation-name: overlayRight;
  animation-duration: 2s;
  animation-delay: 4s;
  animation-iteration-count: 1;
}
.solid-line-about4
{
  width: 32%;
  height: 5px;
  background-color: #666;
  animation-name: overlayRight;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: 1;
}
.button-size
{
  width:20%;
}
.button-style
{
  background: transparent;
  border: 0px #fff;
}
.show
{
  display: block;
}

@keyframes overlay {
  0% {
    transform: scaleX(0);
    transform-origin: 0% 100%;
  }
  50% {
    transform: scaleX(1);
    transform-origin: 0% 100%;
  }
}
@keyframes overlayRight {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 0%;
  }
  50% {
    transform: scaleX(1);
    transform-origin: 100% 0%;
  }
}
/* SERVICES END */


/* CONTACT US */

/*contact Form*/

#contact {
  width: 100%;
  /*background-color:rgba(0,0,0,0.8);*/
  overflow: hidden;
  padding-bottom: 60px;
  
}

.section-header {
  text-align: center;
  margin: 0 auto;
  padding-top: 50px;
  margin-bottom: 50px;
  font: 300 60px ;
  letter-spacing: 6px;
  color: #000;
  margin-bottom: 25px;
}

.contact-wrapper {
  margin: 0 auto;
  padding-top: 20px;
  position: relative;
  max-width: 800px;
}

/* Begin Left Contact Page */
.form-horizontal {
  float: left;
  max-width: 400px;
  font-weight: 400;
}

.form-control, textarea {
  max-width: 400px;
  background-color: #000;
  color: #fff;
  letter-spacing: 1px;
}

.send-button {
  margin-top: 15px;
  height: 34px;
  width: 400px;
  overflow: hidden;
  transition: all .2s ease-in-out;
}

.button {
  width: 400px;
  height: 34px;
  transition: all .2s ease-in-out;
}

.send-text {
  display: block;
  margin-top: 10px;
  font: 300 14px ;
  letter-spacing: 2px;
}

.button:hover {
  transform: translate3d(0px, -29px, 0px);
}

/* Begin Right Contact Page */
.direct-contact-container {
  max-width: 340px;
  /*float: right;*/
  margin-top: -30px;
  padding: 1%;
  
  /*-- Extra */
  text-align: center;
  margin: 0 auto;
  margin-top: 5%;

}

/* Location, Phone, Email Section */
.contact-list {
  list-style-type: none;
  margin-left: -30px;
  padding-right: 20px;
}

.list-item {
  line-height: 4;
  color: #aaa;
}

.contact-text {
  letter-spacing: 1.9px;
  color: #fff;
  font-size: 20pt;
}

.place {
  margin-left: 82px;
}

.phone {
  margin-left: 56px;
}

.gmail {
  margin-left: 53px;
}

.contact-text a {
  color: #fff;
  text-decoration: none;
  transition-duration: 0.2s;
  margin-top: -7%;
  display: inherit;
}

.contact-text a:hover {
  color: #fff;
  text-decoration: none;
}


/* Social Media Icons */
.social-media-list {
  position: relative;
  font-size: 2.3rem;
  text-align: center;
  width: 100%;
}

.social-media-list li a {
  color: #fff;
  margin-left:-10%;
}

.social-media-list li {
  position: relative; 
  top: 0;
  left: -20px;
  display: inline-block;
  /*height: 70px;*/
  width: 70px;
  margin: 10px auto;
  line-height: 70px;
  border-radius: 50%;
  color: #fff;
  /*background-color: rgb(27,27,27);*/
  cursor: pointer; 
  transition: all .2s ease-in-out;
}

.social-media-list li:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 70px;
  line-height: 70px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 1px #fff;
  transition: all .2s ease-in-out;

  margin-top:-20%;
  margin-left:-20%;
}

.social-media-list li:hover {
  /*background-color: #fff; */
}

.social-media-list li:hover:after {
  opacity: 1;  
  transform: scale(1.12);
  transition-timing-function: cubic-bezier(0.37,0.74,0.15,1.65);
}

.social-media-list li:hover a {
  color: #111;
}

.copyright {
  font: 200 14px ;
  color: #fff;
  letter-spacing: 1px;
  text-align: center;
  margin-top: -5%;
}

hr {
  border-color: rgba(255,255,255,.8); ;
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
textarea.form-control {
  height: auto;
}
.email-text
{
  font-size: 13pt;
}
.email-text2
{
  font-size: 11pt;
}
.parallax-contact {
  /* The image used */
  background-image: url("../images/binary.jpg");

  /* Set a specific height */
  

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  z-index:-1;
}
.bg-opacity{
  position: relative;
  background-color:rgba(0,0,0,0.7);

}
.bg-opacity::before{
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /*background:       url("../images/about-background.jpg") no-repeat bottom right;
  */
  background:       url("../images/backpic5.jpg") no-repeat bottom right;
  background-size: 100% 100%;
  background-attachment: fixed;
}

.content{
position: relative;
width: 100%;
height: 600px;
}
.submit-form:hover
{
  background-color:rgba(105, 101, 101, 0.9);
  color:white;
  border:1px #777 solid;
}
.down-and-distant {
  color: #000;
  background: #222;
  padding: .25rem .5rem 1.75rem .5rem;
  text-shadow: 0px 2px 0px #222,
               0px 7px 5px rgba(0,0,0,0.15),
               0px 8px 1px rgba(0,0,0,0.1),
               0px 12px 15px rgba(0,0,0,0.1);
}
/* CONTACT US END */

@media only screen and (max-device-width : 1440px) {

}

@media only screen and (max-device-width : 1280px) {
  .heading-background-about {
    margin-top: 14.9%;
  }
}
@media only screen and (max-device-width : 1024px) {
  .vision-pics {
    width: 100px;
    height: 750px;
  }

  .background-colour {
    height: 38vh;
  }

  .about-box {
    width: 65%;
  }
  .carousel{
    margin-left: 1rem;
  }
  .web-text-box, .mobile-text-box {
    left: 11.9%;
  }
}

@media only screen and (max-device-width : 820px) {
  .heading-background-about {
    margin-left: -27%;
  }
  .vision-pics {
    width: 70px;
  }

  .web-text-box, .mobile-text-box {
    left: 11%;
  }

  .carousel{
    margin-left: -0.2rem;
  }
}

@media only screen and (max-device-width : 560px) {
  .content-container {
    flex-direction: column;
    justify-content: center;
    align-items: end;
        float: right;
  }

  .header_logo2 {
    margin-left: -11rem;
    width: 80%;
  }
  .align-text-about-person-1, .align-text-about-person-2 {
    font-size: 15pt;
  }
  .background-colour {
    height: 50%;
  }
  .vision-pics {
    width: 85px;
  }
  #learn {
    position: relative;
    margin: 20rem 0rem;
    height: fit-content;
  }
  .inner-content-container{
    width: min-content;
    flex-direction: column;
    position: absolute;
    right: 0;
   }
   
   .about-header-text {
    font-size: 9pt;
    margin: auto;
    margin-right: 2rem;
   }

   .text-container{
    /*margin-left: -7rem ;*/
   }

   .textD {
    font-size: 83pt;
   }

   .typewriter-font {
    font-size: 18pt;
    margin-left: 0.6rem;
   }

   .vision-text {
    font-size: 18pt;
    width:100%;
   }

   .weAre{
    font-size: 14pt;
   }

   nav {
    font-size: 22px;
   }

   .mobile-text-box, .web-text-content{
    font-size: 14pt;
   }

   .web-text-box {
    left: 11%;
   }

   .db-web-text-content {
    width: 90%;
    margin-left: 5%;
   }

   .content_style
  {
    text-align: center;
    width: 90%;
  }
}