/* ----------------------------------------------------------------
	CSS Variables
-----------------------------------------------------------------*/

:root {
  --h1-size: 7rem;
  --h2-size: 3rem;
  --h-font1: 'Cutive Mono', monospace;
  --h-font2: 'IBM Plex Mono', monospace;
  --h-font3: 'Share Tech', sans-serif;
  --h-font4: 'Share Tech Mono', monospace;
  --h-font5: 'Source Code Pro', monospace;
  --h-font6: 'Space Mono', monospace;
  --h-font7: 'VT323', monospace;

  --p-font1: 'Source Sans Pro', sans-serif;
  --p-font2: 'Raleway', sans-serif;

  --primarycolor: #000520;
  --secondarycolor: #0bffff;
  --tertiarycolor: #9ea4a8;

}

.starter-template {
  padding: 3rem 1.5rem;
  text-align: center;
}

html {
  scroll-behavior: smooth;
}

html, body {
  background-color: #fff;
}

/* ----------------------------------------------------------------
	Fonts
-----------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--p-font2);
}

li a {
  font-family: var(--h-font2);
}

a {
  color: var(--secondarycolor);
}

p {
  font-family: var(--p-font2);
  font-size: 1.2rem;
  font-weight: 200;
}

h1.sec {
  color: #fff;
}

/* ----------------------------------------------------------------
	Backgrounds
-----------------------------------------------------------------*/

.bkg1 {
  background-color: var(--primarycolor);
  color: #fff;
}

.bkg1b {
  background: linear-gradient(45deg,white 5%,var(--primarycolor)5%, var(--primarycolor)95%, white 5%);
  color: #fff;
}

.bkg2 {
  background-color: var(--secondarycolor);
  color: #000;
}

.bkg2b {
  background: linear-gradient(-45deg,white 5%,var(--secondarycolor)5%, var(--secondarycolor)95%, white 5%);
  color: #000;
}

/* ----------------------------------------------------------------
	Section
-----------------------------------------------------------------*/

section {
  padding: 10rem 0;
}

/* ----------------------------------------------------------------
	Header
-----------------------------------------------------------------*/

.break {
  display: block;
}

.header-dlb {
  padding: 10rem 1rem;
}

.header-dlb h1 {
  font-size: var(--h1-size);
  margin-bottom: 0;
}


.sub-header-dlb {
  font-size: 2rem;
  font-family: var(--h-font2);
  padding-left: 10px;
}

/* ----------------------------------------------------------------
	Services
-----------------------------------------------------------------*/

.services h2 {
  font-family: var(--p-font2);
  line-height: 1.3em;
  font-weight: 300;
  font-size: var(--h2-size);
}

.services .odd {
  padding-left: 5rem;
}

.services .even {
  padding-right: 5rem;
}

.services .col-md-3 {
  padding: 0 25px;
}

.img-filter {
  border-radius: 0 50% 50% 0;
}

.services-row {
  padding: 6.5rem 0;
}

/* ----------------------------------------------------------------
	Team Members
-----------------------------------------------------------------*/

.team-image img {
  border-radius: 50% 50% 50% 0;
  max-width: 300px;
}

.team-desc {
  padding: 0 50px;
}

/* ----------------------------------------------------------------
	About
-----------------------------------------------------------------*/

.about {
  color: var(--primarycolor);
}

/* ----------------------------------------------------------------
	Footer
-----------------------------------------------------------------*/

footer {
  padding: 10rem 0 5rem 0;
}

.footer-box {
  color: #fff;
}

.footer-box h4 {
  margin-bottom: 1.5rem;;
}

footer .social {
  padding: 0 0 2rem 0;
}

span.footer {
  color: var(--secondarycolor);
}

span.email {
  color: var(--secondarycolor);
}

span.tel {
  color: var(--tertiarycolor);
}

footer .contacts {
  font-size: 1.1rem;
}

/* ----------------------------------------------------------------
	Custom Scrollbar
-----------------------------------------------------------------*/

* {
  scrollbar-color: var(--primarycolor) rgba(255,255,255,.0);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-button{
  height: 150px;
}
 
::-webkit-scrollbar-track {
  background: linear-gradient(90deg, transparent 40%, var(--primarycolor) 40%, var(--primarycolor) 50%, transparent 50%);
 }

 /* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primarycolor); 
  height: 5px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--secondarycolor); 
}

/* ----------------------------------------------------------------
	Language switcher
-----------------------------------------------------------------*/

.langs a {
  background-color: var(--primarycolor);
  color: #fff;
  padding: 10px;
  opacity: 0.5;
}

.langs a.active {
  background-color: var(--primarycolor);
  opacity: 1;
}

/* ----------------------------------------------------------------
	Navbar toggler icon
-----------------------------------------------------------------*/

.navbar-toggler {
  width: 20px;
  height: 20px;
  position: relative;
  transition: .5s ease-in-out;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

.navbar-toggler span {
  margin: 0;
  padding: 0;
}

.toggler-icon {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: var(--primarycolor);
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

.middle-bar {
  margin-top: 0px;
}

/* when navigation is clicked */

.navbar-toggler .top-bar {
  margin-top: 0px;
  transform: rotate(135deg);
}

.navbar-toggler .middle-bar {
  opacity: 0;
  filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
  margin-top: 0px;
  transform: rotate(-135deg);
}

/* State when the navbar is collapsed */

.navbar-toggler.collapsed .top-bar {
  margin-top: -10px;
  transform: rotate(0deg);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
  filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
  margin-top: 10px;
  transform: rotate(0deg);
}

/* Color of 3 lines */

.navbar-toggler.collapsed .toggler-icon {
  background: linear-gradient( 263deg, var(--primarycolor) 0%, var(--secondarycolor) 100% );
}

/* ----------------------------------------------------------------
	Contact Form
-----------------------------------------------------------------*/

#contactform .form-control {
  border: none;
  border-bottom: 1px solid #d9d9d9;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0; 
}

.contactform-title {
  font-weight: 400;
}

#contactform .form-control:active, 
#contactform .form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #000; 
}

#contactform .btn {
  height: 55px; 
}

#message {
  resize: vertical; 
}

#formMessageWarning, 
#formMessageSuccess {
  display: none;
}

#formMessageWarning {
  color: #B90B0B; 
}

#formMessageSuccess {
  color: #55A44E;
  font-size: 18px;
  font-weight: bold; 
}

#contactform .btn-primary {
  background-color: var(--primarycolor);
  border-color: var(--primarycolor);
}

/* ----------------------------------------------------------------
	Responsive
-----------------------------------------------------------------*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .header-dlb h1 {
    font-size: 3rem;
  }
  .sub-header-dlb {
    padding-left: 0px;
  }
  .services .col-md-3 {
    padding: 3rem;
  }
  .services .odd {
    padding-left: 0;
  }
  .services .even {
    padding-right: 0;
  }
  .services h2 {
    font-size: 2.5rem;
  }
  .services-row {
    padding: 2rem 0;
  }
  .services-row h1 {
    font-size: 2rem;
  }
  .display-1 {
    font-size: 4rem;
  }
  .bkg1b {
    background: linear-gradient(45deg,white 3%,var(--primarycolor)3%, var(--primarycolor)97%, white 3%);
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 767px) {
  .header-dlb h1 {
    font-size: 4rem;
  }
  .sub-header-dlb {
    padding-left: 0px;
  }
  .services .col-md-3 {
    padding: 3rem;
  }
  .services .odd {
    padding-left: 0;
  }
  .services .even {
    padding-right: 0;
  }
  .display-1 {
    font-size: 4rem;
  }
  .bkg1b {
    background: linear-gradient(45deg,white 3%,var(--primarycolor)3%, var(--primarycolor)97%, white 3%);
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-dlb h1 {
    font-size: 5rem;
  }
  .sub-header-dlb {
    padding-left: 0px;
  }
  .services .col-md-3 {
    padding: 0px;
  }
  .services .odd {
    padding-left: 0;
  }
  .services .even {
    padding-right: 0;
  }
  .display-1 {
    font-size: 5rem;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .header-dlb h1 {
    font-size: 6rem;
  }
  .services .col-md-3 {
    padding: 0px;
  }
  .services .odd {
    padding-left: 0;
  }
  .services .even {
    padding-right: 0;
  }
  .display-1 {
    font-size: 5rem;
  }
}