* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
    'Lucida Sans', Arial, sans-serif;
    overflow-x: hidden;
    
}

/* Top navbar for all pages */
.container-brand {  
  position: fixed;
  width: 100vw;
  z-index: 3;
  font-size: 1rem;
  text-wrap: wrap;
}

nav {
  height: 80px;
  background: hsl(113, 100%, 50%);
  text-wrap: wrap;
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 0rem calc((100vw - 1300px) / 2);
         
  
}

.firstnav {
  height: 30px;
  background: hsl(113, 100%, 50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0rem calc((100vw - 1300px) / 2);
  text-wrap: wrap;
}

.logo {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: bold;
  font-style: italic;
  padding: 0 2rem;
  text-wrap: wrap;

}
.logo2 {
  text-decoration: none;
  color: #ffffff;
  padding: 0 1.5rem;
  text-wrap: wrap;
}


nav a {
  text-decoration: none;
  color: #ffffff;
  padding: 0 10px;
  margin: 0 10px;
  text-wrap: wrap; 
  text-align: center;
}

nav a:hover {
  color: #fff;
  text-wrap: wrap;
}

@media screen and (max-width: 768px) {
  .container-brand {  
    position: fixed;
    width: 100vw;
    z-index: 4;
    font-size: .5rem;
    text-wrap: wrap; 
  }
  .logo {
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    font-style: italic;
    padding: 0 2rem;
    text-wrap: wrap;
  }


} 

/* End Navbar */

/*Index Page Start*/
.hero {
  background-color: #8cb2bc;
  height: 100vh;
  overflow: hidden;
  text-wrap: wrap;
  
}

.start {
  position: relative;
  z-index: 2;
  top: 40vh;
  text-wrap: wrap;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.start2 {
  position: absolute;
  z-index: 2;
  top: 50vh;
  color: #fff;
  text-wrap: wrap;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  overflow: hidden;
}

.start3 {
  position: fixed;
  top: 30%;
  left: 0%;
  z-index: 3;
  color: #fff;
}

.carousel {
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
}
.car{
width: 100vw;
  height: 100vh;
  overflow: hidden;
  filter: contrast(25%);
}


.dom{
  width: 100%;
   height: 100%;
   overflow: hidden;
   object-fit: contain;
   padding: 0%;
   margin: 0%;
   object-position:  center;
   
 }

 .hero-container3 {
  background-color: #8cb2bc;
  display: grid;
  height: fit-content;
  color: rgb(237, 97, 97);
  
  
  }
  

  .hero2 {
    background: hsl(189, 83%, 44%);
    
  }
  

  .over {
    position: relative;
    z-index: 2;
    background-color: #000000;
    color: #ffffff;
    bottom: 100%;
    opacity: 0%;
    height: 100%;
    text-align: center;
    align-content: center;
    
    }



  
  
  .p-3 {
  width: auto;
  height: 400px;
  overflow: hidden;
  border-radius: 20%;
  
  }

  iframe {
    position: absolute;
    z-index: 2;
    margin-top: 10vh;
    height: 60vh;
    width: 100%;
  }


  .fix {
    padding-left: 35%;
    height: 100vh;
    width: 100%;
  }

  @media screen and (max-width: 768px) {
    .hero2 {
      height: fit-content;
    }
  
    .fix {
      padding-left: 10%;
      height: 100vh;
      width: fit-content;
    }
  
  
  } 
/* Index Page End*/









/* About Page Start */




/* About Page End */












/* Contact Page Start */


.startx5 {
  position: absolute;
  z-index: 3;
  color: #fff;
  text-wrap: wrap;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  overflow: hidden;
  top: 75%; 
    
  left: 10%;
}

.startx6 {
  
  position: absolute;
  z-index: 3;
  color: #fff;
  text-wrap: wrap;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  overflow: hidden;
  top: 75%;
  left: 50%;
}
  
@media screen and (max-width: 768px) {

  .startx5 {
    position: absolute;
    z-index: 3;
    color: #fff;
    text-wrap: wrap;
    text-align: center;
    padding-left: 10%;
    padding-right: 10%;
    overflow: hidden;
    top: 75%;
    
  }

} 



/* Contact Page End */
















/* Fourth Page Start */






/* Fourth Page End */
















/* Fifth Page Start */






/* Fifth Page End */



















/* Portfolio Edits Start */






/* Portfolio Edits End */






/* Multi-Page Modifications Start */


.hero-containerx2 {
  background-color: #8cb2bc;
  display: grid;
  height: 100vh;
  color: rgb(237, 97, 97);
  overflow: hidden;
  
}

.herox2 {
  background: #e2e6e7;
  height: 100vh;
  overflow: hidden;
  text-wrap: wrap;
  
}

.hero-containerx3 {
  background-color:#bdb3af;
  display: grid;
  height: 100vh;
  color: rgb(237, 97, 97);
  overflow: hidden;
  
}

.startx {
  position: relative;
  z-index: 2;
  top: 40%;
  text-wrap: wrap;
  overflow: hidden;
  text-align: center;
}

.startx2 {
  position: relative;
  z-index: 1;
  color: #fff;
  text-wrap: wrap;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  overflow: hidden;
}

.startx4 {
  position: relative;
  z-index: 3;
  color: #fff;
  text-wrap: wrap;
  text-align: center;
  padding-left: 10%;
  padding-right: 10%;
  overflow: hidden;
  top: 80%;
}

.col {
  overflow: hidden;
  }
  
  
  
  .row {
  overflow: hidden;
  }

  @media screen and (max-width: 768px) {


  } 
  
  

/*  Multi-Page Modifications End */









/* Multi-Page Images/Vids Start */


.startxx {
  justify-self: center;
  height: 80%;
  margin-top: 7.5%;
}

@media screen and (max-width: 768px) {

  .startxx {
    justify-self: center;
    
  height: 80%;
  margin-top: 7.5%;
  }

} 

/* Multi-Page Images/Vids End */













/* Modal Start */



button {
  padding: 1rem 3rem;
  font-size: 1rem;
  border: none;
  width: 12%;
  color: #fdcc04;
  background: #000;
  cursor: pointer;
  border-radius: 50px;
}

button:hover {
  background: #fff;
  color: #000;
}


.form {
  background-color: rgb(118, 143, 216);

}

.modal { 
  overflow-y: hidden;
}
@media screen and (max-width: 768px) {
  button {
    padding: 1rem 3rem;
    font-size: .5rem;
    border: none;
    color: #fdcc04;
    background: #000;
    cursor: pointer;
    border-radius: 50px;
    width:30%;
  }

} 

/* Modal End */














/* Footer Start */

.hero6{
  z-index: 2;
  color: #ffffff;
  text-wrap: wrap;
  
  font-style: italic;
  text-decoration: none;
  background-color: #0e2227;

}

.hero6 a {
  color: #fff;
  text-wrap: wrap;
  text-decoration: none;
}

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

@media screen and (max-width: 768px) {


} 



/* Footer End */

 

.x {
  position: absolute;
  padding-right: 50%;
  margin-top: 15vh;
  
}

      .project-container {
        position: relative;
        overflow: hidden;
        min-height: 200px;
        background: rgba(0, 0, 0, 0.3);
      }