@font-face {
  font-family: "Polentical Neon";
  src: local("Polentical Neon"), url("../font/Polentical Neon Regular.ttf");
}
@font-face {
  font-family: "Induction";
  src: local("Induction"), url("../font/Induction.otf");
}
@font-face {
  font-family: "Rajdhani";
  src: local("Rajdhani"), url("../font/Rajdhani-Variable.ttf");
}
html {
  font-size: 62.5%;
}

body {
  font-family: Rajdhani, Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

h2, a, pre {
  font-family: Polentical Neon, Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  color: #2D2D2D;
  text-decoration: none;
}

h2 {
  font-weight: normal;
}

a {
  font-size: 2rem;
}

p, pre {
  text-transform: uppercase;
  font-size: 2rem;
  color: var(--text-color);
}

#about_text {
  padding-left: 20px;
  color: var(--bg-color);
  margin-bottom: 2rem;
  background-color: var(--accent-color);
  -webkit-clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
          clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
}

h3, .case_p, .case_date {
  text-transform: uppercase;
  font-size: 2rem;
}

h3 {
  color: #767676;
}

.text_r {
  text-align: right;
}

#burger-con ul li a {
  color: #26E3FF;
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  h2 {
    font-size: 30px;
  }
  #about_text {
    margin-bottom: 40px;
  }
  p, pre {
    font-size: 20px;
  }
  a, h3, .case_p {
    font-size: 16px;
  }
}
/*---- desktop ----*/
@media screen and (min-width: 1200px) {
  h2 {
    font-size: 48px;
  }
  #about_text {
    margin-bottom: 120px;
  }
  p, pre {
    font-size: 30px;
  }
  a, h3, .case_p {
    font-size: 24px;
  }
}
button {
  border: 0;
  margin: 0;
  padding: 0;
}

#burger {
  width: 30px;
  height: 30px;
  background: url(../images/bar.svg) no-repeat center;
  align-self: center;
  justify-self: end;
  transition: all 0.5s ease;
}

#burger.expanded {
  transform: rotate(90deg);
}

header {
  line-height: 80px;
  background-color: var(--accent-color);
}

#header_logo {
  align-self: center;
}

header, #burger-con {
  transition: transform 0.3s ease-in-out;
  position: sticky;
  top: 0;
  z-index: 9999;
}

.hide-header {
  transform: translateY(-100%);
}

#menu {
  display: none;
  margin-top: auto;
  margin-bottom: auto;
}

#menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: space-between;
}

#menu ul li {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

#bar {
  margin-right: 0px;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
}

#burger-con {
  display: none;
  position: relative;
  z-index: 2;
  text-align: right;
  background-color: #2D2D2D;
}

#burger-con ul li {
  margin-top: 10px;
}

#burger-con.slide-toggle {
  display: block;
}

.logo, #menu ul li a {
  transition: transform 0.3s ease;
}

.logo:hover {
  filter: invert(100%) brightness(200%) contrast(100%);
}

#menu ul li a:hover {
  color: white;
}

#theme-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0 auto;
}
#theme-toggle img {
  display: block;
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  header {
    line-height: 60px;
  }
}
/*---- desktop ----*/
@media screen and (min-width: 1200px) {
  header {
    height: 80px;
  }
  #header_logo img {
    height: 20px;
  }
}
.footer {
  height: 80px;
  background-color: var(--accent-color);
  margin-top: 60px;
  z-index: 9999;
  position: relative;
}

.footer_logo {
  align-self: center;
  display: none;
}

.social_media_group {
  display: flex;
  align-self: center;
  justify-content: space-evenly;
}

.social_media_group img {
  display: inline;
  height: 36px;
  margin-left: auto;
  margin-right: auto;
}

.footer div a {
  font-size: 0px;
}

.footer div a img {
  transition: transform 0.3s ease;
}

.footer div a img:hover {
  filter: invert(100%) brightness(200%) contrast(100%);
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  .footer_logo {
    display: block;
  }
}
/*---- desktop ----*/
@media screen and (min-width: 1200px) {
  .footer {
    height: 160px;
    margin-top: 200px;
  }
  .footer_logo {
    height: 40px;
  }
  .social_media_group img {
    height: 40px;
  }
}
:root {
  --bg-color: #e0e0e0;
  --text-color: #0F0F0F;
  --text-color-2: #000000;
  --accent-color: #0BC6FF;
}

body.night-mode {
  --bg-color: #0F0F0F;
  --text-color: #e0e0e0;
  --accent-color: #0BC6FF;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.more_info {
  font-size: 20px;
  color: var(--bg-color);
  text-align: center;
  align-content: center;
  height: 24px;
  background-color: var(--accent-color);
}

#contct_now, #resume {
  font-size: 16px;
  color: var(--bg-color);
  text-align: center;
  align-content: center;
  height: 24px;
  background-color: var(--accent-color);
  margin-top: 20px;
}

.c_grey {
  color: #767676;
}

.fill_l {
  background-color: var(--accent-color);
  height: 100%;
  width: 37px;
  grid-row: 2;
  position: relative;
  right: 37px;
}

.line_h2 {
  height: 30px;
  background-color: var(--accent-color);
  margin-top: 60px;
  margin-bottom: 20px;
}

.line_r, .line_l {
  position: relative;
  overflow: hidden;
  margin-left: 30%;
}

.line_l {
  margin-left: 0%;
  margin-right: 30%;
  text-align: right;
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  .line_h2 {
    height: 40px;
    margin-top: 80px;
    margin-bottom: 40px;
  }
  .line_r {
    margin-left: 35%;
  }
  .line_l {
    margin-right: 35%;
  }
  #contct_now, #resume {
    margin-top: 40px;
  }
}
/*---- desktop ----*/
@media screen and (min-width: 1200px) {
  .line_h2 {
    height: 60px;
    margin-top: 200px;
    margin-bottom: 120px;
    -webkit-clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
            clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
  }
  .more_info {
    font-size: 24px;
    height: 40px;
    -webkit-clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
            clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
  }
  .line_r {
    margin-left: 35%;
  }
  .line_l {
    margin-right: 35%;
  }
  #contct_now, #resume {
    font-size: 24px;
    margin-top: 40px;
    height: 40px;
    -webkit-clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
            clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
  }
}
body {
  background-color: var(--bg-color);
}

#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  pointer-events: none; /* so clicks pass through */
}

p, pre {
  z-index: 9998;
}

.home_welcome {
  font-family: Induction, Arial, Helvetica, sans-serif;
  font-size: 30px;
  color: #767676;
  text-align: center;
  grid-column-start: 1;
  margin-bottom: -10px;
  grid-auto-flow: column;
}

#short_description {
  text-align: left;
  line-height: 30px;
  padding-left: 30px;
  padding-top: 30px;
  color: var(--bg-color);
  background-color: var(--accent-color);
  -webkit-clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
          clip-path: polygon(20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% 100%, 0% 100%, 0% 20px);
}

#up_icon {
  margin-left: auto;
  margin-right: auto;
}

.player_section {
  overflow: hidden;
  margin-bottom: 20px;
}

.player_l {
  position: relative;
  overflow: hidden;
  left: 0;
  grid-row: 2;
  z-index: 2;
}

#video_1 {
  background-color: #767676;
  margin-bottom: 20px;
}

.img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 20px;
}

.img_x3 {
  position: relative;
}

.img_group {
  overflow: hidden;
}

#home_contact {
  height: 30px;
  background-color: red;
  text-align: right;
}

#chat_icon {
  margin-left: auto;
  margin-right: auto;
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  #menu {
    display: block;
  }
  #burger, #up_icon {
    display: none;
  }
  .player_section {
    margin-bottom: 40px;
  }
  .img {
    margin-bottom: 40px;
  }
}
/*---- desktop ----*/
@media screen and (min-width: 1200px) {
  .home_welcome {
    font-size: 160px;
    margin-bottom: -60px;
  }
  .player_section {
    margin-bottom: 120px;
  }
  .img {
    margin-bottom: 120px;
  }
}
#contact_form form input, #contact_form form textarea {
  background-color: var(--accent-color);
  padding: 10px;
  border: 0px;
  margin-top: 40px;
}

#contact_form form textarea {
  height: 100px;
}

#contact_form form {
  display: flex;
  flex-direction: column;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  font-size: 20px;
  color: #2D2D2D;
}

input::placeholder, textarea::placeholder {
  font-size: 20px;
  color: #2D2D2D;
}

#contact_form input[type=submit] {
  text-align: center;
  align-self: center;
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  #contact_form form input, #contact_form form textarea {
    padding: 20px;
    margin-top: 60px;
  }
  input::-moz-placeholder, textarea::-moz-placeholder {
    font-size: 24px;
  }
  input::placeholder, textarea::placeholder {
    font-size: 24px;
  }
  input[type=text] {
    height: 60px;
  }
  #contact_form form textarea {
    height: 200px;
  }
  #contact_form input[type=submit] {
    font-size: 40px;
    padding: 0 30px;
  }
}
/*---- desktop ----*/
@media screen and (min-width: 1200px) {
  input::-moz-placeholder, textarea::-moz-placeholder {
    font-size: 30px;
  }
  input::placeholder, textarea::placeholder {
    font-size: 30px;
  }
  #contact_form form input, #contact_form form textarea {
    padding: 20px;
    margin-top: 120px;
  }
  input[type=text] {
    height: 80px;
    justify-self: center;
  }
  #contact_form form textarea {
    height: 300px;
  }
  #contact_form input[type=submit] {
    display: flex;
    text-align: center;
    align-self: flex-end;
  }
}
.case_header {
  margin-top: 60px;
  margin-bottom: 20px;
}

.case_text {
  height: 30px;
  background-color: var(--accent-color);
}

#case_1 {
  margin-bottom: 20px;
}

.player_case {
  margin-bottom: 20px;
}

.case_img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 20px;
}

.case_date, h3 {
  font-family: Polentical Neon, Arial, Helvetica, sans-serif;
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  .case_text {
    height: 40px;
  }
  .case_header {
    margin-top: 80px;
    margin-bottom: 40px;
  }
  .case_img {
    margin-bottom: 0px;
  }
  #case_1, .player_case {
    margin-bottom: 40px;
  }
  .case_2 img {
    grid-row: 2;
  }
  .text_solution {
    grid-row: 1;
  }
}
/*---- desktop ----*/
@media screen and (min-width: 1200px) {
  .case_text {
    height: 60px;
  }
  #case_1, .player_case {
    margin-bottom: 120px;
  }
  .case_header {
    margin-top: 200px;
    margin-bottom: 120px;
  }
}
.text_softwares {
  text-align: right;
}

.text_services {
  text-align: left;
}

/*---- tablet ----*/
@media screen and (min-width: 768px) {
  .text_softwares {
    text-align: left;
  }
  .text_services {
    text-align: right;
  }
}
/*---- desktop ----*//*# sourceMappingURL=main.css.map */