#loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 98vh;
  position: relative;
}

#loading img {
  animation: rotate 10s infinite;
  width: 8.958333333333334vw;
  height: 8.958333333333334vw;
}

@keyframes rotate {
  100% {
    transform: rotate(180deg);
  }
}

@keyframes loading-animation {
  0% {
    opacity: 1;
    width: 8.958333333333334vw;
    height: 8.958333333333334vw;
  }

  100% {
    width: 36.2984375vw;
    height: 36.2984375vw;
    opacity: 0;
  }
}

#loading div {
  position: absolute;
  border-width: 0.3609375vw;
  border-style: solid;
  opacity: 1;
  border-radius: 50%;
  animation: loading-animation 3.0303030303030303s cubic-bezier(0, 0.2, 0.8, 1)
    infinite;
}

#loading div:nth-child(1) {
  border-color: #122852;
}

#loading div:nth-child(2) {
  border-color: #9ebad3;
  animation-delay: -1.5151515151515151s;
}

@font-face {
  font-family: ObjectSans-Heavy;
  src: url("../fonts/ObjectSans-Heavy.otf");
}

@font-face {
  font-family: ObjectSans-HeavySlanted;
  src: url("../fonts/ObjectSans-HeavySlanted.otf");
}

@font-face {
  font-family: ObjectSans-Regular;
  src: url("../fonts/ObjectSans-Regular.otf");
}

@font-face {
  font-family: ObjectSans-Slanted;
  src: url("../fonts/ObjectSans-Slanted.otf");
}
body {
  /*background: url("../img/background.png") no-repeat center center fixed;*/
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-repeat: no-repeat;
  background-size: cover !important;
}

.nav-logo {
  width: 3.6458333333333335vw;
  height: 3.6458333333333335vw;
  margin-top: 0.5208333333333334vw;
  margin-bottom: 0.5208333333333334vw;
}

.left-div {
  display: grid;
}

.line {
  margin-left: 1.8vw;
  margin-top: 1vw;
}

.rectangle {
  width: 0.2604166666666667vw;
  height: 30vw;
  background-color: #fff;
}

.heading {
  font-family: ObjectSans-Heavy;
  font-size: 10vw;
  text-align: center;
  color: rgba(255, 255, 255, 0.63);
  width: 100%;
}

.main-paragraph {
  background-color: #010f2b;
  transition: box-shadow 0.5s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 0.66;
  padding: 10px;
  border-radius: 1.0416666666666667vw;
}

.main-paragraph p {
  font-family: ObjectSans-Regular;
  color: #fff;
  text-align: center;
  font-size: 1vw;
}

.main-para-div {
  margin-left: 10%;
  margin-right: 10%;
}

.company-cards {
  /*display: flex;*/
  /*margin-left: 19%;*/
  display: inline-flex;
  /*margin-right: 19%;*/
}

.square {
  height: 10.416666666666666vw;
  width: 10.416666666666666vw;
  border-top-left-radius: 4.6875vw;
  border-top-right-radius: 1.5625vw;
  border-bottom-right-radius: 1.5625vw;
  border-bottom-left-radius: 1.5625vw;
  transform: rotateY(0deg) rotate(45deg);
  background-color: #fff;
  opacity: 0.7;
  transition: box-shadow 0.5s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 0.5vw;
  margin-left: -1.5vw;
}

.bbn-b {
  margin-right: 4vw;
}

.tpl-b {
  margin-right: 4vw;
}

.sc-b {
  margin-right: 4vw;
}


.companies {
  justify-content: center;
  text-align: center;
  margin-top: 2vw;
}

.svg-circle {
  width: 11%;
  height: auto;
  visibility: hidden;
}

#circleGroup,
#joinLine {
  stroke: #fff;
}

circle {
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.left-arrow:hover {
  transform: scale(1.1);
}

.left-arrow:hover {
  transform: scale(1.1);
}

.right-arrow:hover {
  transform: scale(1.1);
}

.left-arrow,
.right-arrow {
  width: 40px;
  height: 40px;
  fill: #ffffff;
  cursor: pointer;
}

.snh-pagination {
  margin-top: 1.5vw;
  text-align: right;
}

.fa-facebook {
  background: #ffffff;
  color: #000000;
  text-decoration: none;
}

.fa-facebook:hover {
  background: #3b5998;
  color: white;
  text-decoration: none;
}

.fa-twitter {
  background: #ffffff;
  color: #000000;
  text-decoration: none;
}

.fa-twitter:hover {
  background: #55acee;
  color: white;
  text-decoration: none;
}

.anchor-text {
  display: none;
}

.fa {
  padding: 0.2604166666666667vw;
  width: 3vw;
  height: 3vw;
  text-align: center;
  text-decoration: none;
  margin: 0.2604166666666667vw 0.10416666666666667vw;
  border-radius: 50%;
  font: normal normal normal 0.7291666666666666vw/1 FontAwesome !important;
  font-size: 2.5vw !important;
}

.square img {
  height: auto;
  width: 8.416667vw;
  transform: rotateY(0deg) rotate(-45deg);
  margin-left: -0.6770833333333334vw;
}

.heading h1 {
  font-size: 4.33vw;
}

.tab-heading {
  font-family: ObjectSans-Regular;
}

/* .text-starth{
  text-align: left;
} */

#about,
#contact,
#home {
  height: 77vh;
}

@media (max-width: 768px) {
  #about,
  #contact,
  #home {
    height: 96vh;
  }
  .main-paragraph p {
    font-size: 2.3vw;
    margin-bottom: 1vw;
  }
  .company-cards {
    display: initial;
  }
  .companies {
    margin: 0 39%;
  }
  .tpl-b,
  .bbn-b,
  .sasa-b {
    margin-top: 0%;
  }
  .square {
    height: 16vw;
    width: 16vw;
    margin-top: 36%;
  }
  .square img {
    width: 12.416667vw;
  }
  .rectangle {
    height: 105vw;
  }
  .fa {
    font-size: 5vw !important;
    width: 6vw;
    height: 6vw;
  }
  .social-links {
    margin-left: -2.7vw;
  }
  .left-arrow,
  .right-arrow {
    width: 6vw;
    height: 6vw;
  }
  .svg-circle {
    width: 20%;
  }
}

/* ABOUT DIV */

.about-para {
  font-size: 0.7291666666666666vw;
  color: #ffffff;
  font-family: ObjectSans-Regular;
}

.about-head {
  font-size: 1.8vw;
  color: #ffffff;
  font-family: ObjectSans-Heavy;
}

.about-heading-main {
  color: #ffffff;
  font-family: ObjectSans-Heavy;
  font-size: 1.875vw;
}

.about-main-div {
  background-color: #010f2b;
  transition: box-shadow 0.5s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 0.66;
  padding: 10px;
  border-radius: 1.0416666666666667vw;
}
.about-data {
  margin-top: 3vw;
}

.cert1,
.cert2,
.cert3,
.cert4 {
  width: 7vw;
}
.cert5 {
  width: 3.4994791666666667vw;
}

@media (max-width: 768px) {
  .text-start {
    text-align: center !important;
  }
  .certs {
    display: grid;
  }
  .cert2,
  .cert3,
  .cert4,
  .cert5 {
    margin-top: 2vw;
  }
  .cert1,
  .cert2,
  .cert3,
  .cert4 {
    width: 16vw;
  }
  .cert5 {
    width: 10vw;
    margin-left: -5vw;
  }
  .about-para {
    font-size: 2.3vw;
  }
  .about-head {
    font-size: 2.5vw;
  }
  .about-heading-main {
    font-size: 3vw;
  }
  .line-about {
    display: none;
  }
}

/* Contact Div */

.contact-data-para {
  font-size: 1vw !important;
  font-family: ObjectSans-Regular;
  color: white !important;
  text-decoration: none;
}

.contact-data-head {
  font-size: 1vw !important;
  font-family: ObjectSans-Heavy;
  color: white;
}

.tab-content {
  margin-top: 3vw;
  color: white;
}

.contact-main-div {
  background-color: #010f2b;
  transition: box-shadow 0.5s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 0.66;
  padding: 10px;
  border-radius: 1.0416666666666667vw;
}

.tab-pane > p > a {
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 768px) {
  .contact-data-para {
    font-size: 3vw !important;
  }
  .contact-data-head {
    font-size: 3vw !important;
  }
  .footer-basic {
    position: relative !important;
  }
  .nav-tabs>li>a{
    font-size: 1.5vw !important;
  }
}

/* Contact Div Tabs */

.nav-tabs {
  border-bottom: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #555;
  cursor: default;
  border: none;
  border-bottom: solid 5px red;
  line-height: normal;
}

.nav > li > a:focus,
.nav > li > a {
  text-decoration: none;
  margin: 0;
  line-height: normal;
  border: none;
  border-bottom: solid 5px gray;
}

.nav-tabs > li > a:hover {
  border: none;
  border-bottom: solid 5px gray;
}

.tab-content {
  padding: 10px;
}

.nav-tabs > li > a {
  border-radius: 0;
  margin: 0;
  line-height: normal;
  color: white;
  font-size: 2vw;
  text-decoration: none !important;
}

.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
  width: 33.33%;
}

/* On Hover Effects */

.contact-main-div:hover,
.about-main-div:hover,
.main-paragraph:hover {
  box-shadow: 0px 0px 21px 2px #fff;
  opacity: 1;
}

.square:hover {
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 21px 4px #000000;
  box-shadow: 0px 0px 21px 4px #000000;
  opacity: 1;
}

/* Footer */

.footer-basic {
  padding-top: 3px;
  padding-bottom: 5px;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

.footer-basic .copyright {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #ffffff;
  margin-bottom: 0;
  font-family: ObjectSans-Regular;
}

.copyright a {
  text-decoration: none;
  color: #ffffff;
}

.copyright a:hover {
  text-decoration: underline;
}

#contact,
#about {
  display: none;
}

/*@media (max-width: 425px) {*/
/*  #about,*/
/*  #contact,*/
/*  #home {*/
/*    height: 88vh;*/
/*  }*/
/*}*/

@media (max-device-width: 960px) and (orientation: landscape) {
  body{
    padding-left: env(safe-area-inset-left, 20px);
    padding-right: env(safe-area-inset-right, 20px);
  }
  #about, #contact, #home{
    height: 135vh;
  }
  .companies {
    margin: 0;
  }
  .company-cards {
    display: inline-flex;
  }
  .main-para-div {
    margin-left: 0;
    margin-right: 0;
  }
  .main-paragraph p {
    font-size: 1.5vw;
  }
  .square {
    height: 13vw;
    width: 13vw;
    margin-top: 7%;
  }
  .rectangle {
    height: 47vw;
  }
  .footer-basic {
    position: relative;
  }

  .col-sm-7 {
    width: 33.3%;
  }
  .certs {
    display: flex;
    justify-content: center;
  }
  .cert1, .cert2, .cert3, .cert4, .cert5 {
    margin-top: 0vw;
    width: 13vw;
  }
  .cert5 {
    margin-left: 0;
    width: 6vw;
  }
  .nav-tabs > li > a {
    font-size: 1.75vw;
  }
  .contact-data-head {
    font-size: 2vw !important;
  }
  .contact-data-para {
    font-size: 2vw !important;
  }

  .square img {
    width: 10.416667vw;
  }

  .text-start{
    text-align: center !important;
  }
  .testing-lab{
    width: 50% !important;
  }

}

@media (max-device-width: 1024px) and (orientation: landscape){
  .text-start{
    text-align: center !important;
  }
}

@media (max-device-width: 1024px) and (orientation: portrait){
  .text-start{
    text-align: center !important;
  }
}