body{

  background: rgb(56, 56, 56);
}




/* navbar styles */


.navbar{

  background-color: black;
}

.navbar-custom .nav-link {
  font-size: 1.5rem; /* Adjust the font size as needed */
  font-family: 'Keania One', cursive;
}

.navbar-brand{

  font-size: 2rem;
  font-family: 'Keania One', cursive;
  padding-left: 2rem;
}

.navbar-nav{

  margin-left: 20%;
}

.nav-item{

  margin-left: 5%;
}

.navbar-custom {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #000000; /* Dark background color */
  color: #fff; /* Text color */
}


/* footer styles */


.footer{
  font-family: 'Keania One', cursive;
  font-size: 1.2rem;
}

.footer-brand{

  font-size: 2.5rem;
}



/* slides */

.slide_1 {
  position: relative;
  width: 100%;
  height: 100vh;
  /* background: url('/images/slide_1.jpg') center/cover no-repeat; Set your background image here */
  background: url('https://cdn.jsdelivr.net/gh/ProjectV103/Project-V-Public/public/images/slide_1.jpg') center/cover no-repeat; ;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255); /* Text color */
  font-size: 24px; /* Text font size */
  padding-left: 10%;
  padding-right: 10% ;
}

.slide_1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.795); /* Adjust the alpha (fourth value) for transparency */
}


  /* Style for .slide_2 container */
  .slide_2 {
    position: relative;
    width: 100%;
    height: 100vh;
    /* background: url('/images/slide_2.jpg') center/cover no-repeat; Set your background image here */
    background: url('https://cdn.jsdelivr.net/gh/ProjectV103/Project-V-Public/public/images/slide_2.jpg') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    color: rgb(255, 255, 255); /* Text color */
    font-size: 24px; /* Text font size */
    padding-left: 10%;
    padding-right: 10% ;
    padding-top: 100px;
  }

  .slide_2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.795);
    }



.slide_text{

  z-index: 10;
  font-size: 4rem;
  display: block;
  font-family: 'Keania One', cursive;
}


/* Media query for screens smaller than 768px (e.g., smartphones) */
@media (max-width: 767px) {
  .slide_text {
      font-size: 2rem; /* Adjust the font size for smaller screens */
  }
}

/* Media query for screens between 768px and 992px (e.g., tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  .slide_text {
      font-size: 3rem; /* Adjust the font size for tablets */
  }
}

/* Media query for screens larger than 992px (e.g., desktops) */
@media (min-width: 1130px) {
  .slide_text {
      font-size: 4rem; /* Keep the default font size for desktops */
  }
}



.dark-button{
  z-index: 5;
}
/* 
carousel */

.container-carousel {
  height: 600px; /* Adjust the height as needed */
  
}

/* Style for the images */
.my-slider img {
  width: 100%; /* Allow images to take the full width of their container */
  height: auto; /* Automatically adjust the height to maintain aspect ratio */
}


/* .my-slider{
  padding-left: 20%;


} */

.container-carousel a {

  display: block;
}



h1 {
  text-align: center;
  padding-bottom: 15px;
  font-family:'Keania One', cursive;
  color:white;
}
.control {
  list-style: none;
}
.control li {
  position: absolute;
  z-index: 9;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 12px 20px;
  border-radius: 50%;
  cursor: pointer;
}
.control li:hover {
  background: #000;
}
.control li.prev {
  left: 70px;
}
.control li.next {
  right: 120px;
 
}





/* Media query for screens smaller than 768px (e.g., smartphones) */
@media (max-width: 767px) {
  .container-carousel {
      
    height: 400px; /* Adjust the height for smaller screens */
  }



  .my-slider img {
    width: 90%; /* Allow images to take the full width of their container */
    height: 300px; /* Automatically adjust the height to maintain aspect ratio */
    margin-left: 7%;
    margin-right: 7%;
    /* max-width: 420px; */
  }
  

  .container-carousel {
    position: relative;
    margin-top: 3%;
    margin-left: 70%;
    
  }

  .control li.prev{

    
      left: 10px; /* Adjust the left position for smaller screens */
      font-size: 1.5em; /* Adjust the font size for smaller screens */
    
  }
  .control li.next {

    right: 10px; /* Adjust the right position for smaller screens */
    font-size: 1.5em; /* Adjust the font size for smaller screens */
  }
  
}

/* Media query for screens between 768px and 992px (e.g., tablets) */
@media (min-width: 768px) and (max-width: 991px) {
  .container-carousel {
      height: 600px; /* Adjust the height for tablets */
  }

  .my-slider img {
    width: 90%; /* Allow images to take the full width of their container */
    height: auto; /* Automatically adjust the height to maintain aspect ratio */
  }
  
}

/* Media query for screens larger than 992px (e.g., desktops) */
@media (min-width: 1130px) {
  .container-carousel {
      height: 500px; /* Keep the default height for desktops */
  }

  .my-slider img {
    width: 90%; /* Allow images to take the full width of their container */
    height: 300px; /* Automatically adjust the height to maintain aspect ratio */
  }
  
}

.container-carousel {
  position: relative;
  margin-top: 3%;
  margin-left: 5%;
  margin-right: 5%;
  overflow: hidden; /* Add this to prevent images from overlapping */
}


/* .carousel-anchor{

  margin: 50px 50px;
} */



.tns-nav {
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}
.tns-nav button {
  height: 13px;
  width: 8px;
  background-color: #a5a5a5;
  border: none;
  margin-left: 7px;
  border-radius: 50%;
}
.tns-nav .tns-nav-active {
  background-color: black;
}
/* .scale{
  animation-name: scale;
  transform-origin: center
}
@keyframes scale{
  from {
    transform: rotate(90deg);
  }
  to{
    transform: rotate(0deg);
  }
} */


.link i {
  padding-left: 7px;
}

.link:hover {
  text-decoration: underline;
  background-color: black;
}




/* change inner */




/* features based styles */
.feature-container {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
} 

input, select, button {
    margin: 10px;
    padding: 5px;
}

 .feature_download_link {
    display: none;
    margin-top: 10px;
} 

#mode {
  display: none;
}


fieldset {
  border-radius: 5px;
  width: max-content;
  border: 1px solid #D4D4D5;
  display: inline-block;
  color: white;
  background-color: rgb(20, 18, 18);
  margin-top: 1em;
  margin-bottom: 1em;
  }

.time_input{
  background-color: white;
display: inline-flex;
border: 1px solid #ccc;
color: #555;
width :90px;
}


.capture-button{

  margin: 0px;
  margin-left: 34%;
  /* background-color: rgb(49, 49, 49);
  color: rgb(255, 255, 255); */
  border-radius: 20px;
  border: 2px solid rgb(20, 20, 20);
  /* padding: 0.7em 1em; */
  

}

/* .capture-button:hover{

  background-color: rgb(255, 255, 255)  ;
  color: rgb(49, 49, 49);
  transition: 0.7s;

} */




/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  margin-left: 1em ;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
} 


.switch-container{

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border: rgb(117, 117, 117) solid 1px;
  border-radius: 20px;
  padding: 1em;
  background-color: rgb(20, 18, 18);
  color: white;
}

#outputFormat{

  background-color: rgb(20, 18, 18);
  color: white;
}

#videoInput{

  padding: 1rem;
  width: 17rem;
  height: 5rem;
  border: rgb(117, 117, 117) solid 1px;
  border-radius: 20px;
  background-color: rgb(20, 18, 18);
  color: white;
}

fieldset{

  border-radius: 20px;

}

.trim-time-container{

  flex-direction: row;
    justify-content: space-between;
    border: rgb(117, 117, 117) solid 1px;
    border-radius: 20px;
    padding: 1em;
    background-color: rgb(41, 39, 39);
    margin: 2em 1em;
}

#outputName{

  border: rgb(117, 117, 117) solid 1px;
  border-radius: 20px;
  height: 2rem;
  width: 15rem;
}






/* critical */

p {
    color: rgb(255, 255, 255); 
  }
  

.center-container{

  position: relative;
  width: 100%;
  height: 100vh;
 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgb(255, 255, 255); /* Text color */
  font-size: 24px; /* Text font size */
  padding-left: 10%;
  padding-right: 10% ;

}

.hidden{

  display: none;
}


.videoContainer{

  max-width: 60%;
  max-height: 40%;
}

/* overlay */

.container-carousel {
  position: relative;
}

.loading-overlay {
  text-align: center;
  border-radius: 20px;
  font-size: 65%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(19, 18, 18, 0.8);/* Semi-transparent white background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8; /* arrow on 9  so 8 or 10*/
}



/* Sign in  google button*/

.google-sign-in-button {
  display: block;
  margin-left: 40%;
 
  cursor: pointer;
  transition: background-color .3s, box-shadow .3s;
      
  padding: 12px 16px 12px 42px;
  border: none;
  border-radius: 3px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
  background-color: white;
  background-repeat: no-repeat;
  background-position: 12px 11px;
}

.google-sign-in-button:hover {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
  background-color: rgb(0, 0, 0);
  color: white;
}

.google-sign-in-button:active {
  background-color: #eeeeee;
}

.google-sign-in-button:active {
  outline: none;
      box-shadow: 
      0 -1px 0 rgba(0, 0, 0, .04),
      0 2px 4px rgba(0, 0, 0, .25),
      0 0 0 3px #c8dafc;
}

.google-sign-in-button:disabled {
  filter: grayscale(100%);
  background-color: #ebebeb;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
  cursor: not-allowed;
}


@media (max-width: 767px) {
 
 
  .google-sign-in-button{

    margin-left: 30%;
    margin-right: 30%;
  }
  
}

a{
  text-decoration: none;
}

/* other sign in elements */

.btn{
  min-width: 5.5em;
}

.divLine {
  display: flex;
  flex-direction: row;
}
.divLine:before, .divLine:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid;
  margin: auto;
}
.divLine:before {
  margin-right: 10px
}
.divLine:after {
  margin-left: 10px
}

.member-card{
  display: flex;
  flex-direction: column;
  align-items: start;
}