*, :after, :before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
a {
  text-decoration: none;
}
.web-body {
  width: 100%;
  padding: 2.3%;
  font-family: 'Public Sans', sans-serif;
  background-color: white;
}
.body-container {
  width: 100%;
  margin: 0 auto;
  /* background-color: #F4F4F4; */
  height: 100vh;

}
i {
  color: #6B6D6D;
}
ul {
  list-style: none;
}
/* header starts  */
.header-main {
  width: 100%;
  padding: 1rem 0;
  position: relative;
  z-index: 1000;
  position: fixed;
  top: 5%;
  left: 0;
}
.header-container {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.menu-icon {
 /* width: 5%; */
 border: 1px solid #6B6D6D;
 padding: 0.8rem 0.7rem;
 border-radius: 50%;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding-top: 0.95rem;
 cursor: pointer;
}
.menu-icon span {
  width: 25px;
  height: 2px;
  display: block;
  margin-bottom: 0.3rem;
  background-color: #6B6D6D;
}
.logo {
 width: 12%;
 text-align: center;
}
.logo img {
  width: 58%;
  text-align: center;
}
.social-icons {
 width: 82%;
 text-align: right;
}
.social-icons i {
  margin-right: 0.8rem;
  font-size: 1rem;
}
/* header ends  */

/* menu section starts  */
.menu-section {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 2.3%;
  z-index: 400;
  transition: all 0.1s ease;
  display: none;
  background-color: white;
}
.menu-section-manu {
  z-index: 400;
  display: block !important;
}
.menu-section-container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  transition: all 0.4s ease;
  position: relative;
  background-color: black;
  z-index: -1;
}
.menu-section .menu-section-container ul {
  position: relative;
  z-index: 100;
  transition: all 0.4s ease;
  z-index: -1;

}
.menu-section .menu-section-container ul li {
  margin-bottom: 1.5rem;
  text-align: center;
  transition: all 0.4s ease;
  transition: translateY(-20px)
}
.menu-list-manu {
  transform: translateY(0px);
}
.menu-section .menu-section-container ul li a {
  color: #6B6D6D;
  font-size: 2rem;
  font-weight: bold;

}
/* menu section ends  */
/* hero section starts  */
.hero-main {
  width: 100%;
  height: 90vh;
  position: relative;
  background: url("../media/teja-hero.png");
  background-size: cover;
  background-attachment: fixed;
}
.hero-main img {
  width: 100%;
}
.down-scroll {
  position: absolute;
  bottom: 5%;
  left: 50%;
  animation: scrolldown 1s infinite;
  animation-fill-mode: forwards;
  transition: all 0.4s ease;
}
@keyframes scrolldown {
  0% {
     transform: translateY(10px);
  }
  50% {
     transform: translateY(0px);
  }
  100% {
    transform: translateY(-10px);
  }
}
.down-scroll a i {
  font-size: 2rem;
  color: black;
}
.hero-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.hero-text h1 {
  font-size: 4.5rem;
  color: #5C5858;
  /* text-transform: uppercase; */
  /* color: white; */

}

/* hero section ends */

/* about section starts */

.about-teja-main {
  margin: 2rem 0;
  width: 100%;
  text-align: center;
  padding: 4rem 0;
  position: relative;
}
.about-teja-main:after {
  content: "";
  left: 50%;
  bottom: -20%;
  width: 2px;
  background-color: #6B6D6D;
  height: 80px;
  position: absolute;

}
.about-container {
  width: 80%;
  margin: 0 auto;
}
/* heading starts  */
.about-teja-main h2, .services-main h3 {
   color: #6B6D6D;
   font-size: 2rem;
   margin: 1rem 0;
   color: black;
}
/* heading ends */
.about-teja-main p {
  font-size: 1rem;
  color: #6B6D6D;
  line-height: 1.8;
}
.hightlights-main {
  width: 100%;
  margin-top: 8rem;
  margin-bottom: 3rem;
}
.hightlights-container {
  width: 95%;
  margin: 0 auto;
  display: flex;
  background-color: #E4E4E4;
  padding: 2rem 0;
  background-color: black;
}
.hightlights-container .h-box {
  width: 25%;
  text-align: center;
  color: white;
}
.hightlights-container .h-box strong {
  font-size: 2.7rem;

}
.hightlights-container .h-box p {
  font-size: 1rem;

}
/* about section ends  */
/* clients starts  */
.clients-main {
  width: 100%;
  text-align: center;
  margin: 3rem 0;
  position: relative;
  padding-top: 6rem;
}
.clients-main:after {
  content: "";
  width: 2px;
  height: 80px;
  position: absolute;
  left: 50%;
  top: 0;
  background-color: #6B6D6D;
}
.clients-main h3 {
  font-size: 1.5rem;
  margin: 2rem 0;
  color: #6B6D6D;
  margin-bottom: 2rem;
}
.clients-container {
  width: 95%;
  margin: 0 auto;
  padding-top: 2rem;

}
.clients-box-container {
  display: flex;
  flex-wrap: wrap;
  /* background-color: #F1F1F1; */
}
.clients-container .c-box {
   width: 12.5%;
   padding: 0.5rem;
   /* border: 1px solid grey; */
   transition: all 0.4s ease;
   cursor: pointer;
}
.clients-container .c-box:hover {
  box-shadow: 0px 0px 40px grey;
  background-color: #F8F8F8;
  transform: translateY(-10px);
}
.clients-container .c-box:hover img {
  transform: scale(1.1);
}
.clients-container .c-box:last-child {
  border-right: 1px !important;
}
.clients-container .c-box img {
  width: 100%;
  height: 100%;
  transition: all 0.4s ease;
}
.clients-container .c-box:nth-child(odd) {
  border-right: 0;
  /* border-bottom: 0; */
}
.clients-container .c-box:nth-child(even) {
  border-right: 0;
  /* border-top: 0; */

}
.clients-box-container2 .c-box {
  border-top: 0;
}
/* clients ends */

/* team starts  */
.team-main {
  width: 100%;
  text-align: center;
  /* margin-top: 2rem; */
  position: relative;
  padding-top: 6.5rem;
}
.team-main:after {
  width: 2px;
  content: "";
  height: 80px;
  background-color: #6B6D6D;
  position: absolute;
  left: 50%;
  top: 0;
}
.team-main h3 {
  font-size: 1.5rem;
  color: #6B6D6D;
}
.team-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.team-box {
  text-align: center;
  width: 20%;
  margin: 2rem;
  border: 1px solid #F0F0F0;
  padding-bottom: 1rem;
  position: relative;
  cursor: pointer;
}
.team-box:after {
  content: "";
  left: 0;
  height: 0%;
  width: 100%;
  background-color: #6B6D6D;
  top: 0;
  position: absolute;
  z-index: 0;
  transition: all 0.4s ease;
}
.team-box:hover:after {
  height: 40%;
}
.team-box img {
  width: 100%;
  position: relative;
  z-index: 100;
}
.t-img-box {
  /* background-color: #6B6D6D; */
}
.t-img-box img {
  width: 100%;
}
.team-text {
  width: 85%;
  margin: 0 auto;
  padding: 0.5rem;
  margin-top: 0.5rem;
  position: relative;
  z-index: 100;
  transition: all 0.4s ease;

}
.team-box:hover .team-text {
  background-color: rgba(222, 222, 222, 0.7);
}
.team-text strong {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  display: block;
}
.team-text p {
  font-size: 0.9rem;
}
/* team ends */
/* footer starts  */
.footer-main {
  width: 100%;
  background-color: #6B6D6D;
  text-align: center;
}
.footer-main-container {
  width: 90%;
  margin: 0 auto;
  /* padding: 4rem 0; */
  text-align: center;
  padding-top: 2rem;
}
.footer-main-container img {
  width: 10%;

}
.footer-main-container ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3rem;

}
.footer-main-container ul li a {
  margin-right: 1.5rem;
  color: white;
}
.locations ul {
  border: 1px solid grey;
  padding: 1rem;
  border-left: 0;
  border-right: 0;
}
.locations ul li a {
  font-size: 0.9rem;
}
.locations ul li i {
  color: white;
  font-size: 0.8rem;
}
.copyright {
  display: flex;
  padding: 1rem;
  width: 100%;

}
.copyright .copyleft {
  width: 100%;
  text-align: center;
}
.copyright .copyleft p {
  font-size: 0.9rem;
  color: white;
}
.copyright .copyrights {
  width: 20%;
}
.copyright .copyrights a {
  margin-right: 1rem;
}
.copyright .copyrights {
  text-align: left;
}
.copyright .copyrights i {
  color: white;

}
/* footer ends  */

/* services starts  */
.services-main {
  width: 100%;
  text-align: center;
  padding-bottom: 3rem;
  position: relative;
  padding-top: 6.5rem;
}
.services-main:after {
  content: "";
  width: 2px;
  height: 80px;
  width: 2px;
  background-color: #6B6D6D;
  position: absolute;
  left: 50%;
  top: 0;

}
.services-container {
  width: 95%;
  margin: 0 auto;
}
.traditional-container {
  display: flex;
  flex-wrap: wrap;
  padding: 2rem 0;
  justify-content: center;
}
.services-container ul {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.services-container ul li {
  font-size: 1.3rem;
  cursor: pointer;
  margin-left: 4rem;
  padding: 1rem 0;
  font-weight: 500;
  position: relative;
}
.indicator {
  position: relative;
}
.services-container ul li:after {
  content: "";
  background-color: black;
  width: 0%;
  height: 2px;
  position: absolute;
  left: 50%;
  transition: all 0.4s ease;
  bottom: 10%;
}
.indicator:after {
  content: "";
  background-color: black;
  width: 100% !important;
  height: 2px;
  position: absolute;
  left: 0% !important;
  transition: all 0.4s ease;
  bottom: 10%;
}

.s-box {
  width: 30.8%;
  margin: 0.7rem;
  padding: 1rem;
  display: flex;
  border: 1px solid #F1F1F1;
  transition: all 0.4s ease;
  position: relative;
  cursor: pointer;
}
.s-box:after {
  content: "";
  width: 0px;
  height: 0px;
  background-color: transparent;
  border: 3px solid orange;
  position: absolute;
  left: 0%;
  top: 0%;
  border-right: 0;
  border-bottom: 0;
  transition: all 0.4s ease;
  opacity: 0;
}
.s-box:hover  .s-box-left:after {
  background-color: black;
}
.s-box:hover:after {
  left: 0;
  width: 50px;
  height: 50px;
  top: 0;
  opacity: 1;
}
.s-box:before {
  content: "";
  width: 0px;
  height: 0px;
  background-color: transparent;
  border: 3px solid orange;
  position: absolute;
  right: 0%;
  bottom: 0%;
  border-left: 0;
  border-top: 0;
  transition: all 0.4s ease;
  opacity: 0;
}
.s-box:hover:before {
  width: 50px;
  height: 50px;
  opacity: 1;
}

.s-box .s-box-left {
  width: 20%;
  position: relative;
  text-align: left;
}
.s-box .s-box-left:after {
  content: "";
  right: -10%;
  width: 2px;
  height: 70%;
  top: 15%;
  background-color: grey;
  position: absolute;
  transition: all 0.4s ease;
}
.s-box .s-box-left img {
  width: 80%;
}
.s-box .s-box-right {
  width: 80%;
  display: flex;
  align-items: center;
  padding-left: 2rem;
}
.s-box .s-box-right h5 {
  font-size: 1.1rem;
}

/* services ends */
/* contact starts  */
.contact-main {
  width: 100%;
  padding: 3rem 0;
  position: relative;
  padding-top: 8rem;
}
.contact-main:after {
  content: "";
  left: 50%;
  top: 0;
  width: 2px;
  background-color: #6B6D6D;
  height: 80px;
  position: absolute;
}
.contact-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
}
.contact-container h4 {
  font-size: 3rem;
  color: black;
}
.contact-main ul {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.contact-main ul li {
  margin-left: 2rem;
  padding-right: 2rem;
  border-right: 2px solid grey;
}
.contact-main ul li:nth-child(2) {
  border-right: 0;
}
.contact-main ul li a {
  font-size: 1.1rem;
  color: black;
}

/* contact ends */
/* heading starts  */
.about-teja-main h2, .services-main h3, .team-main h3, .clients-main h3 {
   color: #6B6D6D;
   font-size: 2rem !important;
   margin: 1rem 0;
   color: black;

}
/* heading ends */
.non-traditional  {
  display: none;
}
.traditional {

}
.what-we-do-manu {
  display: block;
}
.non-traditional {

}
.use {
  color: #FFA500;
}