@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk&display=swap');

:root {
  --primary: #00b4d8;
  --light: #eeeeee;
  --blue: #00b4d8;
  --border-radius: 0.25rem;
  --dark: #000000;
  --white: #ffffff;
}

.bg-light {
  background: var(--light) !important;
}

.bg-blue {
  background: var(--blue) !important;
}

.text-primary {
  color: var(--primary) !important;
}

.text-dark {
  color: var(--dark) !important;
}

.company_name{
  font-family: 'Bebas Neue', sans-serif;
}

.text-white {
  color: var(--white) !important;
}

body {
  font-family: 'Rubik', sans-serif;
}

.row,
body,
.container-fluid,
.col-lg-5,
.col-lg-4,
.col-lg-3 {
  height: 100vh;
}

main {
  padding-left: 6rem;
}

aside {
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: 99;
}

aside div {
  height: 100%;
}

.social-media {
  border-right: 1px solid rgba(0, 0, 0, 0.3); 
}

.social-media .border {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: var(--primary) !important;
  text-decoration: none;
  transition: .3s;
}

.social-media .border:hover {
  background-color: var(--primary);
}

.social-media .border:hover i {
  color: #fff !important;
}

.display-1 {
  font-size: 8rem;
}

.navbar-brand {
  width: 25rem;
}

.logo{
  height: 7rem;
}

@media screen and (max-width: 1200px) {
  .logo{
    height: 6rem;
  }

  aside {
    display: none;
  }

  main {
    padding-left: 0rem;
  }
 }
@media screen and (max-width: 993px) {
  aside {
    display: none;
  }
  
  main {
    padding-left: 0;
  }

  .row, body, .container-fluid, .col-lg-5,  .col-lg-4, .col-lg-3 {
    height: auto;
  }
  
  .navbar-brand {
    width: 12rem !important;
  }
  .logo{
    height: 12rem !important;
  }

  .display-1 {
    font-size: 6rem;
  }

  .logo{
    height: 100% !important;
    width: 100% !important;
  }

  .navbar-brand {
    width: 8rem !important;
  }
}

.navbar-brand {
  width: 25rem;
}

img {
  object-fit: cover;
}

.border-radius {
  border-radius: 0.75rem;
}

.btn-white-outline {
  border: 1px solid black;
  color: black;
}

.btn-white-outline:hover {
  background-color: black;
  color: var(--primary);
}

.contact a {
  padding: 0.75rem 2rem 0.75rem 2rem;
}



@media (max-width: 767.98px) {

}