/* css variable
 background-color: var(--my-white-background-color);
 
 Dark Background::
 background-color: var(--my-background-color);
 color: var(--my-text-color);
 color: var(--my-text-color-darker);

*/


:root {
  --my-background-color : #031c2b;
  --my-white-background-color : #cfd6e7;
  --my-text-color:  #e5d7d7; 
  --my-text-color-darker:  #534646; 
  --background-color-on-code-snippets: #2f3841;
 
}


body {
  font-family: "Rajdhani";
  /* font-style: italic; */
  /* font-optical-sizing: auto; */
  font-weight: 400;
  /* font-style: normal; */
  margin-right: none;
  background-color: var(--my-white-background-color);
}


article {
  text-align: left;
  color: #9b9797;
}

.btn {
  /* background-color: #052a3f; */
  background-color: var(--my-background-color);
  margin-top: 1.2%;
  
}

a {
  /* color: var(--my-text-color-darker); */
  color: var(--my-background-color);
  text-decoration: none !important;
}

a:hover {
  color: #2174b4;
  text-decoration: none !important;
}



/* Navbar */


#navbarIndex{
  background-color: var(--my-background-color);
  padding: 0%;
  margin-right: 0%;
}

.navbar-brand{
  color: rgb(192, 213, 213);
  font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  font-size: 1.8rem;
}




/* Modify the background color */
.navbar-custom {
  /* background-color: #87b3cc; */
  background-color: var(--my-background-color);
}

.navbar-custom .navbar-brand {
  color: #efe7e7;
}

.navbar-custom .navbar-text {
  color: #f4e9e9;
  
}

/* Set the border color */

.custom-toggler.navbar-toggler {
  border-color: #0e3458;
  color: #b8cdd8;
  
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(239, 231, 231, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-item :active {
  color: #8e99a3;
}

.nav-link {
  color: #b9b9c7;
  font-size: 1.2em;
}

.dropdown-menu{
  background-color: var(--my-white-background-color);
}
.dropdown-item{
  color: #363739;
  font-size: 1.2em;

}
.dropdown-item:hover {
  color: #111315;
  background-color: #b1bed2;
}






/* Text after navabar */



#textInSoftwareDevelopmentIntroduction {
  background-color: var(--my-background-color);
}

#textInSoftwareDevelopmentIntroduction p {
  font-size: 1.2em;
  color: #f0f0f5;
}

#textInSoftwareDevelopmentIntroduction h1{
 text-align: center;
 padding-top: 1%;
 padding-bottom: 1%;
}


#textInVisionSystem {
  background-color: var(--my-background-color);
}

#textInVisionSystem p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}

#textInVisionSystem2 {
  background-color: var(--my-background-color);
  margin-top: 0%;
  margin-bottom: 0%;
}

#textInVisionSystem2 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}

#textInVisionSystem3 {
  background-color: var(--my-background-color);
}

#textInVisionSystem3 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}

#textInVisionSystem4 {
  background-color: var(--my-background-color);
}

#textInVisionSystem4 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}

#textInVisionSystem5 {
  background-color: var(--my-background-color);
}

#textInVisionSystem5 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}
#textInVisionSystem6 {
  background-color: var(--my-background-color);}

#textInVisionSystem6 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}
#textInVisionSystem7 {
  background-color: var(--my-background-color);
}

#textInVisionSystem7 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}
#textInVisionSystem8 {
  background-color: var(--my-background-color);
}

#textInVisionSystem8 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}
#textInVisionSystem9 {
  background-color: var(--my-background-color);
}

#textInVisionSystem9 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}
#textInVisionSystem10 {
  background-color: var(--my-background-color);
}

#textInVisionSystem10 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}
#textInVisionSystem11 {
  background-color: var(--my-background-color);
}

#textInVisionSystem11 p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}

#textInWebDesign {
  background-color: var(--my-background-color);
}

#textInWebDesign p {
  font-size: 1.2em;
  /* color: #f0f0f5; */
  color: var(--my-text-color);
}

main {
  background-color: var(--my-background-color);
  padding-top: 25%;
}

.automationsTab {
  margin-left: 2%;
}

#photosUnderIntroductionSoftwareDevelopment {
  background-color: var(--my-background-color);
  padding-top: 2%;
}

#photosUnderSoftwareDevelopmentRunVisionSystem {
  background-color: var(--my-background-color);
  padding-top: 2%;
  padding-bottom: 2%;
}

.photosUnderSoftwareDevelopmentRunVisionSystem {
  background-color: var(--my-background-color);
  padding-top: 2%;
  padding-bottom: 2%;
}

#photosUnderSoftwareDevelopmentRunVisionSystem2 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}

#photosUnderSoftwareDevelopmentRunVisionSystem3 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem4 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem5 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem6 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem7 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem8 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem9 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem10 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}
#photosUnderSoftwareDevelopmentRunVisionSystem11 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}

#photosUnderSoftwareDevelopmentWebDesign {
  background-color: var(--my-background-color);
  padding-top: 2%;
}

#videoUnderDescription {
  background-color: #ffffff;
  padding-top: 3%;

}

#videosUnderDescriptionTensorflow {
  background-color: #ffffff;
  margin-top: 2%;
}

.videoUnderDescription {
  background-color: #ffffff;
  color: #ffffff;
  padding-top: 8%;
  margin-bottom: 2%;
}

#photosUnderDescription2 {
  background-color: var(--my-background-color);
  padding-top: 2%;
}

#photosUnderDescription {
  background-color: #ffffff;
  margin-top: 2%;
}

#photosUnderDescription2 {
  background-color: #ffffff;
}

#photosUnderDescriptionRobotics {
  background-color: #ffffff;
  margin-top: 2%;
}

#photosFourWheelsRobot {
  background-color: #ffffff;
  margin-top: 2%;
}

.btn {
  background-color: var(--my-background-color);
  margin-top: 1.2%;
  border-color: #142647;

}

.btn:hover{
  /* background-color: #060606; */
  background-color: var(--my-background-color);
  color: #e4662b;
}

.navbar {
  background-color: var(--my-background-color);
}

img {
  margin-top: 0.1%;
  margin-bottom: 2%;
  transition: all 2s, transform 0.5s, box-shadow 0.5s;
  border-radius: 3%;
}

img:hover {
  box-shadow: 6px 6px 20px rgba(0, 0, 0, 0.6);
  transform: scale(1.01);
}

img:focus {
  box-shadow: 12px 12px 25px rgba(0, 0, 0, 0.7);
  width: 86%;
  transform: none;
}

footer {
  /* background-color: #f0f0f5; */
  background-color:  var(--my-white-background-color);
  text-align: center;
  font-size: 1em;
  padding-bottom: 0.5%;
}

footer a{
  color: var(--my-background-color);
}

#linkedInFooter {
  margin-left: 2%;
  margin-right: 2%;
}

.bi {
  margin-top: 1%;
}
h1 {
  font-size: 1.7em;
  /* color: #ffffff; */
  color: var(--my-text-color);
  padding-bottom: 0.5%;
}

h2 {
  font-size: 1.4em;
  /* color: #ffffff; */
  color: var(--my-text-color);
  padding-bottom: 0.5%;
}

.heading2inAutomations {
  margin-left: 1%;
  margin-right: 5%;
}

.embed-responsive {
  margin-bottom: 2%;
}
/* 
.btn a {
  color: #f0f0f5;
} */

.selectCode{

  display: block;
  width: 100%;
  height: 50px;
  padding: 15px;
  border: 2px solid lightgrey;
  background-color: #15181F;
  /* color: white; */
  color: var(--my-text-color);
  white-space: pre;
}


.pre {
  text-align: left;
  font-size: 1.0em !important;
}


.description-under-the-photo{
  text-align: center;
  margin-left: 0%;
  color: #efe7e7;
}

code{
  background-color: var(--background-color-on-code-snippets)!important;
  border-radius: 2%;
  
}

/* .description-under-the-photo-home{
  text-align: center;
  margin-left: 38%;
  color: #efe7e7;
} */

/* a {
  color: #efe7e7;
} */


#carouselSoftwareDevelopment{
  padding-top: 3%;
  background-color: var(--my-background-color);
  padding-bottom: 3%;
}

#carouselSoftwareDevelopment p{
  text-align: center;
}


.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='var(--my-text-color-darker)' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
  background-color: #f0f0f5; 
}
 
 .carousel-control-next-icon {
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='var(--my-text-color-darker)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   background-color: #f0f0f5; 
   padding-bottom: 0%;
  }



  #carouselWebDesign{
    padding-top: 2%;
    background-color: var(--my-background-color);
    margin: 0%;
  }
  
  #carouselWebDesign p{
    text-align: center;
    color: var(--my-white-background-color);;
  }



  /* Expanded Paragraphs */

  #details {
    display: none;
    margin-top: 10px;
}
#details img {
    max-width: 100%;
    height: auto;
}




/* Waved borders */

.wave {
  position: relative;
  width: 100%;
  height: 60px;
  /* background: #052a3f; */
  background: var(--my-background-color);
}
.wave::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  /* background: white; */
  background: var(--my-white-background-color);
  border-radius: 20% 50% 30% 30% / 20px 10px 0px 0px;
}




.wave2 {
  position: relative;
  width: 100%;
  height: 60px;
  /* background: white; */
  background: var(--my-white-background-color);
}
.wave2::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background: var(--my-background-color);
  border-radius: 60% 0% 0% 0% / 20px 0px 20px 60px;
}




/* Animation Software Development */

#typewriter{
  font-family: "Rajdhani";
  text-align: center;
  overflow: hidden;
  font-size: 2em;

}

.hidden {
  visibility: hidden;
}


/* Animation Vision System */

#typewriter2{
  font-family: "Rajdhani";
  text-align: center;
  overflow: hidden;
  font-size: 2em;

}

.hidden2 {
  visibility: hidden;
}



/* Animation Vision System */

#typewriterWebDesign{
  font-family: "Rajdhani";
  text-align: center;
  overflow: hidden;
  font-size: 2em;

}

.hiddenWebDesign {
  visibility: hidden;
}