@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 120px;
  height: 120px;
  background: url("assets/loading.gif") center;
  background-size: contain;
  background-repeat: no-repeat;
  margin: -76px 0 0 -76px;
  background-color: #0d0d0d;
}



/* Add animation to "page content" */
.animate-bottom {
  position: absolute;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0
  }

  to {
    bottom: 0px;
    opacity: 1
  }
}

@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}

#myDiv {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  color: #b9b9b9;

}


html {
  scroll-behavior: smooth;
}

body {
  background-color: #0d0d0d;
  color: white;
  width: 100%;
}

.header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 3;
  background-color: rgb(4, 5, 22);
  padding: 10px 40px;
  display: flex;
  justify-content: space-between !important;
  align-items: center;
  box-shadow: 0 0 15px hsla(0, 0%, 42%, 0.953) !important;

}



/* Hide the link that should open and close the topnav on small screens */
.header .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav li a {
    display: none;
  }

  .header a.icon {
    float: right;
    display: block;
    padding: 10px;
    color: white;
  }

  .header a.icon:active {
    float: right;
    display: block;
    padding: 10px;
    color: #FF00FC;
  }

  .header a.icon:hover {
    float: right;
    display: block;
    padding: 10px;
    color: #FF00FC;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav {
    position: absolute;
  }

  .responsive {
    box-shadow: 0 0 15px #010f46a6;
    transition: 0.8s;
    position: absolute !important;
    background: inherit;
    border-radius: 15px;
    padding: 10px;
    bottom: -140px;
    right: 35px;

  }

  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;

  }
}


.menu {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-item {
  list-style: none;
}

.menu-item a:hover {
  transition: 0.6s;
  color: #FF00FC;

}

.menu-item a:active {
  transition: 0.6s;
  color: #FF00FC;

}

.menu-item a {
  transition: 0.6s;
  color: white;
  margin: 0 2px;
  padding: 5px 10px;
  text-decoration: none;
}

.brand {
  display: flex;
  justify-content: start;
  /* max-width: 40%; */
}

.logo {
  padding: 5px;
  width: 100px;
}

.dots-section {
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 600px) {
  .logo {
    width: 90px;
  }

  /* Caption Info */
  .Info {
    color: #b9b9b9;
    font-size: 16px;
    padding: 10px 10px !important;
    position: relative;
    bottom: 190px !important;
    width: 100%;
    text-align: center;
    z-index: 2;
  }
}


/* Slideshow container */
.slideshow-container {

  /* max-width: 1000px; */
  position: relative;
  margin: auto;
  height: 500px;
}

/* Slideshow container */
.overlay {
  position: absolute;
  width: inherit;
  /* Full width (cover the whole page) */
  height: inherit;
  /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 3, 26, 0.705);
  /* Black background with opacity */
  z-index: 1;
  /* Specify a stack order in case you're using a different order for other elements */
}

/* Make the images invisible by default */
.Containers {
  display: none;
}

.Containers img {
  height: 500px;
  object-fit: cover;
}

/* forward & Back buttons */
.Back,
.forward {
  cursor: pointer;
  position: absolute;
  top: 48%;
  width: auto;
  margin-top: -23px;
  padding: 17px;
  color: grey;
  font-weight: bold;
  font-size: 19px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
  z-index: 2;
}

/* Place the "forward button" to the right */
.forward {
  right: 0;
  border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity */
.Back:hover,
.forward:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption Info */
.Info {
  color: #b9b9b9;
  font-size: 16px;
  padding: 10px 180px;
  position: relative;
  bottom: 140px;
  width: 100%;
  text-align: center;
  z-index: 2;
}

/* Caption Info */
.dots-container {
  position: relative;
  top: -50px;
  z-index: 2;
}

/* Worknumbering (1/3 etc) */
.MessageInfo {
  color: #f2f2f3;
  font-size: 14px;
  padding: 10px 14px;
  position: absolute;
  top: 0;
}

/* The circles or bullets and indicators */
.dots {
  cursor: pointer;
  height: 12px;
  width: 12px;
  margin: 0 3px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable,
.dots:hover {
  background-color: #717161;
}

/* Faint animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {
    opacity: .5
  }

  to {
    opacity: 2
  }
}

@keyframes fade {
  from {
    opacity: .5
  }

  to {
    opacity: 2
  }
}


.space {
  margin: 30px;
}

/* ------- Service Section -------------------- */
.section {
  scroll-margin-top: 5.2rem;
  margin-top: 50px !important;

}

.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

h1 {
  margin: 5px;
  font-size: large;
  font-weight: 400;
  color: rgb(219, 219, 219);
  text-align: center;

}

.services {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
  padding: 20px;
  justify-content: center;
}

.service-container {
  max-width: 300px;
  margin: 10px;
  background-color: black;
  padding: 20px;
  border-radius: 30px;
  font-size: small;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.service-container .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.service-container .icon i {
  color: white;
  padding: 5px;
}

.service-container .icon p {
  color: white;
  padding: 5px;
}

.contact-container {

  max-width: 300px;
  margin: 10px;
  background-color: black;
  padding: 20px;
  border-radius: 30px;
  font-size: small;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px auto 0 auto;

}

.contact-container .icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-container .icon i {
  color: white;
  padding: 5px;
}

.contact-container .icon p {
  color: white;
  padding: 5px;
}

p {
  text-align: center;
}

.pinned-container {
  box-shadow: 0 0 15px #010f46a6;
  background: rgb(29, 29, 29);
  padding: 15px;
  position: fixed;
  z-index: 3;
  top: 310px;
  border-radius: 0 10px 10px 0;
  display: flex;
  flex-direction: column;
}

.pinned-container i {
  transition: 0.8s;
  border-radius: 30px;
  padding: 3px;
  size: 20px;
  transform: scale(1.5, 1.5);
  background-color: white;


}

.pinned-container .facebook i {

  margin-bottom: 20px;
  color: rgb(0, 60, 255);

}

.pinned-container .facebook i:hover {
  transition: 0.8s;
  background-color: rgb(36, 87, 255);
  color: white;

}

.pinned-container .instagram i {
  color: #d62976;

}

.pinned-container .instagram i:hover {
  transition: 0.8s;
  background-color: #d62976;
  color: white;

}



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

  .details {
    margin: 10px 50px !important;

  }

  .about-img {
    object-fit: cover;
    height: 280px;
    width: 250px !important;
    margin: 20px;
    border-radius: 30px;
    border: 2px solid white;
  }
}

.about-img {
  object-fit: cover;
  height: 280px;
  width: 400px;
  margin: 20px;
  border-radius: 30px;
  border: 2px solid white;
}



hr {

  width: 90%;
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}


form {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

input,
textarea {
  padding: 20px;
  margin: 10px;
  border-radius: 10px;
  width: 70%;
  background-color: inherit;
  border: 1px solid gray;
  color: white;
  margin: auto auto;

}

form label {
  padding: 8px;
  width: 70%;
  color: white;
  margin: auto auto;

}

input,
textarea:focus {
  border: 1px solid rgb(238, 238, 238);
  outline: none;


}

.form-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 10px;

}

.submit {
  transition: 0.7s;
  background-color: darkmagenta;
  border-radius: 30px;
  color: white;
  padding: 10px 80px;
  border: none;
  width: 130px;
  margin: auto auto;
}

.submit:hover {
  color: gray;
  transition: 0.7s;
  background-color: rgb(73, 0, 73);
  border: none;
}

.submit:active {
  color: gray;
  transition: 0.7s;
  background-color: rgb(73, 0, 73);
  border: none;
}

.details {
  padding: 20px;
  background-color: rgb(29, 29, 29);
  border-radius: 20px;
  margin: 10px 150px;

}

.footer-container {
  background-color: rgb(4, 5, 22);
  padding: 10px;
  text-align: center;
  color: rgb(211, 211, 211);
}

#contact-btn {
  position: relative;
  padding: 8px 16px;
  background: #FF00FC;
  border: none;
  outline: none;
  border-radius: 2px;
  cursor: pointer;
}

.button__text {
  color: #ffffff;
  transition: all 0.2s;
}

.button-loading .button__text {
  visibility: hidden;
  opacity: 0;
}

.button-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

#message {
  margin: 10px;
  background: green;
  color: white !important;
  padding: 10px;
  border-radius: 20px;
  font-size: 0.8em;

}