/* onloading page */
@font-face {
font-family: 'Century_Gothic';
src: url('GOTHIC.ttf');
src: url('CenturyGothic.eot');
    src: url('CenturyGothic.eot?#iefix') format('embedded-opentype'),
        url('CenturyGothic.woff2') format('woff2'),
        url('CenturyGothic.woff') format('woff'),
        url('CenturyGothic.svg#CenturyGothic') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;}

#onloadingPage {
  height: 100vh;
  background-color: #0b0c10;
  color: #c5c6c7;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: 'Roboto', sans-serif;
  position: fixed;
  z-index: 100;
  width: 100vw;
}
.onloadingHeader {
  font-size: 5rem;
}
/* . */
.row {
  margin: 0;
}
/* navigation-bar */
.section-link {
  margin: 0 20px;
  font-size: 1.25rem;
  color: #f8f8f8 !important;
  font-family: Century_Gothic , monospace ;
  font-weight: 500;
}
.navbar-brand {
  font-size: 2rem;
  padding: 0;
  letter-spacing: 6px !important;
  font-family:Century_Gothic;
  font-weight: 400;
}

.navbar {
  padding-left: 10%;
  padding-right: 10%;
  padding-bottom: 0;
  position: absolute;
  width: 100%;
  background: rgba(3, 3, 10, 0.0) !important;
  z-index: 2;
  opacity: 0;
}
li.current .section-link {
  color: #00adb5 !important;
}
li.current {
  border-bottom: 5px solid #00adb5;
}
@media (max-width: 560px) {
  .navbar-brand {
    font-size: 1.2rem;
    padding: 0;
    letter-spacing: 0px;
  }
  .navbar {
    padding-left: 10px;
    padding-right: 0px;
  }
}
/* photo quote */

.header {
 
  position: relative;
  /* The image used */
  background-color: #eeeeee;
  background-image: url("photos/YouTube_Thumbnail.png");
 

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.heading {
  color: white;
  font-size: 32px !important;
  font-family: Century_Gothic,;
  font-weight: 700;
  opacity: 0;
}

.line {
  border: solid #00adb5 4px;
  border-bottom: none;
  width: 80%;
  margin: 0% 0% 10% 0%;
  opacity: 0;
}
.titlecontent {
  opacity: 0;
  font-size: 1rem;
}

/* icon */
.header-links-cont {
  padding-right: 10%;
  text-align: left;
  margin-top: 10%;
}
.header-links {
  display: inline-block;
  border-radius: 60px;
  padding: 0.25em 8px;
  background-color: transparent;
  color: white;
  margin: 0 10%;
}
.header-links {
  transition: 300ms;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.header-links-cont div {
  margin: 0 1%;
}
.header-links-cont div:hover .header-links {
  background-color: #00adb5;
  color: white;
  transform: scaleX(-1);
}

.fab1 {
  font-size: 2rem;
  color: white;
  padding-right: 4%;
  padding-top: 3%;
  cursor: pointer;
  opacity: 0;
}

/* mentor */
@media (max-width: 760px) {
  .mq {
    font-size: 1.5rem !important;
  }
  .men {
    padding: 0%;
    height: 250px;
    border-radius: 5px 5px 0 0;
  }
  
  .men_text {
    font-size: 1rem !important;
  }
  
  .INFO {
    font-size: 0.75rem !important;
    
  }
  
  
}

@media (max-width : 646px){
  .temporaryEdit {
    height: 150px !important;
    width: 125px !important;
   
  }
  .mentor_card {
    width: 125px !important;
    margin:2% !important;
    
  }
  .men_text {
    font-size: 0.75rem !important;
  }
  
  .INFO {
    font-size: 0.5rem !important;
    
  }
  .mq {
    font-size: 1.2rem !important;
  }
  

}
.setupsection{
  text-align: center;
  padding: 4% 15% ;
  background-color: black;
}

.titleMentor {
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  color: #66fcf1;
}
.headerMentor {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: #c5c6c7;
  padding-bottom: 0 !important;
}
.setup-img{
  width: 70%;
}
.setup-content{
  color: white;
  padding: 0 20%;

}
#mentor {
  text-align: center;
  padding: 5% 8%;
  background-color: #0b0c10;
}

.mentor_section {
  padding: 5% 0 1%;
  justify-content: center;
}
.third {
  padding-top: 0;
}
.last {
  padding: 5% 0 1%;
}

.mentor_card {
  width: 100px ;
  margin: 0% 1.66%;
  overflow: hidden;
  position: relative;
  padding: 0%;
  margin-bottom: 2%;
  border-radius: 10px;
  border: 0;
}
.temporaryEdit {
  height: 125px;
  width: 100px;
  overflow: hidden;
  background-size: cover;
}

.men {
  padding: 0%;
  height: 200px;
  border-radius: 5px 5px 0 0;
}

.men_text {
  text-align: center;
  font-size: 0.5rem;
  color: #45a29e;
  font-weight: bold;
  margin: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.INFO {
  text-align: center;
  font-size: 0.4rem;
  color: #c5c6c7;
  margin: 0;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}

.card-body {
  margin: 0;
  border-radius: 0 0 5px 5px;
  padding: 5% 2%;
  background-color: #1f2833;
}

.mentor_quote {
  background-color: #0b0c10;
  color: #c5c6c7;
  text-align: center;
}

.mentor_quote_span {
  color: #45a29e;
  font-size: 2rem;
}
.double-apostrophe {
  color: #45a29e;
  padding: 1%;
}
.mq {
  font-family: "Ubuntu", sans-serif;
  margin: 0;
  font-size: 1rem;
}
/* experimental work */
.img1-experimental{
  float: left;
  width: 40%;
}
.img2-experimental{
  float: right;
  width: 40%;
}
.img3-experimental{
  float: left;
  width: 40%;
}
/* about */

@media (max-width: 768px) {
  .about-heading1 {
    text-align: center;
    padding: 10% auto 3%;
    font-size: 2rem;
    font-weight: bold;
    color: #f8f8f8;
  }
  .about-heading2 {
    color: #66fcf1;
    text-align: center !important;
    font-size: 1rem;
    font-weight: 700;
    margin-left: 45%;
  }

  .about-para {
    font-size: 1rem;
    text-align: center;
    color: #c5c6c7;
    line-height: 1.5;
  }
  .about-heading12 {
    color: #c5c6c7;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
  }

  .about-img {
    padding-top: 10%;
    width: 60%;
  }

  .about-col1 {
    text-align: center;
  }
  .about-col2 {
    padding: 3% 10% 10%;
  }
}

@media (min-width: 768px) {
  .about-heading1 {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
  }
  .about-heading12 {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
  }
  .about-heading2 {
    color: #66fcf1;
    font-family: Montserrat, sans-serif;
    font-weight: 700;
  }

  .about-para {
    font-size: 1rem;
    color: #393e46;
    line-height: 1.5;
    padding-top: 2%;
    color: #c5c6c7;
  }

  .about-img {
    width: 100%;
    padding-top: 20%;
    border-radius: 5%;
  }
  .about {
    padding: 0 10% 0;
  }
  .about-col1 {
    border-right: inset;
    border-width: 6px;
    border-color: #393e46;
    padding-right: 4%;
    padding-left: 0;
    padding-top: 6%;
    padding-bottom: 6%;
  }
  .about-col2 {
    padding: 9% 0 0 2%;
  }
}

.about {
  background-color: #1f2833;
  width: 100%;

  margin-right: 0;
}

/* reels */


.reelsSectionContainer {
  background-color: black ;
  text-align: center;
  color: white;
  padding: 5% 10%;
}
.reelsHeader {
  color: #66fcf1;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}
.reelsTagline {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  margin-bottom: 5%;
  color: white;
}
/* videos */
.introVideo {
  width: 100%;
  border-radius: 20px;
}
.projectVideo {
  width: 90%;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
}
.projectVideo1 {
  background-image: url("photos/videoReel3.jpg");
  background-size: cover;
}
.projectVideo2 {
  background-image: url("photos/videoReel2.jpg");
  background-size: cover;
}
.projectVideo3 {
  background-image: url("photos/videoReel4.jpg");
  background-size: cover;
}
.videoContainer .col-lg-4 {
  padding: 0;
}
.projectSlideHeader {
  margin: 3%;
  font-weight: 700;
  font-size: 2.5rem;
  color: #00adb5;
}
.video1Para,
.video2Para,
.video3Para {
  color: white;
  background-color: rgba(57, 62, 70, 0.5);
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  transform: translateY(200%);
}
.projectVideo:hover div {
  transform: translateY(100%);
}
@media (max-width : 991px){
  .projectVideo2 {
    margin: 2% auto;
  }
  
  .projectVideo3 {
    margin: 2% auto 2% !important;
    
  }
  .projectVideo1 {
    margin: 2% auto 2%;
  }

}
.projectVideo2 {
  margin: auto;
}

.projectVideo3 {
  margin-left: 10%;
}
.videoContainer {
  margin: 0;
  padding: 0;
}
a:hover {
  text-decoration: none;
}
.a {
  text-decoration: none;
}


/* footer  + contact */
#contact {
  background-color: black;
}

.contactsection {
  color: white;
  background-color: black;
  font-family: "Montserrat", sans-serif;
  padding-top: 5%;
}
.Cname {
  padding: 1% 0 0 0;
  font-size: 1rem;
  color: #45a29e;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.contact-heading {
  color: #66fcf1;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  margin: 0;
}
.contact-tagline {
  color: white;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.contact-content{
  margin-top: 3%;
  padding: 0 25%;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1rem;
}
#box {
  height: 200px;
}
.contact-me-content{
  font-size: 1.2rem;

}
.contact-me-content-span{
  font-size: 1.4rem;
}

.contact-me-left{
  margin: 12% 0 0 30%;
  position: relative;
  width: 60%;
  height: auto;
  font-weight: 500;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  background: black;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
  color: white;
  box-shadow: 20px 20px rgb(69 162 158 / 15%);
  transition: all .4s ease;
  padding: 5%;
}
.contact-me-left:hover {
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5% ;
  box-shadow: 10px 10px rgba(69, 162, 158,.25);
}
.contact-me-right{
  padding-bottom: 5%;
  margin: 4% 25% 0;
}
.section1 {
  padding-left: 20%;
  padding-right: 20%;
  text-align: left;
  margin: 1% auto 5%;
  width: 80%;
}

.submitButton {
  margin-top: 3%;
  margin-bottom: 2%;
}
.contactinput {
  width: 100%;
  display: block;
}
.contactMe {
  margin: 5% 0 0;
}

.btn-cont {
  padding-left: 0;
}
.contactMel {
  font-size: 0.8rem;
}

.contactMer {
  float: right;
  font-size: 0.8rem;
}
.leftContactMe {
  padding: 0 0px 0 50px;
}
.submit-button {
  border-color: #00adb5;
  color: #00adb5;
}

.submit-button:hover {
  color: white;
  background-color: #45a29e;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}
@media (max-width : 991px){
  .contact-me-left{
    text-align: center;

  }
  .contact-me-right{
    margin: 0 5%;
  }
  .cl{
    text-align: center;
    padding-right: 20%;
    margin-bottom: 0;
  }

}
@media (max-width : 771px){
  .contact-me-content{
    font-size: 0.7rem;
  
  }
  .contact-me-content-span{
    font-size: 1rem;
  }
  
}


@media (max-width : 996px){
  .footer-links-cont div {
    margin: 0 1%;
    
    padding: 1% 3%;
  }
  .hidden{
    height: 0px;
    width: 0px;

  }
  
  .copyright {
    visibility: hidden;
  }
}
footer {
  background-color: #0b0c10;
  color: white;
  padding: 1.5% 0;
}
.footer-links-cont {
  padding-right: 10%;
  text-align: right;
}
.footer-links {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.25em 8px;
  background-color: #c5c6c7;
  color: black;
  margin: 0 10%;
}
.footer-links {
  transition: 300ms;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.footer-links-cont div {
  margin: 0 1%;
}
.footer-links-cont div:hover .footer-links {
  background-color: #00adb5;
  color: white;
  transform: scaleX(-1);
}
.copyright {
  color: #525964;
  margin: 2% 0 0 22%;
  font-family: Lato, sans-serif;
  font-weight: bold;
}
@media (max-width: 768px){
  .clientsImage{
    width: 40% !important;
    padding-bottom: 5% !important;
  }
  .clientinfohead{
    font-size: 1.2rem !important;
    text-align: center;
  }
  .clientsInfo{
    
    font-size: 0.85rem;
    text-align: center;
  }

}
.clients{
  background-color: #0b0c10;
  text-align: center;
  color: white;
  padding: 2% 10% 2%;
}
.clientsHeader{
  color: #66fcf1;
  font-family: Montserrat, sans-serif;
  font-weight: 700;
}
.clientsTagline {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;

  color: #eeeeee;
}

.clientsInfocol{
  padding :0 ;
  text-align: left;
}
.clientsImagecol{
  padding: 0;
}

.clientsImage{
  margin-top: 5%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}
.clientinfohead{
  font-weight: 500;
  color: #45a29e;
}
.clientsInfo{
  color: #eeeeee;

}




/* setup */

.modify{
 padding: 5% 8% 2% 2%;
}

.setup-content{
  padding: 5% 1% 5%;
  color: #f8f8f8;
  font-size: 1rem;
  text-align: left;

  
}

.setup-img{
  height: 100%;
  width: 100%;
  
}

.setup-heading{
  background-color: black;
  text-align: center;
  padding-top: 8%;
}

@media (max-width: 768px){
  
  .setup-content{
    text-align: center;
  }

  .scam{
    font-size: 1rem !important;
  }

}

@media (max-width: 991px){
  .scam{
    text-align: center;
    font-size: 1.5rem;
  }
  .soft-quote1{
    font-size: 2rem !important;
  }
  .softlist{
    padding: 1% 15% 4% !important;
  }
  .soft-quote{
    padding-bottom: 5% !important;
  }
}


.softwares{
  background-color:black;
}

.softdiv{
  text-align: center;
  padding-top: 5%;
}



.soft-quote{
  text-align: center;
  padding: 4% 4% 8% 8%;
  
}

.soft-quote1{
  font-weight: bold;
  font-size: 3.5rem;
  color: #eeeeee;
}

.softlist{
  padding: 2% 15% 7% 25%; 
}

.elem{
  padding: 1%;
}

.softelem{
  font-size: 1.3rem;
  text-align: left;
  color: #f8f8f8;
  
  margin: 8px 8% 0 0;
}

.softlogo{
  border-radius: 10%;
  height: 40px;
  width: 40px;
  margin-right: 4%;

}



.trailer, .trailer2 , .trailer3 , .trailer4, .trailer5 , .trailer6 ,.trailer7, .trailer8 , .trailer9{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: 10000;
  background: rgba(0, 0,0,0.95);
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;


}
.close-button{
  position: fixed;
  top:10%;
  right: 10%;
  display: none;
  z-index: 10001;
  cursor: pointer;
}

.close-button i{
  font-size: 3rem;
}
.trailer video , .trailer2 video, .trailer3 video ,.trailer4 video , .trailer5 video, .trailer6 video , .trailer7 video , .trailer8 video, .trailer9 video{
  position: relative;
  max-width: 900px;
  outline: none;
}

@media (max-width:991px){
  .trailer video , .trailer2 video, .trailer3 video ,.trailer4 video , .trailer5 video, .trailer6 video , .trailer7 video , .trailer8 video, .trailer9 video{
    max-width: 90%;

  }
  
}

.play , .play2 , .play3 , .play4 , .play5 , .play6 , .play7 , .play8 , .play9{
  width: 90%;
  cursor: pointer;
  border: #eeeeee solid 1px;
  border-radius: 10px;
}

.worktop{
  padding-bottom: 2%;
}

.workmiddle{
  padding: 2% 0;
}

.worklast{
  padding-top: 2%;
}

.experiment{
  background-color: #0b0c10 !important;
  padding: 4% 8%;
}

.photo1{
  width: 100%;
}

.photo2{
  width: 100%;
}

.photo1 , .photo2{
  margin: 2%;
}
.photo3{
  width: 112.5%;
  height: 96.7%;
  margin: 2%;
}
@media (max-width:750px){
  .photo3{
    width: 99%;
  }
}