@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", "Open Sans", serif;
}

:root {
    --white: #fff;
    --red: #fB3038;
    --blue: #2d44da;
    --green: #449012;
    --black: #000000;
    --darkGray: #2f2f2f;
    --yellow: #f9dc1f;
    --orange: #f9a82f;
    --doppler: #183761;
    --accent: #3d72fc;
    --chatapp: #00bae8;
    --gradient-purple-magenta: linear-gradient(128.87deg, #512bd4 14.05%, #d600aa 89.3%);
}

html {
  scroll-behavior: smooth;
}

body {
  background: white;
  background-color: #F3F7FB;
  color: #0f2341;
  /*background-image: url('../images/port.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;*/
}

.load {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 200;
  transition: .5s;
}

.load .container {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

.load .container .franja {
  position: absolute;
  flex: 1;
  width: calc(100%/10);
  height: 100%;
  background: var(--doppler);
}

.load .container .franja:nth-child(1) {
  left: 0;
}

.load .container .franja:nth-child(2) {
  left: 10%;
}

.load .container .franja:nth-child(3) {
  left: 20%;
}

.load .container .franja:nth-child(4) {
  left: 30%;
}

.load .container .franja:nth-child(5) {
  left: 40%;
}

.load .container .franja:nth-child(6) {
  left: 50%;
}

.load .container .franja:nth-child(7) {
  left: 60%;
}

.load .container .franja:nth-child(8) {
  left: 70%;
}

.load .container .franja:nth-child(9) {
  left: 80%;
}

.load .container .franja:nth-child(10) {
  left: 90%;
}

.load.hide {
  pointer-events: none;
}

.load.hide .container .franja {
  animation: load 1s forwards;
  pointer-events: none;
}

.promo {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 50px;
  background-color: var(--doppler);
  z-index: 160;
  overflow: hidden;
}

.promo .data {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 50px!important;
  transition: .5s;
}

.promo .data .content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  width: 100%;
  color: white;
  padding-left: 100px;
}

.promo .data .content .info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
  color: white;
  text-decoration: none;
}

.promo .data .content .info:hover {
  text-decoration: underline;
}

.promo .data .info ion-icon {
  color: #6897fc;
  font-size: 1.3em;
}

.promo .data .social {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  height: 100%;
  gap: 20px;
  font-size: 1.5em;
  background: var(--accent);
  padding-right: 100px;
  padding-left: 70px;
  clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);
}

.promo .data .social span {
  color: white;
  text-wrap: nowrap;
  font-size: 0.7em;  
}

.promo .data .social a {
  height: 24px;
}

.promo .data .social ion-icon {
  color: white;
  transition: .5s;
  cursor: pointer;
}

.promo .data .social ion-icon:hover {
  color: #12305a;
}

.promo .text {
  position: absolute;
  top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: white;
  letter-spacing: .02em;
  line-height: 1;
  text-wrap: nowrap;
  font-size: 14px;
  width: 600px;
  height: 50px!important;
  transition: .5s;
  cursor: default;
}

.promo .text .button {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 30px;
  background-color: #28589b;
  border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, 0.212);
}

.promo .text .button:hover {
  background-color: white;
  color: var(--doppler);
  cursor: pointer;
}

.promo .text.show {
  top: 0;
}

.menu {
  position: fixed;
  top: 50px;
  width: 100%;
  height: 60px;
  z-index: 150;
}

.menu header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  /*box-shadow: 1px 1px 5px var(--darkGray);*/
  /*background-color: #e6e6e6;*/
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
}

.menu header .logo {
  position: absolute;
  left: 50px;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  user-select: none;
}

.menu header .logo svg {
  margin-right: 5px;
  width: 120px;
  height: 30px;
  transition: .5s;
}

.menu header .logo svg g {
  fill: var(--doppler);
}

.menu header .logo span {
  font-size: 15px;
  letter-spacing: .02em;
  line-height: 1;
  font-weight: bold;
  color: var(--doppler);
  transition: .5s;
}

/*.menu header .logo:hover svg {
  margin-top: -10px;
}

.menu header .logo:hover span {
  margin-top: -5px;
  opacity: 1.0;
  height: auto;
  transition: .5s;
}*/

.menu header .logo:hover {
  cursor: pointer;
}

.menu header .item {
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  height: 100%;
}

.menu header .item span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .02em;
  color: white;
  user-select: none;
  transition: .5s;
}

.menu header.dark .item span {
  color: rgba(41, 41, 41, 0.8);
}

.menu header .item .indicator {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 4px;
  transition: .5s;
  background-color: #183761;
}

.menu header .item:hover span {
  color: #183761;
}

.menu header .item:hover .indicator {
  width: 100%;
}

.menu header .item:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.menu header .item.active {
  background-color: rgba(255, 255, 255, 0.5);
}

.menu header .item.active .indicator {
  width: 100%;
}

.menu header .lupe {
  position: relative;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
  height: 100%;
}

.menu header .lupe svg {
  width: 25px;
  height: 25px;
}

.menu header .lupe svg g {
  fill: white;
}

.menu header.dark .lupe svg g {
  fill: rgba(41, 41, 41, 0.8);
}

.menu header .lupe .indicator {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 4px;
  transition: .5s;
  background-color: #183761;
}

.menu header .lupe:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.menu header .lupe:hover svg g {
  fill: var(--doppler);
}

.menu header .lupe:hover .indicator {
  width: 100%;
}

.menu header .lupe.active {
  background-color: white;
}

.menu header .lupe.active .indicator {
  width: 100%;
}

.menu header .lupe.active svg g {
  fill: var(--doppler);
}

.menu header .items {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.menu header .right {
  position: absolute;
  right: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.menu header .language { 
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .5s;
  height: 100%;
}

.menu header .language .flag {
  margin-left: 15px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 2px solid white;
  box-shadow: 0px 0px 2px var(--darkGray);
}

.menu header .language .arrow {
  margin: 0 10px;
  width: 20px;
  height: 20px;
  transition: .5s;
}

.menu header .language .arrow g {
  fill: white;
}

.menu header.dark .language .arrow g {
  fill: rgba(41, 41, 41, 0.8);
}

.menu header .language:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.menu header .language .message {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  background: white;
  border-radius: 15px;
  opacity: 0;
  transition: .5s;
  box-shadow: 1px 1px 5px rgba(47, 47, 47, 0.3);
  pointer-events: none;
  user-select: none;
}

.menu header .language .message .indicator {
  position: absolute;
  bottom: 100%;
  left: calc(50% - 7px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--white);
}

.menu header .language:hover .message {
  opacity: 1.0;
}

.menu header .language:hover .arrow g {
  fill: var(--doppler);
}

.menu header .right .button {
  padding: 10px 20px;
  background: var(--accent);
  color: white;
  text-decoration: none;
  border-radius: 30px;
  transition: .5s;
  cursor: pointer;
}

.menu header .right .button:hover {
  background: #0043a0;
}

.menu header .menu-mobile {
  position: absolute;
  right: 0;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
  cursor: pointer;
  opacity: 0.8;
}

.menu header .menu-mobile img {
  width: 30px;
  height: 30px;
}

.menu .tab_menu {
  position: absolute;
  top: -450px;
  /*display: none;*/
  padding-top: 60px;
  width: 100%;
  background-color: rgba(249, 251, 255, 0.5);
  transition: .5s;  
  z-index: -20;
  overflow: hidden;
}

.menu .tab_menu.active {
  top: 0;
  backdrop-filter: blur(8px);
}

.menu .tab_menu .tab_menu_item {
  display: flex;
  flex-direction: row;
  width: 100%;
  transition: .5s;
}

.menu .tab_menu .title {
  width: 30%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: end;
}

.menu .tab_menu .tab_menu_item .title a,
.menu .tab_menu .tab_menu_item .title span {
  margin-top: 20px;
  color: rgba(41, 41, 41, 0.8);
  text-decoration: underline;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .02em;
  cursor: default;
}

.menu .tab_menu .tab_menu_item .title a:hover,
.menu .tab_menu .tab_menu_item .title span:hover {
  color: var(--doppler);
  cursor: pointer;
}

.menu .tab_menu .tab_menu_item .separator {
  margin: 1% 0;
  width: 2px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1px;
}

.menu .tab_menu .tab_menu_item .spaces {
  width: calc(65% - 2px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px 40px;
}

.menu .tab_menu .tab_menu_item .spaces .space {
  margin: 0 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  width: calc(100%/3 - 40px);
}

.menu .tab_menu .tab_menu_item .spaces .space .space_title {
  margin-bottom: 15px;
  color: rgba(41, 41, 41, 0.8);
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .02em;
  cursor: default;
}

.menu .tab_menu .tab_menu_item .spaces .space .space_title span,
.menu .tab_menu .tab_menu_item .spaces .space .space_title a {
  color: rgba(41, 41, 41, 0.8);
  text-decoration: none;
}

.menu .tab_menu .tab_menu_item .spaces .space .space_title span:hover,
.menu .tab_menu .tab_menu_item .spaces .space .space_title a:hover {
  color: var(--doppler);
  text-decoration: underline;
  cursor: pointer;
}

.menu .tab_menu .tab_menu_item .spaces .space .space_item {
  margin: 3px 0;
  color: rgba(41, 41, 41, 0.8);
  font-size: 12px;
  letter-spacing: .02em;
  cursor: default;
}

.menu .tab_menu .tab_menu_item .spaces .space .space_item span,
.menu .tab_menu .tab_menu_item .spaces .space .space_item a {
  text-decoration: none;
  color: rgba(41, 41, 41, 0.8);
}

.menu .tab_menu .tab_menu_item .spaces .space .space_item span:hover,
.menu .tab_menu .tab_menu_item .spaces .space .space_item a:hover {
  color: var(--doppler);
  text-decoration: underline;
  cursor: pointer;
}

.menu .tab_menu_mobile {
  position: absolute;
  top: -260px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 0;
  background-color: rgba(235, 235, 235, 0.5);
  transition: .5s;
  z-index: -20;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.menu .tab_menu_mobile.active {
  top: 50px;
}

.menu .tab_menu_mobile .tab_menu_mobile_item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: calc(100%/3);
  height: 70px;
  padding: 0 30px;
  text-align: center;
}

.menu .tab_menu_mobile .tab_menu_mobile_item span {
  font-size: 13px;
  font-weight: bold;
  letter-spacing: .02em;
  line-height: 1;
  color: rgba(41, 41, 41, 0.8);
}

.menu .tab_menu_mobile .tab_menu_mobile_item:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

.menu .tab_search {
  position: relative;
  margin: auto;
  margin-top: -100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 30%;
  height: 40px;
  transition: .5s;
}

.menu .tab_search.active {
  margin-top: 20px;
}

.menu .tab_search .search {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: calc(100% - 60px);
  height: 100%;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  transition: .5s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.menu .tab_search .search img {
  margin-left: 15px;
  width: 20px;
  height: 20px;
  user-select: none;
  pointer-events: none;
}

.menu .tab_search .search input {
  margin-left: 10px;
  width: calc(100% - 60px);
  background: none;
  outline: none;
  border: none;
  font-size: 13px;
  letter-spacing: .02em;
  line-height: 1;
}

.menu .tab_search .search_close {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  transition: .5s;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.menu .tab_search .search_close:hover {
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}

.menu .tab_search .search_close img {
  width: 20px;
  height: 20px;
  user-select: none;
  pointer-events: none;
}

.menu .tab_search .search_suggestions {
  position: absolute;
  top: calc(100% + 20px);
  width: calc(100%);
  min-height: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border-radius: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  opacity: 0;
  transition: .5s;
  pointer-events: none;
}

.menu .tab_search.active .search_suggestions.show {
  opacity: 1;
  pointer-events: all;
}

.menu .tab_search .search_suggestions .suggestions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  height: 100%;
  list-style: none; 
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item {
  position: relative;
  width: 100%;
  height: 50px;
  font-size: 13px;
  padding: 0 30px;
  cursor: pointer;
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item a {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #000;
  height: 100%;
  text-decoration: none;
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item .text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: start;
  gap: 5px;
  height: 100%;
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item .accent {
  color: var(--accent);
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item:after {
  position: absolute;
  content: ' ';
  width: calc(100% - 60px);
  height: 100%;
  border-bottom: 1px solid #e4e4e4;
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item:last-child::after {
  border: none;
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item img {
  margin-right: 15px;
  width: 20px;
  height: 20px;
  user-select: none;
  pointer-events: none;
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item .url {
  color: #3f3f3f;
  font-style: italic;
}

.menu .tab_search .search_suggestions .suggestions .suggestion-item:hover {
  background: rgba(224, 224, 224, 0.5);
}

.flags {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(77, 77, 77, 0.5);
  z-index: 160;
  opacity: 0;
  transition: 0.5s;
}

.flags .tab_flag {
  position: relative;
  width: 500px;
  height: 300px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.1);
  z-index: 1000;
  overflow: hidden;
  padding: 20px;
}

.flags .tab_flag .close_flags {
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  opacity: 0.8;
}

.flags .tab_flag .close_flags img {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

.flags .tab_flag .close_flags img:hover {
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.6);
  cursor: pointer;
}

.flags .tab_flag .title {
  display: block;
  margin-top: 4px;
  margin-left: 25px;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .02em;
  line-height: 1.1;
  color: rgba(41, 41, 41, 0.8);
  cursor: default;
}

.flags .tab_flag .planet {
  position: absolute;
  top: 22px;
  width: 20px;
  height: 20px;
  user-select: none;
  pointer-events: none;
}

.flags .tab_flag .list_flags {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
  height: calc(100% - 30px);
}

.flags .tab_flag .list_flags .flag_item {
  margin: 10px calc((100%/6) - 35px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  border-radius: 10px;
  transition: .5s;
}

.flags .tab_flag .list_flags .flag_item img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.7);
}

.flags .tab_flag .list_flags .flag_item span {
  margin-top: 3px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.1;
  color: rgba(41, 41, 41, 0.8);
}

.flags .tab_flag .list_flags .flag_item:hover {
  /*background-color: rgba(77, 77, 77, 0.2);*/
  scale: 1.2;
  cursor: pointer;
}

.redes {
  position: fixed;
  left: -65px;
  top: calc(50% - 200px);
  display: flex;
  flex-direction: row;
  width: 80px;
  height: 340px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: var(--doppler);
  transition: .5s;
  z-index: 200;
}

.redes .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 60px;
  height: 100%;
}

.redes .content .red {
  position: relative;
  margin: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background:white;
  transition: .5s;
}

.redes .content .red svg {
  width: 25px;
  height: 25px;
}

.redes .content .red svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.redes .content .red .message {
  position: absolute;
  padding: 0;
  left: 100%;
  width: 0;
  background: var(--doppler);
  color: white;
  font-size: 13px;
  letter-spacing: .02em;
  border-radius: 10px;
  transition: .5s;
  overflow: hidden;
  opacity: 0.0;
}

.redes .split {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 100%;
}

.redes .split .indicator {
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid white;
  transition: .5s;
}

.redes:hover .split .indicator {
  transform: rotate(180deg);
}

.redes .split:hover {
  cursor: pointer;
}

.redes .content .red:hover {
  background: #145fa5;
  cursor: pointer;
}

.redes .content .red:hover svg g {
  fill: white;
}

.redes .content .red:hover .message {
  width: auto;
  padding: 10px;
  opacity: 1.0;
}

.up {
  position: fixed;
  right: 40px;
  bottom: 100px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--doppler);
  border: 2px solid white;
  transition: .5s;
  z-index: 200;
}

.up .message {
  position: absolute;
  bottom: 45px;
  /*display: none;*/
  background-color: var(--doppler);
  padding: 10px;
  color: white;
  font-size: 13px;
  letter-spacing: .02em;
  border-radius: 10px;
  transition: .5s;
  opacity: 0.0;
}

.up .message .indicator {
  position: absolute;
  top: 100%;
  left: calc(50% - 5px);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--doppler);
  cursor: default;
}

.up .message:hover {
  cursor: default;
}

.up svg {
  width: 20px;
  height: 20px;
  transform: rotate(180deg);
}

.up svg g {
  fill: white;
}

.up:hover {
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.up:hover .message {
  /*display: block;*/
  opacity: 1.0;
}

.up.active {
  display: flex;
}

#accessibility {
  position: fixed;
  left: 30px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 60px;
  z-index: 170;
}

#accessibility svg {
  position: relative;
  width: 50px;
  height: 50px;
  transition: .5s;
  cursor: pointer;
}

#accessibility.active svg {
  margin-left: 30px;
  margin-bottom: 15px;
}

#accessibility::before {
  content: '';
  position: absolute;
  top: 7.4px;
  left: 2.5px;
  width: 45px;
  height: 45px;
  background: white;
  border-radius: 30px;
  z-index: -1;
}

#accessibility svg g {
  fill: var(--doppler);
}

#accessibility .content {
  position: absolute;
  left: 0;
  bottom: 0;
  display: none;
  flex-direction: column;
  width: 400px;
  padding: 20px;
  padding-bottom: 70px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(5, 49, 143, 0.2);
}

#accessibility .content .title {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: medium;
}

#accessibility .content .cookie-consent {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#accessibility .content .cookie-consent .switch {
  position: relative;
  width: 50px;
  height: 30px;
  background: #b6dff7;
  border-radius: 20px;
  transition: .5s;  
  cursor: pointer;
}

#accessibility .content .cookie-consent .switch.reject {
  background: #e2e2e2;
}

#accessibility .content .cookie-consent .switch::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  background-color: var(--doppler);
  border-radius: 15px;
  transition: .5s;
}

#accessibility .content .cookie-consent .switch.reject::before {
  right: 25px;
  background-color: #7e7e7e;
}

#accessibility.active .content {
  display: flex;
}

#chatbot {
  position: fixed;
  right: 30px;
  bottom: 20px;
  z-index: 10;
  transition: .5s;
  z-index: 170;
}

#chatbot.open {
  z-index: 201;
}

#chatbot .chat_dp_logo {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.5); 
  transition: .5s;
  overflow: hidden;
}

#chatbot .chat_dp_logo svg {
  width: 80%;
  height: 80%;
  transition: .5s;
}

#chatbot .chat_dp_logo svg g {
  /*fill: var(--doppler);*/
}

/*#chatbot .chat_dp_logo span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  font-weight: 500;
  color: var(--doppler);
  height: 0;
  transition: .5s;
  overflow: hidden;
}*/

#chatbot .chat_dp_logo .message {
  position: absolute;
  right: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  background-color: white;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.5); 
  transition: .5s;
  opacity: 0.0;
  pointer-events: none;
}

#chatbot .chat_dp_logo .message .text {
  font-size: 13px;
  letter-spacing: .02em;
  font-weight: 500;
  color: var(--doppler);
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;
}

#chatbot .chat_dp_logo:hover {
  cursor: pointer;
  /*background-color: rgb(235, 235, 235);*/
}

#chatbot .chat_dp_logo:hover .message {
  opacity: 1.0;
}

#chatbot .chat_wsp {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 25px;
  height: 25px;
}

#chatbot .chat_wsp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#chatbot .chat_dp_view {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 0;
  height: 0;
  background-color: white;
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.5); 
  border-radius: 40px;
  overflow: hidden;
  transition: .5s;
}

#chatbot.open .chat_dp_view {
  border: 4px solid #f3f9e7;
}

#chatbot .chat_dp_view::before {
  content: ' ';
  position: absolute;
  top: 10px;
  left: calc(50% - 70px);
  width: 140px;
  height: 28px;
  background: #242424;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 100;
}

#chatbot .chat_dp_view::after {
  content: ' ';
  position: absolute;
  bottom: 15px;
  left: calc(50% - 65px);
  width: 130px;
  height: 4px;
  background: gray;
  border-radius: 3px;
  z-index: 100;
  cursor: pointer;
}

#chatbot .chat_dp_view .chat_dp_view_home {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
}

#chatbot .chat_dp_view .chat_dp_view_home::before {
  content: ' ';
  position: absolute;
  top: 4px;
  left: calc(50% - 58px);
  width: 15px;
  height: 15px;
  background: rgb(60, 63, 75);
  border-radius: 20px;
  z-index: 120;
}

#chatbot .chat_dp_view .chat_dp_view_home::after {
  content: ' ';
  position: absolute;
  top: 8px;
  left: calc(50% - 54px);
  width: 7px;
  height: 7px;
  background: rgb(80, 84, 100);
  border-radius: 20px;
  z-index: 120;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_head {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 10px;
  padding-top: 35px;
  box-shadow: 0 0 3px rgba(77, 77, 77, 0.5); 
  /*background-color: var(--doppler);*/
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_head .chat_dp_view_home_head_title {
  margin: auto;
  width: auto;
  cursor: default;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: white;
  background: var(--doppler);
  background: var(--gradient-purple-magenta);
  padding: 5px 10px;
  border-radius: 20px;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_head .chat_dp_view_home_head_title:hover {
  cursor: pointer;
  background-color: #244e8a;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_head .chat_dp_view_home_head_close {
  position: absolute;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_head .chat_dp_view_home_head_close:hover {
  cursor: pointer;
  background-color: rgba(41, 41, 41, 0.2);
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: calc(100% - 120px);
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_chat {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80%;
  height: 60px;
  background-color: white;
  color: rgba(24, 24, 24, 0.8);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.4); 
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_chat img {
  margin-right: 10px;
  width: 39px;
  height: 39px;
  user-select: none;
  pointer-events: none;
  border-radius: 25px;
  border: 3px solid white;
  box-shadow: 0 0 3px #000;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_chat:hover {
  box-shadow: 0 0 2px rgba(77, 77, 77, 0.5); 
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 80%;
  height: 120px;
  background-color: white;
  color: rgba(24, 24, 24, 0.8);
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.4); 
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .title {
  position: absolute;
  top: 10px;
  cursor: default;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .socials {
  margin-top: 30px;
  width: calc(100% - 20px);
  height: calc(100% - 40px);
  display: flex;
  flex-direction: row;
  padding: 5px;
  justify-content: space-between;
  align-items: center;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .socials .social-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  width: calc(100%/3 / 10px);
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .socials .social-item img {
  width: 40px;
  height: 40px;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .socials .social-item span {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(24, 24, 24, 0.8);
  user-select: none;
  pointer-events: none;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .socials .social-item:hover {
  cursor: pointer;
  box-shadow: 0 0 3px rgba(77, 77, 77, 0.5); 
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .button {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 90%;
  height: 60px;
  background-color: var(--doppler);
  background: var(--gradient-purple-magenta);
  color: white;
  border-radius: 10px;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body .chat_dp_view_home_social .button:hover {
  cursor: pointer;
  background-color: #244e8a;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_footer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-bottom: 10px;
  box-shadow: 0 0 3px rgba(77, 77, 77, 0.5); 
  z-index: 10;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_footer img {
  width: 40px;
  height: 40px;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_footer .message {
  position: absolute;
  bottom: calc(100% + 2px);
  opacity: 0;
  padding: 7px;
  border-radius: 10px;
  background: var(--doppler);
  color: white;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .02em;
  box-shadow: 0 0 3px rgba(77, 77, 77, 0.5); 
  user-select: none;
  pointer-events: none;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_footer .message .indicator {
  position: absolute;
  top: 100%;
  left: calc(50% - 7px);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--doppler);
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_footer img:hover {
  cursor: pointer;
}

#chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_footer img:hover ~ .message {
  opacity: 1;
}

#chatbot .chat_dp_view .chat_dp_view_chat {
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  transition: .5s;
  background-color: white;
  box-shadow: 0 0 2px rgba(77, 77, 77, 0.5);
  z-index: 10;
}

#chatbot .chat_dp_view .chat_dp_view_border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 10px solid #242424;
  border-radius: 35px;
  z-index: 100;
  user-select: none;
  pointer-events: none;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 70px;
  padding: 10px;
  padding-top: 30px;
  background-color: var(--doppler);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_back {
  width: 40px;
  height: 40px;
  padding: 10px;
  transform: rotate(90deg);
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_back:hover {
  cursor: pointer;
  background-color: rgba(199, 199, 199, 0.2);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_logo {
  margin-left: 5px;
  margin-right: 5px;
  display: none;
  width: 40px;
  height: 40px;
  user-select: none;
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_logo:hover {
  cursor: pointer;
  background-color: rgba(199, 199, 199, 0.15);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_info {
  display: flex;
  flex-direction: column;
  width: calc(100% - 140px);
  cursor: default;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_name {
  margin-left: 5px;
  font-size: 1.3em;
  letter-spacing: .03em;
  /*color: #00baff;*/
  color: white;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_line {
  margin-left: 10px;
  font-size: 12px;
  letter-spacing: .1em;
  /*color: #00baff;*/
  color: white;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_call {
  margin-right: 5px;
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_call:hover {
  cursor: pointer;
  background-color: rgba(199, 199, 199, 0.2);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_hide {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head .chat_dp_view_chat_head_hide:hover {
  cursor: pointer;
  background-color: rgba(199, 199, 199, 0.2);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body {
  position: relative;
  width: 100%;
  height: calc(100% - 130px);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: scroll;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .day {
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 60px;
  padding: 10px;
  color: rgba(24, 24, 24, 0.8);
  text-align: center;
  font-size: 13px;
  letter-spacing: .03em;
  color: rgba(24, 24, 24, 0.8);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item-privacy {
  display: flex;
  flex-direction: column;
  background: #f2f6ff;
  box-shadow: 0 0 1.5px #6686fd;
  border-radius: 10px;
  width: 100%;
  padding: 10px;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item-privacy .title {
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 700;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item-privacy .message {
  font-size: 12px;
  color: #2b3246;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item-privacy .message a {
  color: var(--doppler);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .head {
  display: flex;
  flex-direction: row;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .avatar {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: white;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .message {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  max-width: calc(100% - 40px);
  padding: 10px;
  background: #f2f6ff;
  box-shadow: 0 0 1.5px #6686fd;
  border-radius: 10px;
  font-size: 14px;
  letter-spacing: .03em;
  color: #0f2341;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .message .date {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .03em;
  color: rgba(24, 24, 24, 0.8);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .buttons {
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  width: calc(100% - 40px);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .button {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  min-height: 40px;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid #aec8eb;
  color: var(--doppler);
  background: white;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .button .buttonIcon {
  width: 35px;
  height: 35px;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_1 .button:hover {
  box-shadow: 0 0 5px #0000005d;
  cursor: pointer;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_2 {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_2 .head {
  display: flex;
  flex-direction: row-reverse;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_2 .avatar {
  margin-left: 10px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: white;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_2 .message {
  display: flex;
  flex-direction: column;
  align-items: end;
  max-width: 220px;
  padding: 10px;
  background: var(--doppler);
  border-radius: 10px;
  font-size: 1em;
  letter-spacing: .03em;
  color: white;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .message .text {
  white-space: pre-line;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body .chat_dp_view_chat_body_list .chat-message-item_2 .date {
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: .03em;
  color: white;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry {
  margin-left: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 20px);
  height: 40px;
  border-radius: 10px;
  border: 1px solid #6686fd;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry .chat_dp_view_chat_entry_clip {
  margin-left: 5px;
  width: 35px;
  height: 35px;
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry .chat_dp_view_chat_entry_clip:hover {
  cursor: pointer;
  background-color: rgba(41, 41, 41, 0.1);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry .chat_dp_view_chat_entry_input {
  margin-left: 15px;
  width: calc(100% - 85px);
  height: 100%;
  font-size: 1em;
  outline: none;
  background: transparent;
  border: none;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry .chat_dp_view_chat_entry_emoji {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry .chat_dp_view_chat_entry_emoji:hover {
  cursor: pointer;
  background-color: rgba(41, 41, 41, 0.1);
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry .chat_dp_view_chat_entry_send {
  margin-right: 5px;
  width: 35px;
  height: 35px;
  padding: 5px;
  border-radius: 20px;
  transition: .5s;
}

#chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_entry .chat_dp_view_chat_entry_send:hover {
  cursor: pointer;
  background-color: rgba(41, 41, 41, 0.1);
}

.port {
  width: 100%;
  height: 85vh;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #E6E4FB;
  background: linear-gradient(45deg, #E6E4FB, #E9DDF1, #F1F5FE);
  background-image: url("../images/port.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 200px;
}

.port::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../images/floats.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.a_port {
  width: 100%;
  height: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 0 11%;
  background: var(--doppler);
}

.port .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.port .background .back {
  margin-left: 210px;
  width: calc(100% - 200px);
  height: 100%;
  background-image: url("../images/software.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: local;
}

.port .container {
  margin-top: 40px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  font-size: 3.5em;
  color: #382e52;
  letter-spacing: .02em;
  line-height: 1.1;
  cursor: default;
  /*background: linear-gradient(90deg, var(--doppler) 40%, rgb(24, 55, 97, 0.5), transparent);*/
  width: calc(50% - 100px);
  height: 100%;
}

.a_port .container {
  margin-top: 90px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  cursor: default;
  background: linear-gradient(90deg, var(--doppler) 40%, rgb(24, 55, 97, 0.5), transparent);
  width: calc(50% - 100px);
  height: 100%;
}

.port .container span:nth-child(1) {
  display: block;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  font-weight: normal;
  color: var(--doppler);
  /*-webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;*/
  cursor: default;
}

.port .container h1 {
  margin: 0;
  margin-top: 10px;
  padding: 0;
  font-size: 0.7em;
  font-weight: normal;
  text-transform: none;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;
}

.port .container p {
  margin-top: 20px;
  font-size: 16px;
  color: #465A69;
}

.a_port .container .buttons,
.port .container .buttons {
  position: relative;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  width: 100%;
}

.a_port .container .buttons .btn {
  margin-right: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: white;
  border: 2 solid white;
  gap: 10px;
  color: var(--doppler);
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  height: 50px;
  padding: 3px 15px;
  padding-right: 4px;
  border-radius: 25px;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.port .container .buttons .btn {
  margin-right: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--doppler);
  text-decoration: none;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  height: 50px;
  padding: 3px;
  padding-right: 20px;
  border-radius: 25px;
  transition: .5s ease-in-out;
  cursor: pointer;
}

.port .container .buttons .btn:first-child {
  background: var(--gradient-purple-magenta);
  padding: 2px 4px;
  padding-right: 20px;
}

.port .container .buttons .btn:last-child {
  padding: 0;
  margin-right: 15px;
  transition: .5s;
}

.a_port .container .buttons .btn span,
.port .container .buttons .btn span {
  text-align: center;
}

.port .container .buttons .btn:last-child span {
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;
}

.port .container .buttons .btn:first-child span {
  color: white;
}

.port .container .buttons .btn:first-child svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: var(--doppler);
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.port .container .buttons .btn .play-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  color: white;
  transition: .5s;
  border-radius: 25px;
  border: 2px dashed #512bd4;
  box-shadow: 0 0 0 0 rgba(56, 75, 255, 0.2);
  animation: rippleOne 3s infinite;
}

.port .container .buttons .btn .play-icon:after {
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  bottom: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--theme);
  content: "";
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 0 rgba(56, 75, 255, 0.2);
  animation: rippleOne 3s infinite;
  animation-delay: 0.6s;
}

.port .container .buttons .btn:hover .play-icon {
  rotate: 90deg;
}

.port .container .buttons .btn .play-icon::before {
  position: absolute;
  content: ' ';
  background: var(--gradient-purple-magenta);
  width: calc(100% - 7px);
  height: calc(100% - 7px);
  border-radius: 20px;
  transition: .5s;
}

.port .container .buttons .btn .play-icon svg {
  width: 26px;
  height: 26px;
  transition: .5s;
  z-index: 1;
}

.port .container .buttons .btn:hover .play-icon svg {
  rotate: -90deg;
}

.port .container .buttons .btn .play-icon svg path {
  fill: white;
  color: white;
}

.a_port .container .buttons .btn svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: var(--doppler);
  border-radius: 20px;
  transition: .5s ease-in-out;
}

.port .container .buttons .btn:first-child svg {
  background: white;
}

.port .container .buttons .btn:first-child svg g {
  fill: #6c4cdd;
  transition: .5s ease-in-out;
}

.a_port .container .buttons .btn svg g {
  fill: white;
  transition: .5s ease-in-out;
}

.port .container .buttons .btn:first-child svg g {
  fill: var(--doppler);
}

.a_port .container .buttons .btn:hover {
  border-color: white;
  background-color: var(--doppler);
  color: white;
  cursor: pointer;
  /*box-shadow: 0 0 5px #ffffff;*/
}

.port .container .buttons .btn:first-child:hover {
  background: transparent;
}

.a_port .container .buttons .btn:hover svg ,
.port .container .buttons .btn:first-child:hover svg {
  background: white;
}

.port .container .buttons .btn:first-child svg g {
  fill: #6c4cdd;
}

.a_port .container .buttons .btn:hover svg g {
  fill: var(--doppler);
}

.port .container .buttons .btn:first-child:hover span {
  color: var(--doppler);
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;
}

.port .container .buttons .btn:first-child:hover svg {
  background: var(--gradient-purple-magenta);
}

.port .container .buttons .btn:first-child:hover svg g {
  fill: white;
}

.port .content {
  position: relative;
  margin-top: 40px;
  width: calc(100%/1.4);
  width: 50%;
}

.port .content img {
  width: 100%;
  /*box-shadow: inset 0 0 50px var(--doppler);*/
}

.port .content .tag {
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  background: white;
  border-radius: 10px;
  box-shadow: -5px 5px 10px #a1a1a14b;
  scale: 0;
  animation: scale 0.5s forwards;
  cursor: pointer;
}

.port .content .tag:nth-child(2) {
  left: 50px;
  top: 26%;
  color: var(--green);
  animation-delay: 3s;
}

.port .content .tag:nth-child(3) {
  right: 0px;
  bottom: 20%;
  color: var(--accent);
  animation-delay: 2s;
}

.port .content .tag:nth-child(4) {
  right: -80px;
  top: 32%;
  color: var(--red);
  animation-delay: 2.5s;
}

.port .content .tag svg {
  width: 30px;
  height: 30px;
}

.port .content .tag:nth-child(2) svg g {
  fill: var(--green);
}

.port .content .tag:nth-child(3) svg g {
  fill: var(--accent);
}

.port .content .tag:nth-child(4) svg g {
  fill: var(--red);
}

.port .carrusel {
  position: absolute;
  left: calc(50% - 45px);
  bottom: 20px;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(5px);
  border-radius: 15px;
}

.port .carrusel .slide {
  margin: 0 5px;
  width: 7px;
  height: 7px;
  border-radius: 3.5px;
  background: white;
  transition: .5s;
}

.port .carrusel .slide.active {
  background: var(--doppler);
}

.port .carrusel:hover {
  left: calc(50% - 60px);
  bottom: 10px;
  width: 120px;
  height: 40px;
  border-radius: 20px;
}

.port .carrusel:hover .slide {
  width: 10px;
  height: 10px;
  border-radius: 5px;
}

.port .carrusel .slide:hover {
  border: 2px solid var(--doppler);
  cursor: pointer;
}

.port .container.active {
  display: none;
}

.port .text-transparent {
  position: absolute;
  top: calc(50% + 50px);
  left: -10%;
  display: none;
  transform: translateY(-50%) rotate(-90deg);
  z-index: 1;
}

.port .text-transparent h2 {
  font-size: 80px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--text);
  -webkit-text-fill-color: transparent;
  mask-image: linear-gradient(-75deg, rgba(56, 75, 255, 0.15) 50%, rgb(56, 75, 255) 50%, rgba(56, 75, 255, 0.15) 100%);
  mask-size: 200%;
  animation: 3s ease 0s infinite normal none running shine;
}

.border-top {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

.border-bottom {
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}

.border {
  border-radius: 40px;
}

.box-shadow {
  box-shadow: 0 0 5px rgba(5, 49, 143, 0.2);
  z-index: 5;
}

.layers {
  position: relative;
  background-color: #e4eaf8;
  background-color: #F3F7FB;
  background-color: #046ec5;
  height: 250vh;
}

.layers .layers-content {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  padding: 80px 0;
  height: 140vh;
}

.layers .layers-content .layer {
  position: relative;
  top: 50px;
  transform-origin: center top;
  margin: 0 200px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  font-size: 1rem;
  padding: 20px;
  min-height: 700px;
  gap: 40px;
  text-align: center;
  background: #fff;
  color: #000000;
  border-radius: 20px;
  /*transition:
    top 0.2s ease,
    position 0.2s ease,
    transform 0.3s ease,
    opacity 0.3s ease;*/
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.layers .layers-content .layer:nth-child(1) {
  z-index: 1;
}

.layers .layers-content .layer:nth-child(2) {
  z-index: 2;
}

.layers .layers-content .layer:nth-child(3) {
  z-index: 3;
}

.layers .layers-content .layer .layer-content {
  width: 60%;
  height: 100%;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.layers .layers-content .layer .layer-content .tag {
  margin-bottom: 10px;
  color: #000000;
  color: var(--accent);
}

.layers .layers-content .layer .layer-content .title {
  font-size: 1.5em;
  text-align: start;
  color: #0f2341;
}

.layers .layers-content .layer .layer-content p {
  margin: 10px 0;
  text-align: start;
  color: #465A69;
}

.layers .layers-content .layer .layer-content .button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: fit-content;
  height: 40px;
  padding: 0 20px;
  background-color: var(--doppler);
  color: white;
  border-radius: 20px;
  font-size: 1em;
  letter-spacing: .02em;
  line-height: 1.1;
  cursor: pointer;
}

.layers .layers-content .layer .layer-image {
  width: 40%!important;
  height: 100%;
}

.layers .layers-content .layer .layer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.layers .layers-content .layer.fixed {
  position: fixed !important;
  opacity: 0.7;
  transform: scale(0.98);
}

.carrousel {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100px;
  background: var(--doppler);
  background: var(--accent);
  overflow-x: scroll;
}

.carrousel .container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  gap: 30px;
  padding: 0 40px;
}

.carrousel .container .item {
  font-size: 1.7em;
  color: white;
  text-wrap: nowrap;
}

.carrousel .container .separator img {
  width: 30px;
  height: 30px;
}

.plus_service {
  width: 100%;
  background: transparent;
}

.plus_service .container {
  margin-top: -80px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: start;
  width: 100%;
  padding: 0 200px;
}

.plus_service .container .plus {
  display: flex;
  flex-direction: row;
  width: calc(100%/3 - 40px);
  background: white;
  border-radius: 20px;
  box-shadow:  0 0 5px rgba(0, 0, 0, 0.4);
  padding: 30px;
  cursor: default;
  z-index: 100;
}

.plus_service .container .plus .stack {
  display: flex;
}

.plus_service .container .plus .stack:nth-child(2) {
  margin-left: 10px;
  flex-direction: column;
  justify-content: start;
  align-items: start;
}

.plus_service .container .plus .stack svg {
  width: 80px;
  height: 80px;
  transition: .5s;
}

.plus_service .container .plus .stack svg g {
  fill: #1f1f1f;
  fill: #512bd4;
  transition: .5s;
}

.plus_service .container .plus .stack .title {
  margin-bottom: 10px;
  font-size: 22px;
  letter-spacing: .02em;
  line-height: 1.1;
  transition: .5s;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;
}

.plus_service .container .plus .stack .info {
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  transition: .5s;
}

.plus_service .container .plus:hover svg {
  scale: 1.1;
}

.plus_service .container .plus:hover svg g {
  fill: #512bd4;
}

.plus_service .container .plus:hover .title {
  color: #145fa5;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;
}

.packages {
  width: 100%;
  background-color: #ECF0FC;
  background: #fff;
  background-color: #F3F7FB;
  backdrop-filter: blur(4px);    
  background-image: url(../images/pricing-right.png);
  background-position: top right;
  background-repeat: no-repeat;
}

.packages::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background-image: url(../images/pricing-left.png);
  --background-overlay: '';
  background-position: bottom left;
  background-repeat: no-repeat;
}

.packages .container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: 100%;
  padding: 30px 0;
}

.packages .container span:nth-child(1) {
  margin: 0 200px;
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
  font-weight: 500;
  color: var(--doppler);
  /*-webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;*/
  cursor: default;
}

.packages .container .title {
  margin: 10px 200px;
  font-size: 32px;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #0f2341;
  width: calc(70% - 20px);
  text-align: center;
  cursor: default;
}

.packages .container span:nth-child(3) {
  margin: 0 200px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: calc(70% - 20px);
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
  color: #47535c;
}

.packages .container .content {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  padding: 10px 200px;
  width: 100%;
}

.packages .container .stack {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: start;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
}

.packages .container .content .stack .package {
  display: flex;
  flex-direction: column;
  width: 350px;
  padding: 20px;
  gap: 10px;
  background: #FAFBFF;
  border-radius: 20px;
  text-decoration: none;
  border: 1.5px solid #D5DFFF;
  cursor: pointer;
  transition: .5s;
}

.packages .container .content .stack .package.hot {
  position: relative;
  border-color: var(--doppler);
  border-width: 2px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.packages .container .content .stack .package.hot:after {
  position: absolute;
  left: -2px;
  bottom: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  content: 'Más Vendido';
  width: calc(100% - 36px);
  height: 5px;
  color: white;
  background: var(--doppler);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 20px solid var(--doppler);
}

.packages .container .content .stack .package:hover {
  border-color: var(--accent);
  transform: translateY(-20px);
}

.packages .container .content .stack .package.hot:hover:after {
  background: var(--accent);
  border-color: var(--accent);
}

.packages .container .content .stack .package .title {
  margin: 0;
  margin-bottom: 10px;
  font-size: 1.3em;
  text-align: start;
}

.packages .container .content .stack .package .info {
  margin-bottom: 10px;
  color: #47535c;
}

.packages .container .content .stack .package .separator {
  margin: 15px 0;
  width: 100%;
  height: 2px;
  background: #D5DFFF;
}

.packages .container .content .stack .package .details {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.packages .container .content .stack .package .details p {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #47535c;
  font-weight: 600;
}

.packages .container .content .stack .package .details p ion-icon {
  margin-top: -1px;
  margin-right: 5px;
  color: var(--accent);
  font-size: 1.1em;
  --ionicon-stroke-width: 64px;
}

.packages .container .content .stack .package .details p span {
  margin: 0;
  color: var(--doppler);
}

.packages .container .content .stack .package .price {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.packages .container .content .stack .package .price span {
  margin: 0;
  text-decoration: line-through;
  font-weight: normal;
}

.packages .container .content .stack .package .price .discount-tag {
  font-size: 15px;
  line-height: 24px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  background: #D5DFFF;
  color: var(--doppler);
}

.packages .container .content .stack .package .discount {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: end;
  gap: 10px;
  font-size: 30px;
  font-weight: 600;
  color: var(--doppler);
}

.packages .container .content .stack .package .discount span {
  margin: 0;
  margin-bottom: 5px;
  font-size: 14px;
}

.packages .container .content .stack .package .extra {
  color: var(--accent);
  font-weight: 600;
}

.packages .container .content .stack .package .button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50px;
  letter-spacing: 1px;
  border-radius: 30px;
  border: 2px solid var(--doppler);
  color: var(--doppler);
  font-weight: 600;
  transition: .5s;
  cursor: pointer;
}

.packages .container .content .stack .package.hot .button {
  background: var(--doppler);
  color: white;
}

.packages .container .content .stack .package .button:hover {
  background: var(--doppler);
  color: white;
}

.packages .container .content .stack .package.hot .button:hover {
  border-color: #2b5ea5;
  background: #2b5ea5;
}

.services {
  width: 100%;
  background-color: #ECF0FC;
  background-color: #F3F7FB;
  /*/background: #fff;*/
  backdrop-filter: blur(4px); 
  background-image: url(../images/line-shape-1.png);
  background-position: top left;
  background-repeat: no-repeat;
}

.services .container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
  padding: 30px 0;
}

.services .container span:nth-child(1) {
  margin: 0 200px;
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  font-weight: 500;
  color: var(--doppler);
  cursor: default;
}

.services .container .title {
  margin: 10px 200px;
  font-size: 32px;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #0f2341;
  width: calc(70% - 20px);
  text-align: start;
  cursor: default;
}

.services .container span:nth-child(3) {
  margin: 0 200px;
  margin-top: 10px;
  margin-bottom: 20px;
  width: calc(70% - 20px);
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  color: #47535c;
}

.services .container .button {
  margin: 0 200px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 160px;
  height: 50px;
  padding: 3px;
  padding-right: 4px;
  border-radius: 25px;
  background: var(--doppler);
  transition: .5s ease-in-out;
}

.services .container .button span {
  margin: 0;
  margin-left: 20px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.services .container .button svg {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.services .container .button svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.services .container .button:hover {
  background: transparent;
  cursor: pointer;
}

.services .container .button:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.services .container .button:hover svg {
  background: var(--doppler);
}

.services .container .button:hover svg g {
  fill: white;
}

.services .container .content {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  overflow-x: scroll;
  padding: 10px 200px;
  width: 100%;
}

.services .container .stack {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 30px;
}

.services .container .stack .service {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 10px;
  width: 340px;
  padding: 20px;
  color: black;
  background: white;
  border-radius: 20px;
  text-decoration: none;
  border: 1.5px solid #D5DFFF;
  cursor: pointer;
}

.services .container .stack .service svg {
  width: 80px;
  height: 80px;
  /*padding: 20px;
  background: var(--doppler);*/
  border-radius: 20px;
  transition: .5s;
}

.services .container .stack .service svg g {
  fill: white;
  fill: var(--doppler);
  transition: .5s;
}

.services .container .stack .service span {
  margin-top: 10px;
  text-align: start;
  font-size: 20px;
  font-weight: medium;
  color: #0f2341;
  transition: .5s;
}

.services .container .stack .service p {
  margin-bottom: 60px;
  text-align: start;
  font-size: 16px;
  color: #465A69;
  width: auto;
  cursor: pointer;
}

.services .container .stack .service .more {
  position: absolute;
  left: 20px;
  bottom: 20px;
  display: block;
  padding: 10px 20px;
  border-radius: 20px;
  background: var(--doppler);
  text-align: start;
  font-size: 16px;
  color: white;
  transition: .5s;
}

.services .container .stack .service:hover .more {
  background: #2a5da3;
}

.work-process {
  width: 100%;
  background: #fff;
  backdrop-filter: blur(4px);
}

.work-process .container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
  padding: 30px 200px
}

.work-process .container span:nth-child(1) {
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  font-weight: 500;
  color: var(--doppler);
  /*-webkit-text-fill-color: rgba(0, 0, 0, 0);
  background: var(--gradient-purple-magenta);
  background-clip: text;
  -webkit-background-clip: text;*/
  cursor: default;
}

.work-process .container .title {
  margin-top: 10px;
  font-size: 32px;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #0f2341;
  width: calc(70% - 20px);
  text-align: start;
  cursor: default;
}

.work-process .container span:nth-child(3) {
  padding-top: 10px;
  padding-bottom: 20px;
  width: calc(70% - 20px);
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  color: #47535c;
}

.work-process .container .content {
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}

.work-process .container .content::before {
  position: absolute;
  top: calc(50% - 1.5px);
  left: 10%;
  content: '';
  width: 80%;
  height: 3px;
  background: var(--doppler);
}

.work-process .container .content .process {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  width: calc(100%/4 - 60px);
  padding: 10px 5px;
}

.work-process .container .content .process::before {
  position: absolute;
  left: 20%;
  width: 60%;
  height: 100%;
  content: '';
  background: white;
}

.work-process .container .content .process svg {
  position: relative;
  margin-bottom: 20px;
  width: 80px;
  height: 80px;
}

.work-process .container .content .process svg g {
  fill: var(--doppler);
}

.work-process .container .content .process p {
  position: relative;
  /*padding: 0 80px;*/
  width: 100%;
  font-size: 1.3em;
  color: #0f2341;
  background: white;
  text-align: center;
}

.work-process .container .content .process span {
  position: relative;
  text-align: center;
  width: 100%;
  background: white;
}

.about {
  position: relative;
  width: 100%;
  background-color: white;
  /*background-image: linear-gradient(180deg, #fff .82%, rgba(255, 255, 255, 0) 21.32%, rgba(255, 255, 255, 0) 84.38%, #ECF0FC 99.24%), linear-gradient(295.2deg, #DEF9EA 0%, #DDF7EC 10%, #DAEBFD 28%, #E1E6FA 67%, #F5E4F4 89%, #FDEFE6 100%);*/
}

.about .container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  padding: 30px 200px;
  padding-bottom: 60px;
}

.about .container .stack {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 20px;
  width: calc(50vw);
}

.about .container .stack:first-child {
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  justify-content: center;
  align-items: center;
  gap: 30px;
  width: calc(50vw - 500px);
  height: calc(50vw - 500px);
  border-radius: 100px;
  padding: 0px;
  transition: .5s;
  cursor: pointer;
}

.about .container .stack:first-child::before {
  position: absolute;
  top: 20%;
  left: 20%;
  content: '';
  width: 60%;
  height: 60%;
  border: 3px solid var(--accent);
}

.about .container .stack:first-child .reproductor {
  position: absolute;
  top: calc(50% - 60px);
  left: calc(50% - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  border-radius: 60px;
  box-shadow: 0 0 0 0 rgba(56, 75, 255, 0.2);
  animation: rippleOne 3s infinite;
  cursor: pointer;
}

.about .container .stack:first-child .reproductor::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: var(--accent);
  background-image: url("../images/circle-text.png");
  background-position: center;
  background-size: calc(100% - 15px);
  background-repeat: no-repeat;
  transition: .5s;
  animation: cir36 10s linear infinite;
}

.about .container .stack:first-child:hover .reproductor::before {
  background-color: #0043a0;
}

.about .container .stack:first-child:hover {
  filter: brightness(0.8);
}

.about .container .stack:first-child .reproductor ion-icon {
  margin-left: 5px;
  font-size: 2.3em;
  color: white;
}

.about .container .stack .image {
  position: relative;
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 30px;
}

.about .container .stack .image:nth-child(1) {
  height: 60%;
}

.about .container .stack .image:nth-child(1)::before {
  position: absolute;
  top: -20px;
  left: -20px;
  content: '';
  width: 50%;
  height: 100%;
  background: var(--accent);
  border-radius: 20px;
  border-top-left-radius: 120px;
}

.about .container .stack .image:nth-child(2) {
  height: 40%;
}

.about .container .stack .image:nth-child(2)::before {
  position: absolute;
  bottom: -20px;
  right: -20px;
  content: '';
  width: 50%;
  height: 100%;
  background: var(--doppler);
  border-radius: 20px;
  border-bottom-right-radius: 120px;
}

.about .container .stack .image img {
  position: relative;
  border-radius: 20px;
  object-fit: cover;
}

.about .container .stack .image:nth-child(1) img:nth-child(1) {
  width: calc(70% - 15px);
  height: 100%;
  border-top-left-radius: 100px;
}

.about .container .stack .image:nth-child(1) img:nth-child(2) {
  width: calc(30% - 15px);
  height: 100%;
  border-top-right-radius: 100px;
}

.about .container .stack .image:nth-child(2) img:nth-child(1) {
  width: calc(45% - 15px);
  height: 100%;
  border-bottom-left-radius: 100px;
}

.about .container .stack .image:nth-child(2) img:nth-child(2) {
  width: calc(55% - 15px);
  height: 100%;
  border-bottom-right-radius: 100px;
}

.about .container .stack span {
  color: #465A69;
}

.about .container .stack span:nth-child(1) {
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--doppler);
  line-height: 1.1;
  font-weight: 500;
  cursor: default;
}

.about .container .stack p:nth-child(2) {
  margin: 10px 0;
  margin-bottom: 20px;
  font-size: 32px;
  color: #0f2341;
  letter-spacing: .02em;
  line-height: 1.1;
  transition: .5s;
  cursor: default;
}

.about .container .stack .content {
  margin: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.about .container .stack .content .widget {
  position: relative;
  width: calc(50% - 20px);
  padding: 20px 0;
  border-radius: 15px;
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);*/
  transition: .5s;
}

.about .container .stack .content .widget svg {
  position: absolute;
  top: 20px;
  left: 0px;
  width: 70px;
  height: 70px;
  transition: .5s;
} 

.about .container .stack .content .widget svg g {
  fill: #3f3f3f;
  fill: var(--doppler);
  transition: .5s;
}

.about .container .stack .content .widget p:nth-child(2) {
  margin: 0;
  margin-left: 75px;
  width: calc(100% - 75px);
  font-size: 22px;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: normal;
  color: #242424;
  color: var(--doppler);
  transition: .5s;
}

.about .container .stack .content .widget p:nth-child(3) {
  margin: 10px 0 0 0;
  margin-left: 75px;
  width: calc(100% - 75px);
  color: #465A69;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.3;
}

.about .container .stack .content .widget:hover {
  cursor: default;
}

.about .container .stack .button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 180px;
  height: 50px;
  padding: 3px;
  background: var(--doppler);
  border-radius: 25px;
  transition: .5s;
}

.about .container .stack .button span {
  margin: 0;
  margin-left: 20px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s;
}

.about .container .stack .button svg {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s;
}

.about .container .stack .button svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.about .container .stack .button:hover {
  background: white;
  cursor: pointer;
}

.about .container .stack .button:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.about .container .stack .button:hover svg {
  background: var(--doppler);
}

.about .container .stack .button:hover svg g {
  fill: white;
}

.tools {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-bottom: 60px;
  background: white;
}

.tools .container {
  display: flex;
  flex-direction: row;
  width: 90%;
  gap: 30px;
  padding: 60px 120px;
  padding-bottom: 0;
  border-radius: 40px;
  background: #F3F7FB;
  border: 1.5px solid #D5DFFF;
  overflow: hidden;
}

.tools .container .first {
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}

.tools .container .first span:nth-child(1) {
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  font-weight: 500;
  color: var(--doppler);
  cursor: default;
}

.tools .container .first .title {
  margin-top: 10px;
  font-size: 32px;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #1C2B33;
  width: 100%;
  text-align: start;
  cursor: default;
}

.tools .container .first span:nth-child(3) {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100%;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  color: #47535c;
}

.tools .container .first .button {
  position: absolute;
  right: calc(50% + 20px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 3px 5px;
  padding-left: 25px;
  gap: 15px;
  color: white;
  background: var(--doppler);
  border-radius: 25px;
  transition: .5s;
  cursor: pointer;
}

.tools .container .first .button span {
  margin: 0;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s;
  cursor: pointer;
}

.tools .container .first .button svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s;
  cursor: pointer;
}

.tools .container .first .button svg g {
  fill: var(--doppler);
  transition: .5s;
}

.tools .container .first .button:hover {
  background: transparent;
}

.tools .container .first .button:hover span {
  color: var(--doppler);
}

.tools .container .first .button:hover svg {
  background: var(--doppler);
}

.tools .container .first .button:hover svg g {
  fill: white;
}

.tools .container .first .mockup {
  position: relative;
  width: 100%;
  height: 100%;
}

.tools .container .first .mockup img {
  position: absolute;
  top: 0px;
  left: -70px;
  width: calc(100% + 150px);
  object-fit: contain;
  pointer-events: none;
}

.tools .container .end {
  width: 50%;
}

.tools .container .end .subtitle {
  font-size: 32px;
  color: #1C2B33;
}

.tools .container .end .content {
  margin: 30px 0;
  margin-bottom: 250px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 30px;
}

.tools .container .end .content .function {
  width: calc(50% - 15px);
  background: white;
  border-radius: 30px;
  padding: 30px 20px;
  border: 1.5px solid #D5DFFF;
}

.tools .container .end .content .function svg {
  margin: 10px 0;
  width: 40px;
  height: 40px;
  /*background: var(--accent);*/
}

.tools .container .end .content .function svg g {
  fill: var(--doppler);
}

.tools .container .end .content .function p {
  margin-bottom: 20px;
  font-size: 24px;
  color: #1C2B33;
}

.tools .container .end .content .function span {
  margin-top: 20px;
  color: #47535c;
}

.why {
  width: 100%;
  /*background: linear-gradient(90deg ,#2E3AA6, #8F3AA2);*/
  background: #12305a;
  /*background-image: url("../images/background.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: local;*/
}

.why .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  padding: 80px 200px;
  padding-bottom: 40px;
}

.why .container .head {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: end;
  width: 100%;
}

.why .container .head .button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 3px 10px;
  padding-right: 4px;
  border-radius: 25px;
  background: white;
  transition: .5s ease-in-out;
}

.why .container .head .button span {
  margin: 0;
  margin-left: 20px;
  color: var(--doppler);
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.why .container .head .button svg {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: var(--doppler);
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.why .container .head .button svg g {
  fill: white;
  transition: .5s ease-in-out;
}

.why .container .head .button:hover {
  background: transparent;
  cursor: pointer;
}

.why .container .head .button:hover span {
  color: var(--white);
  cursor: pointer;
}

.why .container .head .button:hover svg {
  background: var(--white);
}

.why .container .head .button:hover svg g {
  fill: var(--doppler);
}

.why .container span:nth-child(1) {
  margin-top: 20px;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: 500;
  color: white;
}

.why .container p:nth-child(2) {
  margin: 10px 0;
  font-size: 32px;
  letter-spacing: .02em;
  width: 70%;
  line-height: 1.1;
  color: white;
  text-align: start;
}

.why .container span:nth-child(3) {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 70%;
  color: white;
  font-size: 16px;
}

.why .container .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  gap: 30px;
  width: 100%;
  padding: 30px 0;
}

.why .container .content img {
  width: 55%;
  object-fit: cover;
  border-radius: 30px;
}

.why .container .content .details {
  display: flex;
  flex-direction: row;
  align-items: start;
  flex-wrap: wrap;
  gap: 30px;
  width: 45%;
}

.why .container .content .stack {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  width: calc(50% - 15px);
  padding: 0 20px;
  border-radius: 10px;
  color: white;
  cursor: default;
}

.why .container .content .stack:nth-child(1) {
  margin-left: 0;
}

.why .container .content .stack:last-child {
  margin-right: 0;
}

.why .container .content .stack svg {
  margin: 20px 0;
  width: 80px;  
  height: 80px;
  transition: .5s;
}

.why .container .content .stack svg g {
  fill: white;
  transition: .5s;
}

.why .container .content .stack span {
  text-align: start;
  font-size: 16px;
  width: 100%;
  transition: .5s;
}

.why .container .content .stack .title {
  font-size: 1.4em;
}

.christmas {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  color: white;
  text-align: start;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
  gap: 20px;
  font-size: 2.5em;
  width: 100%;
  height: 680px;
  padding: 0 200px;
  background-image: url("../images/christmas_blue.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.christmas h2 {
  margin-bottom: 20px;
}

.christmas .card p {
  font-size: 0.6em;
}

.christmas a {
  font-size: 0.5em;
  color: white;
}

.projects {
  width: 100%;
  background-color: rgb(255, 255, 255);
  background-color: #F3F7FB;
}

.projects .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 30px 200px;
}

.projects .container span:nth-child(1) {
  margin-top: 20px;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: 500;
  color: var(--doppler);
}

.projects .container p {
  margin: 10px 0;
  width: 70%;
  font-size: 32px;
  color: #0f2341;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
}

.projects .container span:nth-child(3) {
  margin-top: 10px;
  margin-bottom: 20px;
  width: 70%;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
  color: #47535c;
  font-weight: normal;
}

.projects .container .button {
  margin: 15px 0;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 240px;
  height: 50px;
  padding: 3px;
  border-radius: 25px;
  background: var(--doppler);
  transition: .5s ease-in-out;
}

.projects .container .button span {
  margin: 0;
  margin-left: 20px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.projects .container .button svg {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.projects .container .button svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.projects .container .button:hover {
  background: transparent;
  cursor: pointer;
}

.projects .container .button:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.projects .container .button:hover svg {
  background: var(--doppler);
}

.projects .container .button:hover svg g {
  fill: white;
}

.projects .container .stack {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  padding: 20px 0;
  gap: 30px;  
}

.projects .container .stack .project {
  position: relative;
  display: flex;
  flex-direction: column;
  width: calc(33% - 20px);
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.projects .container .stack .project .image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: .5s;
  border-radius: 20px;
  overflow: hidden;
}

.projects .container .stack .project .image .background {
  width: 100%;
  transition: .5s;
}

.projects .container .stack .project .image svg {
  position: absolute;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 20px;
  opacity: 0;
  transition: .5s;
}

.projects .container .stack .project .image svg g {
  fill: white;
}

.projects .container .stack .project .image .left {
  left: 10px;
  transform: rotate(90deg);
}

.projects .container .stack .project .image .right {
  right: 10px;
  transform: rotate(-90deg);
}

.projects .container .stack .project .content {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: 100%;
  padding: 15px 0;
  z-index: 100;
}

.projects .container .stack .project .content span:nth-child(1) {
  margin: 0;
  margin-bottom: 10px;
  width: 100%;
  font-size: 16px;
  letter-spacing: .02em;
  -webkit-text-fill-color: #616161;
  line-height: 1.1;
  text-align: start;
  color: #616161;
  font-weight: normal;
}

.projects .container .stack .project .content p {
  margin: 0;
  margin-bottom: 10px;
  width: auto;
  font-size: 22px;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #1C2B33;
  text-align: start;
  font-weight: 500;
}

.projects .container .stack .project .content span:nth-child(3) {
  margin: 0;
  width: calc(100% - 60px);
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: start;
  color: #616161;
  font-weight: normal;
  word-break: break-word;
}

.projects .container .stack .project:hover .content p {
  color: var(--doppler);
}

.projects .container .stack .project .open {
  position: absolute;
  right: 0;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1.5em;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--doppler);
  transform: rotate(-45deg);
  transition: .5s;
}

.projects .container .stack .project .open svg {
  width: 30px;
  height: 30px;
}

.projects .container .stack .project:hover .open {
  background: var(--accent);
}

.projects .container .stack .project .labels {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 20px;
}

.projects .container .stack .project .labels .label {
  text-wrap: nowrap;
  padding: 5px 15px;
  border-radius: 20px;
  border: 1px solid #616161;
  color: #616161;
}

.contact {
  width: 100%;
  background: linear-gradient(white 65%, var(--doppler) 35%);
}

.contact .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 20px;
}

.contact .container span {
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: 500;
  color: var(--doppler);
}

.contact .container p {
  margin: 20px;
  font-size: 32px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
  color: #0f2341;
}

.contact .container .content {
  display: flex;
  flex-direction: row;
  width: 860px;
  background: white;
  border-radius: 30px;
  overflow: hidden;
}

.contact .container .content .image {
  margin-top: 5px;
  margin-left: 3px;
  padding: 10px;
  width: 50%;
  border-radius: 20px;
  overflow: hidden;
}

.contact .container .content .image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  user-select: none;
  pointer-events: none;
}

.contact .container .content .stack {
  width: 50%;
  height: 100%;
  padding: 10px 0;
}

.contact .container .content .stack input {
  margin-left: 10px;
  margin-bottom: 20px;
  width: calc(50% - 20px);
  height: 40px;
  padding: 10px;
  outline: 1px solid #b6b6b6;
  border-radius: 10px;
  border: none;
  transition: .5s;
}

.contact .container .content .stack input:focus {
  outline: 1px solid #295ba1;
}

.contact .container .content .stack input:nth-child(1),
.contact .container .content .stack input:nth-child(2) {
  margin-top: 20px;
}

.contact .container .content .stack textarea {
  margin-left: 10px;
  min-width: calc(100% - 27px);
  max-width: calc(100% - 27px);
  min-height: 80px;
  max-height: 80px;
  padding: 10px;
  outline: 1px solid #b6b6b6;
  border-radius: 10px;
  border: none;
  transition: .5s;
}

.contact .container .content .stack .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 10px);
}

.contact .container .content .stack .button {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  color: #24D366;
  font-weight: bold;
  transition: .5s;
}

.contact .container .content .stack .button svg {
  width: 40px;
  height: 40px;
}

.contact .container .content .stack .button svg g {
  fill: #24D366;
  transition: .5s;
}

.contact .container .content .stack .button:hover {
  color: #1a9649;
  cursor: pointer;
}

.contact .container .content .stack .button:hover svg g {
  fill: #1a9649;
}

.contact .container .content .stack .button-send {
  margin-top: 10px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 50px;
  padding: 3px;
  padding-right: 4px;
  border-radius: 25px;
  background: var(--doppler);
  transition: .5s ease-in-out;
}

.contact .container .content .stack .button-send span {
  margin: 0;
  margin-left: 17px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.contact .container .content .stack .button-send svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.contact .container .content .stack .button-send svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.contact .container .content .stack .button-send:hover {
  background: white;
  cursor: pointer;
}

.contact .container .content .stack .button-send:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.contact .container .content .stack .button-send:hover svg {
  background: var(--doppler);
}

.contact .container .content .stack .button-send:hover svg g {
  fill: white;
}

.a_port .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.a_port .background .back {
  margin-top: 0px;
  margin-left: 210px;
  width: calc(100% - 200px);
  height: 900px;
  background-image: url("../images/us.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: local;
  filter: brightness(0.8);
}

.section_title {
  font-size: 2.8em;
  letter-spacing: .02em;
  line-height: 1.1;
  cursor: default;
}

.origin {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding: 40px 11%;
  margin-top: 80px;
}

.origin .container {
  width: calc(50% - 40px);
  color: #2f2f2f;
  padding: 20px 0;
}

.origin .content {
  width: calc(50% - 40px);
  padding: 0 20px;
}

.origin .container .image {
  margin-top: 30px;
  width: 100%;
  /*border-radius: 20px;*/
}

.origin .content .button {
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 50px;
  padding: 3px;
  border: 2px solid var(--doppler);
  border-radius: 25px;
  background: var(--doppler);
  transition: .5s ease-in-out;
}

.origin .content .button span {
  margin: 0;
  margin-left: 17px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.origin .content .button svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.origin .content .button svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.origin .content .button:hover {
  background: white;
  cursor: pointer;
}

.origin .content .button:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.origin .content .button:hover svg {
  background: var(--doppler);
}

.origin .content .button:hover svg g {
  fill: white;
}

.mision {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 60px 11%;
  margin-top: 20px;
}

.mision .container {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: #2f2f2f;
  padding: 20px 0;
}

.mision .container .section_title {
  width: 50%;
}

.mision .container .section_description {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.mision .container .section_description span {
  display: block;
  width: calc(50% - 30px);
  color: #69696e;
  letter-spacing: -.01em;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  font-family: Manrope, sans-serif;
}

.mision .content {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.mision .content .image {
  width: calc(100%/3 - 30px);
  /*border-radius: 20px;*/
}

.team {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px 11%;
  padding-bottom: 60px;
}

.team .stack {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.team .stack .container {
  margin-top: 20px;
  width: calc(50% - 30px);
}

.team .stack .content {
  width: calc(50% - 30px);
}

.team .stack:last-child {
  margin-top: 20px;
  flex-direction: column;
}

.team .stack:last-child .container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  width: 100%;
  overflow: scroll;
}

.team .stack:last-child .container img {
  margin-right: 40px;
  max-width: 450px;
  max-height: 650px;
  pointer-events: none;
  user-select: none;
}

.team .stack:last-child .container img:last-child {
  margin: 0;
}

.team .stack:last-child .content {
  width: 50%;
}

.values {
  width: 100%;
  padding: 30px 11%;
  padding-bottom: 60px;
}

.values .container {
  margin-right: 40px;
  width: 50%;
}

.values .content {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
}

.values .content .value {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100%/5 - 40px);
  height: 300px;
  padding: 0 20px;
  border-radius: 20px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  text-align: center;
}

.values .content .value svg {
  margin: 10px 0 20px 0;
  width: 80px;
  height: 80px;
  transition: .5s;
}

.values .content .value svg g {
  fill: var(--doppler);
}

.values .content .value span {
  font-size: 20px;
  font-weight: normal;
  color: var(--doppler);
  cursor: default;
}

.values .content .value p {
  margin-top: 10px;
  cursor: default;
}

.news {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px 200px;
  padding-bottom: 0;
  background-color: white;
}

.news .container {
  margin-right: 40px;
  display: flex;
  flex-direction: column;
  width: calc(50% - 40px);
}

.news .container_i {
  margin-right: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.news .container_i span:nth-child(1) {
  margin-top: 20px;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: 500;
  color: var(--doppler);
  text-align: center;
}

.news .container_i p {
  margin: 10px 0;
  font-size: 32px;
  letter-spacing: .02em;
  line-height: 1.1;
  width: calc(70% - 20px);
  color: #0f2341;
  text-align: center;
}

.news .container_i span:nth-child(3) {
  margin-top: 10px;
  margin-bottom: 20px;
  width: calc(70% - 20px);
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
  color: #47535c;
}

.news .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  align-items: stretch;
  width: 100%;
  padding: 20px 0;
  gap: 30px;
}

.news .content .post {
  display: flex;
  flex-direction: column;
  width: calc(33% - 15px);
  padding: 10px;
  border-radius: 20px;
  /*box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);*/
  color: #1C2B33;
  text-decoration: none;
}

.news .content .post .image {
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
  cursor: pointer;
}

.news .content .post .image img {
  width: 100%;
  transition: .5s ease-in-out;
}

.news .content .post .details {
  position: relative;
  margin-top: -5px;
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  background: white;
  z-index: 5;
}

.news .content .post .lab {
  position: absolute;
  top: -20px;
  left: -20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  color: white;
  background: var(--accent);
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  font-weight: bold;
  cursor: pointer;
}

.news .content .post .lab::before {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  content: '';
  width: 10px;
  height: 10px;
  background: var(--doppler);  
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 5%);
}

.news .content .post .title {
  margin-top: 15px;
  font-size: 28px;
  font-family: Manrope, sans-serif;
  max-lines: 2;
  line-break: loose;
  color: #1C2B33;
  max-height: 64px;
  overflow: hidden;
  cursor: pointer;
}

.news .content .post .data {
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.news .content .post .data .date {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.news .content .post .data .user {
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.news .content .post .data svg {
  margin-right: 5px;
  width: 20px;
  height: 20px;
}

.news .content .post .data svg g {
  fill: var(--doppler);
}

.news .content .post .data span {
  font-size: 14px;
  font-weight: bold;
  color: var(--doppler);
}

.news .content .post .info {
  font-weight: 500;
  color: #69696e;
  font-family: Manrope, sans-serif;
  max-height: 36px;
  word-break: break-all;
  color: #47535c;
  overflow: hidden;
}

.news .content .post .buttons {
  margin-top: 10px;
  margin-bottom: 5px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  overflow: hidden;
}

.news .content .post .buttons div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.news .content .post .buttons svg {
  width: 30px;
  height: 30px;
}

.news .content .post .buttons div:nth-child(1) svg {
  width: 40px;
  height: 40px;
}

.news .content .post .buttons svg g {
  fill: #242424;
}

.news .content .post .buttons span {
  margin: 0;
  margin-left: 5px;
  color: #242424;
  letter-spacing: .02em;
  line-height: 1.1;
  font-size: 1.1em;
  text-wrap: nowrap;
}

.news .content .post .buttons div:hover {
  background: white;
  cursor: pointer;
}

.news .content .post .buttons div:hover span {
  color: #145fa5;
}

.news .content .post .buttons div:hover svg g {
  fill: #145fa5;
}

.news .content .post:hover {
  cursor: default;
}

.news .content .post:hover img {
  transform: scale3d(1.1,1.1,1);
}

.news .content .post:hover .title {
  color: #145fa5;
}

.news .content .post:hover .date {
  color: #145fa5;
}

.history {
  width: 100%;
  padding: 30px 11%;
  padding-bottom: 60px;
}

.history .container {
  display: flex;
  flex-direction: column;
}

.history .container .timelaps {
  position: relative;
  margin-top: 100px;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--doppler);
  cursor: pointer;
}

.history .container .timelaps .dates {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  pointer-events: none;
}

.history .container .timelaps .dates div {
  position: relative;
  margin-top: 20px;
  color: var(--doppler);
  pointer-events: auto;
  cursor: pointer;
}

.history .container .timelaps .dates div::after {
  position: absolute;
  top: -16px;
  left: calc(50% - 1px);
  content: '';
  width: 2px;
  height: 8px;
  background: var(--doppler);
  cursor: default;
}

.history .container .timelaps .cursor {
  position: absolute;
  top: -8px;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: var(--doppler);
  border: 3px solid white;
  cursor: grab;
}

.history .container .timelaps:hover {
  cursor: pointer;
}

.section_description {
  margin-top: 20px;
  color: #69696e;
  letter-spacing: -.01em;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  font-family: Manrope, sans-serif;
}

.a_port .section_description {
  font-size: 18px;
  color: white;
}

.section_description a {
  text-decoration: none;
  color: var(--doppler);
  font-weight: bold;
  transition: .5s ease-in-out;
}

.section_description a:hover {
  text-decoration: underline;
}

.a_services {
  margin-bottom: -20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 20px;
  background: linear-gradient(white 70%, var(--doppler) 30%);
}

.a_services .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--doppler);
  color: white;
  width: calc(100%/2);
  padding: 30px 30px;
  padding-bottom: 0;
  border-radius: 30px;
}

.a_services .container .button {
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 180px;
  height: 50px;
  padding: 3px;
  border: 2px solid white;
  border-radius: 25px;
  background: var(--doppler);
  transition: .5s ease-in-out;
}

.a_services .container .button span {
  margin: 0;
  margin-left: 20px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.a_services .container .button svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transition: .5s ease-in-out;
}

.a_services .container .button svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.a_services .container .button:hover {
  background: white;
  cursor: pointer;
}

.a_services .container .button:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.a_services .container .button:hover svg {
  background: var(--doppler);
}

.a_services .container .button:hover svg g {
  fill: white;
}

.s_port,
.p_port {
  width: 100%;
  height: 400px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 0 200px;
  background: var(--doppler);
}

.s_port {
  height: 400px;
}

.s_port .background,
.p_port .background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.s_port .background .back,
.p_port .background .back {
  margin-left: 210px;
  width: calc(100% - 200px);
  height: 100%;
  background-image: url("../images/projects.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: local;
  filter: brightness(0.8);
}

.s_port .background .back {
  margin-left: 210px;
  width: calc(100% - 200px);
  height: 100%;
  background-image: url("../images/development.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: local;
  filter: brightness(0.8);
}

.s_port .container,
.p_port .container {
  margin-top: 90px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  text-align: start;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  cursor: default;
  background: linear-gradient(90deg, var(--doppler) 40%, rgb(24, 55, 97, 0.5), transparent);
  width: calc(50% - 100px);
  height: 100%;
}

.s_port .container {
  margin-top: 80px;
}

.s_port .container .section_description,
.p_port .container .section_description {
  color: white;
}

.s_port .container .button,
.p_port .container .button {
  margin-top: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 230px;
  height: 50px;
  padding: 3px;
  border: 2px solid white;
  text-decoration: none;
  border-radius: 25px;
  background: white;
  transition: .5s ease-in-out;
}

.s_port .container .button {
  width: fit-content;
  gap: 15px;
}

.s_port .container .button span,
.p_port .container .button span {
  margin: 0;
  margin-left: 20px;
  color: var(--doppler);
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.s_port .container .button svg,
.p_port .container .button svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: var(--doppler);
  border-radius: 20px;
  transition: .5s ease-in-out;
}

.s_port .container .button svg g,
.p_port .container .button svg g {
  fill: white;
  transition: .5s ease-in-out;
}

.s_port .container .button:hover,
.p_port .container .button:hover {
  background: var(--doppler);
  cursor: pointer;
}

.s_port .container .button:hover span,
.p_port .container .button:hover span {
  color: white;
  cursor: pointer;
}

.s_port .container .button:hover svg,
.p_port .container .button:hover svg {
  background: white;
}

.s_port .container .button:hover svg g,
.p_port .container .button:hover svg g {
  fill: var(--doppler);
}

.service-header {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 100%;
  gap: 20px;
  padding: 15px 200px;
  padding-top: 110px;
  color: #434d55;
}

.service-header img {
  margin-bottom: 10px;
  width: 100%;
  border-radius: 30px;
  height: 500px;
  object-fit: cover;
}

.service-header p {
  display: flex;
  gap: 10px;
}

.service-header p span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  font-size: 24px;
  border-radius: 20px;
  background: var(--doppler);
  color: white;
}

.service-header .button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 4px 20px;
  padding-right: 4px;
  gap: 15px;
  text-decoration: none;
  background: var(--doppler);
  border-radius: 25px;
  color: white;
  transition: .5s;
}

.service-header .button svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
}

.service-header .button svg g {
  fill: var(--doppler);
}

.service-header .button:hover {
  background: transparent;
  color: var(--doppler);
}

.service-header .button:hover svg {
  background: var(--doppler);
}

.service-header .button:hover svg g {
  fill: white;
}

.service-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 20px;
  padding: 30px 200px;
  color: #1C2B33;
}

.service-content:nth-child(even) {
  background-color: #F3F7FB;
}

.service-header h1,
.service-content h2 {
  font-size: 32px;
  letter-spacing: .02em;
  font-weight: 400;
  color: #1C2B33;
  color: #0c2063;
}

.service-content ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.service-content .technologies {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

.service-content .technologies .technology {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  gap: 10px;
  width: calc(100%/6 - 10px);
  border-radius: 20px;
  color: #1C2B33;
}

.service-content .technologies .technology::before {
  position: absolute;
  top: 0;
  content: ' ';
  width: 160px;
  max-width: 100%;
  height: 100%;
  border-radius: 20px;
  border: 1px solid white;
  transition: .2s;
  cursor: pointer;
}

.service-content .technologies .technology:hover::before {
  border-color:#cacaca;
}

.service-content .images {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.service-content .images img {
  width: 50%;
  object-fit: cover;
}

.service-content .app-types {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-self: stretch;
  flex-wrap: wrap;
  width: 100%;
}

.service-content .app-types .app-type {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  width: 50%;
  color: #1C2B33;
  border: 1px solid #e0e0e0;
}

.service-content .app-types .app-type a {
  color: #061239;
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
}

.service-content .app-types .app-type a:hover {
  text-decoration: underline;
}

.service-content .ui-essence {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-content .ui-essence .ui-features {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
  padding: 10px 0;
  font-size: 20px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

.service-content .ui-methods,
.service-content .ui-elements {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.service-content .ui-methods .ui-method {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 15px;
  width: calc(100%/3);
  border: 1px solid #e0e0e0;
}

.service-content .ui-methods .ui-method h3,
.service-content .ui-elements .ui-element h3 {
  color: #061239;
}

.service-content .ui-elements .ui-element {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: calc(100%/5);
  padding: 20px 15px;
  border: 1px solid #e0e0e0;
}
  
.p_projects {
  margin: 60px 0;
  width: 100%;
  padding: 0 200px;
}

.p_projects .content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.p_projects .content .project {
  margin-bottom: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  width: calc(100%/3 - 20px);
  text-decoration: none;
  background: white;
  border-radius: 20px;
  box-shadow: 0 0 5px #b8b8b8;
  overflow: hidden;
}

.p_projects .content .project .image {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  transition: .5s;
}

.p_projects .content .project .image .background {
  width: 100%;
  transition: .5s;
}

.p_projects .content .project .image svg {
  position: absolute;
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  border-radius: 20px;
  opacity: 0;
  transition: .5s;
}

.p_projects .content .project .image svg g {
  fill: white;
}

.p_projects .content .project:nth-child(4) .image svg g,
.p_projects .content .project:nth-child(7) .image svg g {
  fill: #333;
}

.p_projects .content .project .image .left {
  left: 10px;
  transform: rotate(90deg);
}

.p_projects .content .project .image .right {
  right: 10px;
  transform: rotate(-90deg);
}

.p_projects .content .project .logo {
  position: absolute;
  left: 30px;
  bottom: 130px;
  display: none;
  width: 60px;
  height: 60px;
  background: #0099FF;
  border-radius: 30px;
  transition: .5s;
}

.p_projects .content .project .content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 10px;
  background: white;
  z-index: 100;
}

.p_projects .content .project .content span:nth-child(1) {
  margin: 0;
  margin-bottom: 10px;
  width: 100%;
  font-size: 12px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
  color: #616161;
  font-weight: normal;
}

.p_projects .content .project .content p {
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  width: auto;
  font-size: 20px;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #1f1f1f;
  font-weight: normal;
}

.p_projects .content .project .content span:nth-child(3) {
  margin: 0;
  width: 100%;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-align: center;
  color: #616161;
  font-weight: normal;
}

.p_projects .content .project .see {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.1;
  text-decoration: none;
  opacity: 0;
  transition: .5s ease-in-out;
}

.p_projects .content .project:nth-child(4) .see,
.p_projects .content .project:nth-child(5) .see,
.p_projects .content .project:nth-child(7) .see {
  color: #333;
}

.p_projects .content .project .see:hover {
  text-decoration: underline;
}

.p_projects .content .project:hover {
  cursor: pointer;
}

.p_projects .content .project:hover .image .background {
  transform: scale3d(1.1,1.1,1);
}

.p_projects .content .project:hover .image svg {
  display: none;
  opacity: 1;
}

.p_projects .content .project .image svg:hover {
  background: rgba(126, 126, 126, 0.2);
  padding: 5px;
  padding-top: 7px;
  padding-bottom: 3px;
}

.p_projects .content .project .content:hover {
  cursor: default;
}

.p_projects .content .project .content p:hover {
  color: #0043a0;
  cursor: pointer;
}

.p_projects .content .project:hover .see {
  opacity: 1;
}

.n_port {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 300px;
  background: var(--doppler);
}

.n_port .background {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.n_port .background .back {
  width: 100%;
  height: 100%;
  background-image: url("../news/images/banner.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: local;
  filter: brightness(0.8);
}

.n_port .container {  
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  height: 100%;
  padding: 0 200px;
  background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

.n_port .container .section_title {
  margin-top: 100px;
  width: 50%;
  color: white;
}

.n_port .container .section_description {
  width: 50%;
  color: #cacaca;
}

.categories {
  /*position: fixed;*/
  top: 80px;
  width: 100%;
  height: 50px;
  border-top: 2px solid rgba(110, 110, 110, 0.2);
  border-bottom: 2px solid rgba(110, 110, 110, 0.2);
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  z-index: 20;
}

.categories .container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 200px;
}

.categories .container .category {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(100%/7);
  height: 100%;
  text-decoration: none;
}

.categories .container .category span {
  margin: 0 20px;
  color: rgba(41, 41, 41, 0.8);
  letter-spacing: .02em;
  line-height: 1;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
}

.categories .container .category.active span {
  color: #244e8a;
}

.categories .container .category .indicator {
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 0;
  height: 3px;
  background: #244e8a;
  border-radius: 2px;
  transition: .5s;
}

.categories .container .category.active .indicator {
  left: 0;
  width: 100%;
}

.categories .container .category:hover {
  cursor: pointer;
}

.categories .container .category:hover span {
  color: #244e8a;
}

.categories .container .category:hover .indicator {
  left: 0;
  width: 100%;
}

.news_container {
  margin-top: 30px;
  width: 100%;
}

.news_container .container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  width: 100%;
  height: 100%;
  gap: 30px;
  padding: 0 200px;
  margin-bottom: 40px;
}

.news_container .container .post {
  display: flex;
  flex-direction: column;
  width: calc(100%/4 - 15px);
  padding: 10px;
  border-radius: 20px 20px 30px 30px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
  color: black;
  text-decoration: none;
  overflow: hidden;
}

.news_container .container .post .image {
  margin-bottom: 10px;
  width: 100%;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.news_container .container .post .image img {
  width: 100%;
  transition: .5s ease-in-out;
}

.news_container .container .post .lab {
  margin-bottom: 5px;
  color: var(--doppler);
  font-weight: bold;
}

.news_container .container .post .title {
  font-size: 28px;
  font-family: Manrope, sans-serif;
  cursor: default;
}

.news_container .container .post .data {
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}

.news_container .container .post .data .date {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.news_container .container .post .data .user {
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.news_container .container .post .data svg {
  margin-right: 5px;
  width: 20px;
  height: 20px;
}

.news_container .container .post .data svg g {
  fill: var(--doppler);
}

.news_container .container .post .data span {
  font-size: 14px;
  font-weight: bold;
  color: var(--doppler);
}

.news_container .container .post .info {
  font-weight: 500;
  color: #69696e;
  font-family: Manrope, sans-serif;
}

.news_container .container .post .buttons {
  margin-top: 10px;
  margin-bottom: 5px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 40px;
}

.news_container .container .post .buttons div {
  margin-right: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.news_container .container .post .buttons svg {
  width: 30px;
  height: 30px;
}

.news_container .container .post .buttons div:nth-child(1) svg {
  width: 40px;
  height: 40px;
}

.news_container .container .post .buttons svg g {
  fill: #242424;
}

.news_container .container .post .buttons span {
  margin: 0;
  margin-left: 5px;
  color: #242424;
  letter-spacing: .02em;
  line-height: 1.1;
  font-size: 1.1em;
}

.news_container .container .post .buttons div:hover {
  background: white;
  cursor: pointer;
}

.news_container .container .post .buttons div:hover span {
  color: #145fa5;
}

.news_container .container .post .buttons div:hover svg g {
  fill: #145fa5;
}

.news_container .container .post:hover {
  cursor: default;
}

.news_container .container .post:hover img {
  transform: scale3d(1.1,1.1,1);
}

.news_container .container .post:hover .lab {
  color: #145fa5;
  text-decoration: underline;
}

.news_container .container .post:hover .title {
  color: #145fa5;
}

.news_container .container .post:hover .date {
  color: #145fa5;
}

.c_port {
  width: 100%;
  height: 400px;
  padding: 0 200px;
}

.c_port .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.contact_container {
  margin-top: -120px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding: 0 200px;
}

.contact_container .container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: calc(50% - 30px);
}

.contact_container .container form {
  margin-top: 20px;
  width: 100%;
}

.contact_container .container input {
  margin-bottom: 10px;
  width: calc(50% - 10px);
  height: 50px;
  padding: 0 20px;
  border-radius: 10px;
  outline: none;
  border: 1px solid rgba(110, 110, 110, 0.7);
}


.contact_container .container input:nth-child(1),
.contact_container .container input:nth-child(3) {
  margin-right: 15px;
}

.contact_container .container textarea {
  min-width: 100%;
  max-width: 100%;
  min-height: 200px;
  max-height: 200px;
  padding: 20px;
  border-radius: 10px;
  outline: none;
  border: 1px solid rgba(110, 110, 110, 0.7);
}

.contact_container .container .buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(100% - 10px);
}

.contact_container .container .button {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 40px;
  color: #24D366;
  font-weight: bold;
  transition: .5s;
}

.contact_container .container .button svg {
  width: 40px;
  height: 40px;
}

.contact_container .container .button svg g {
  fill: #24D366;
  transition: .5s;
}

.contact_container .container .button:hover {
  color: #1a9649;
  cursor: pointer;
}

.contact_container .container .button:hover svg g {
  fill: #1a9649;
}

.contact_container .container .button-send {
  margin-top: 10px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 200px;
  height: 50px;
  padding: 3px;
  border: 2px solid var(--doppler);
  border-radius: 25px;
  background: var(--doppler);
  transition: .5s ease-in-out;
}

.contact_container .container .button-send span {
  margin: 0;
  margin-left: 17px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.contact_container .container .button-send svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.contact_container .container .button-send svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.contact_container .container .button-send:hover {
  background: white;
  cursor: pointer;
}

.contact_container .container .button-send:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.contact_container .container .button-send:hover svg {
  background: var(--doppler);
}

.contact_container .container .button-send:hover svg g {
  fill: white;
}

.contact_container .content {
  width: calc(50% - 30px);
  overflow: hidden;
}

.contact_container .content .image {
  width: 100%;
  transform: scaleX(-100%);
}

.schedule {
  margin: 40px 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 400px;
  padding: 0 200px;
}

.schedule .container {
  display: flex;
  flex-direction: column;
  width: 400px;
}

.schedule .section_title {
  font-size: 1.8em;
  margin-bottom: 20px;
}

.schedule .content {
  margin-top: 60px;
  width: calc(100% - 400px);
  height: calc(100% - 60px);
}

.schedule .content iframe {
  width: 100%;
  height: 100%;
  box-shadow: 0 0 2px #747474;
  border-radius: 10px;
}

.s_services {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 200px;
}

.s_services .container {
  width: 100%;
}

.s_services .content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.s_services .content .s_service {
  padding-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid rgba(64, 64, 64, 0.424);
}

.s_services .content .s_service:nth-child(2),
.s_services .content .s_service:nth-child(4) {
  flex-direction: row-reverse;
}

.s_services .content .s_service .stack {
  display: flex;
  flex-direction: column;
  width: 50%;
  padding: 20px;
}

.s_services .content .s_service .stack .first {
  position: relative;
  display: flex;
  flex-direction: column;
}

.s_services .content .s_service .stack .first .button {
  position: absolute;
  top: 25px;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 140px;
  height: 50px;
  padding: 3px;
  border: 2px solid var(--doppler);
  border-radius: 25px;
  background: var(--doppler);
  text-decoration: none;
  transition: .5s ease-in-out;
}

.s_services .content .s_service .stack .first .button span {
  margin: 0;
  margin-left: 17px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.s_services .content .s_service .stack .first .button svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transform: rotate(-90deg);
  transition: .5s ease-in-out;
}

.s_services .content .s_service .stack .first .button svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.s_services .content .s_service .stack .first .button:hover {
  background: white;
  cursor: pointer;
}

.s_services .content .s_service .stack .first .button:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.s_services .content .s_service .stack .first .button:hover svg {
  background: var(--doppler);
}

.s_services .content .s_service .stack .first .button:hover svg g {
  fill: white;
}

.s_services .content .s_service .stack:nth-child(2) {
  justify-content: center;
  align-items: center;
  height: 100%;
}

.s_services .content .s_service .stack svg {
  width: 100px;
  height: 100px;
}

.s_services .content .s_service .stack svg g {
  fill: var(--doppler);
}

.s_services .content .s_service .stack .section_title {
  font-size: 2em;
  color: var(--doppler);
}

.s_services .content .s_service .stack .image {
  margin-top: 10px;
  width: 100%;
}

.s_services .content .s_service .stack .section_subtitle {
  margin-top: 20px;
}

.section_subtitle {
  margin-top: 20px;
  font-size: 20px;
  letter-spacing: .02em;
  line-height: 1.1;
}

.new_container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding: 0 200px;
  padding-bottom: 40px;
  background-image: url("../images/back.png");
}

.new_content {
  margin-top: 80px;
  width: calc(70% - 10px);
  padding: 40px;
  background: white;
}

.new_widgets {
  margin-top: 80px;
  width: calc(30% - 10px);
  padding: 40px;
  background: white;
}

.new_port {
  width: 100%;
}

.new_port h1 {
  font-size: 3em;
}

.new_port img {
  margin-top: 20px;
  width: 100%;
}

.new_port .new_categories {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 40px;
}

.new_port .new_categories a {
  margin-right: 40px;
  color: #6d6d6d;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.new_port .new_categories a:hover {
  color: #204981;
  text-decoration: underline;
}

.new_port .data {
  position: relative;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
}

.new_port .data .date {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #6d6d6d;
  text-decoration: none;
}

.new_port .data .user {
  margin-left: 10px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  color: #6d6d6d;
  text-decoration: none;
}

.new_port .data svg {
  margin-right: 10px;
  width: 25px;
  height: 25px;
}

.new_port .data svg g {
  fill: #6d6d6d;
}

.new_port .data span {
  font-size: 14px;
}

.new_port .data .user svg {
  width: 20px;
  height: 20px;
}

.new_port .data .date:hover svg g,
.new_port .data .user:hover svg g {
  fill: #204981;
}

.new_port .data .date:hover span,
.new_port .data .user:hover span {
  color: #204981;
  text-decoration: underline;
}

.new_port .data .share {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.new_port .data .share a {
  margin-left: 10px;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  color: black;
  text-decoration: none;
}

.new_port .data .share svg {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.new_port .data .share .shareBtn {
  cursor: pointer;
}

.new_port .data .share .shareBtn span {
  width: 0;
  color: #006aff;
  transition: .5s;
  overflow: hidden;
}

.new_port .data .share .shareFacebook:hover svg g {
  fill: #006aff;
}

.new_port .data .share .shareTwitter:hover svg g {
  fill: #3498D8;
}

.new_port .data .share .shareLinkedin:hover svg g {
  fill: #007AB9;
}

.new_port .data .share .shareWhatsApp:hover svg g {
  fill: #00B241;
}

.new_port .data .share .shareBtn:hover svg g {
  fill: #006aff;
}

.new_port .data .share .shareBtn:hover span {
  width: 65px;
}

.writer {
  margin-top: 30px;
  display: flex;
  flex-direction: row;
}

.writer .avatar img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
}

.writer .data {
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

.writer .data .name {
  font-size: 1.2em;
  font-weight: bold;
}

.writer .data .publications {
  margin-top: 5px;
  color: #145fa5;
  text-decoration: none;
  cursor: pointer;
}

.writer .data .publications:hover {
  text-decoration: underline;
}

.new_text {
  margin-top: 20px;
  width: 100%;
  font-size: 1.3em;
  color: #242424;
}

.new_text::first-letter {
  font-size: 1.4em;
}

.new_content .separator {
  margin: 30px 0;
  width: 100%;
  height: 1px;
  background: #242424;
}

.comments {
  display: flex;
  flex-direction: column;
}

.comments h2 {
  margin: 20px 0;
}

.comments .comment {
  margin: 20px 0;
  display: flex;
  flex-direction: column;
}

.comments .comment .container {
  display: flex;
  flex-direction: row;
}

.comments .comment .container .avatar img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  overflow: hidden;
}

.comments .comment .container .data {
  margin-left: 20px;
}

.comments .comment .container .data .name {
  font-size: 1.5em;
  cursor: pointer;
}

.comments .comment .container .data .name:hover {
  color: #204981;
}

.comments .comment .container .data .date {
  margin-top: 5px;
  font-size: 14px;
  color: #5e5e5e;
}

.comments .comment .container .data .message {
  margin-top: 20px;
  font-size: 1.1em;
  color: #242424;
}

.comments .comment .container .data .buttons {
  margin-top: 20px;
}

.comments .comment .container .data .buttons span {
  position: relative;
  margin-right: 30px;
  cursor: pointer;
}

.comments .comment .container .data .buttons .react .reactions {
  position: absolute;
  transform: translateY(0);
  left: calc(50% - 110px);
  display: none;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 220px;
  height: 0px;
  padding: 0 5px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: .5s;
}

.comments .comment .container .data .buttons .react .reactions span {
  margin: 0;
  transition: .5s;
}

.comments .comment .container .data .buttons .react .reactions span:hover {
  font-size: 20px;
}

.comments .comment .container .data .buttons .reply .cardReply {
  position: absolute;
  transform: translateY(0);
  left: calc(50% - 200px);
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 0;
  height: 0;
  padding: 10px 20px;
  color: #000000;
  background:  white;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  cursor: default;
  opacity: 0;
  transition: .5s;
  z-index: 100;
}

.comments .comment .container .data .buttons .reply .cardReply span {
  margin-bottom: 10px;
  cursor: default;
}

.comments .comment .container .data .buttons .reply .cardReply textarea {
  max-width: 100%;
  min-width: 100%;
  max-height: 0;
  min-height: 0;
  padding: 10px;
  border-radius: 5px;
  outline-color: rgba(20, 94, 163, 0.6);
  transition: .5s;
}

.comments .comment .container .data .buttons .reply .cardReply .buttons {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.comments .comment .container .data .buttons .reply .cardReply .buttons div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(50% - 20px);
  height: 40px;
  border: 1px solid #7a7a7a;
  border-radius: 5px;
  transition: .5s;
  cursor: pointer;
}

.comments .comment .container .data .buttons .reply .cardReply .buttons div:nth-child(1) {
  border-bottom-left-radius: 10px;
}

.comments .comment .container .data .buttons .reply .cardReply .buttons div:nth-child(2) {
  border-bottom-right-radius: 10px;
}

.comments .comment .container .data .buttons .reply .cardReply .buttons div:hover {
  background: #145fa5;
  color: white;
}

.comments .comment .container .data .buttons .react:hover,
.comments .comment .container .data .buttons .reply:hover {
  color: #204981;
}

.comments .comment .container .data .buttons .react.active .reactions {
  display: flex;
  height: 40px;
  transform: translateY(10px);
  opacity: 1;
}

.comments .comment .container .data .buttons .reply.active .cardReply {
  display: flex;
  width: 400px;
  height: 210px;
  transform: translateY(10px);
  opacity: 1;
}

.comments .comment .container .data .buttons .reply:hover .cardReply textarea {
  max-width: 100%;
  min-width: 100%;
  max-height: 100px;
  min-height: 100px;
}

.comments .comment .comment_replies {
  padding-left: 60px;
}

.comments .comment .comment_replies .comment_reply {
  padding-top: 30px;
  padding-left: 20px;
  display: flex;
  flex-direction: row;
  border-left: 1px solid #000000;
}

.comments .comment .comment_replies .comment_reply .avatar img {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  overflow: hidden;
}

.comments .comment .comment_replies .comment_reply .data {
  margin-left: 20px;
}

.comments .comment .comment_replies .comment_reply .data .name {
  font-size: 1.5em;
  cursor: pointer;
}

.comments .comment .comment_replies .comment_reply .data .name:hover {
  color: #204981;
}

.comments .comment .comment_replies .comment_reply .data .date {
  margin-top: 5px;
  font-size: 14px;
  color: #5e5e5e;
}

.comments .comment .comment_replies .comment_reply .data .message {
  margin-top: 20px;
  font-size: 1.1em;
  color: #242424;
}

.comments .comment .comment_replies .comment_reply .data .buttons {
  margin-top: 20px;
}

.comments .comment .comment_replies .comment_reply .data .buttons span {
  position: relative;
  margin-right: 30px;
  cursor: pointer;
}

.comments .comment .comment_replies .comment_reply .data .buttons .react .reactions {
  position: absolute;
  transform: translateY(0);
  left: calc(50% - 110px);
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 220px;
  height: 0px;
  padding: 0 5px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: .5s;
}

.comments .comment .comment_replies .comment_reply .data .buttons .react .reactions span {
  margin: 0;
  transition: .5s;
}

.comments .comment .comment_replies .comment_reply .data .buttons .react .reactions span:hover {
  font-size: 20px;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply {
  position: absolute;
  transform: translateY(0);
  left: calc(50% - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 0;
  height: 0;
  padding: 10px 20px;
  color: #000000;
  background:  white;
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  cursor: default;
  opacity: 0;
  transition: .5s;
  z-index: 100;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply span {
  margin-bottom: 10px;
  cursor: default;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply textarea {
  max-width: 100%;
  min-width: 100%;
  max-height: 0;
  min-height: 0;
  padding: 10px;
  border-radius: 5px;
  outline-color: rgba(20, 94, 163, 0.6);
  transition: .5s;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply .buttons {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply .buttons div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(50% - 20px);
  height: 40px;
  border: 1px solid #7a7a7a;
  border-radius: 5px;
  transition: .5s;
  cursor: pointer;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply .buttons div:nth-child(1) {
  border-bottom-left-radius: 10px;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply .buttons div:nth-child(2) {
  border-bottom-right-radius: 10px;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply .cardReply .buttons div:hover {
  background: #145fa5;
  color: white;
}

.comments .comment .comment_replies .comment_reply .data .buttons .react:hover,
.comments .comment .comment_replies .comment_reply .data .buttons .reply:hover {
  color: #204981;
}

.comments .comment .comment_replies .comment_reply .data .buttons .react.active .reactions {
  height: 40px;
  transform: translateY(10px);
  opacity: 1;
}

.comments .comment .comment_replies .comment_reply .data .buttons .reply.active .cardReply {
  width: 400px;
  height: 210px;
  transform: translateY(10px);
  opacity: 1;
}

.publish {
  margin-top: 20px;
  font-size: 1em;
}

.publish h2 {
  margin-bottom: 10px;
}

.publish input {
  margin-top: 20px;
  width: 300px;
  height: 40px;
  padding: 10px;
  outline: none;
  font-size: 1em;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
}

.publish input:hover,
.publish input:active {
  border-color: #145fa5;
}

.publish textarea {
  margin-top: 20px;
  max-width: 605px;
  min-width: 605px;
  max-height: 100px;
  min-height: 100px;
  padding: 10px;
  outline: none;
  font-size: 1em;
  border: 1px solid #3d3d3d;
  border-radius: 10px;
}

.publish textarea:hover {
  border-color: #145fa5;
}

.publish .buttons {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.publish .buttons .comment {
  margin-right: 20px;
  height: 40px;
  padding: 10px 20px;
  color: white;
  background: #0043a0;
  border: 1px solid #0043a0;
  border-radius: 10px;
  transition: .5s;
  cursor: pointer;
}

.publish .buttons .comment:hover {
  background: #0060e7;
}

.new_widgets .widget {
  margin-top: 30px;
  width: 100%;
}

.new_widgets .widget:first-child {
  margin-top: 15px;
}

.new_widgets .widget .advertisements {
  margin: 20px 0px;
  display: flex;
}

.new_widgets .widget .advertisements .ad {
  width: 100%;
  height: 400px;
  background: #0099FF;
  border-radius: 3px;
}

.new_widgets .widget_categories {
  margin-top: 10px;
  padding: 0 25px;
  font-size: 1em;
}

.new_widgets .widget_categories li {
  margin: 10px 0;
}

.new_widgets .widget_categories li a {
  text-decoration: none;
  font-size: 1.1em;
  color: #000000;
}

.new_widgets .widget_categories li a:hover {
  text-decoration: underline;
  color: #204981;
}

.new_widgets .widget .stack {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.new_widgets .widget .stack img {
  width: 100%;
}

.new_widgets .widget .stack .info {
  margin-top: 10px;
  font-size: 1.1em;
  width: 100%;
}

.new_widgets .widget .stack .info .data {
  display: flex;
  flex-direction: row;
}

.new_widgets .widget .stack .info .date,
.new_widgets .widget .stack .info .user {
  margin-top: 10px;
  margin-right: 10px;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  text-decoration: none;
  color: #000000;
}

.new_widgets .widget .stack .info svg {
  width: 25px;
  height: 25px;
}

.new_widgets .widget .stack .info svg g {
  fill: #6d6d6d;
}

.new_widgets .widget .stack .info .date span,
.new_widgets .widget .stack .info .user span {
  margin-left: 10px;
  font-size: 15px;
  color: #5e5e5e;
}

.new_widgets .widget .stack .buttons {
  margin-top: 10px;
  margin-bottom: 5px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
}

.new_widgets .widget .stack .buttons div {
  margin-right: 30px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.new_widgets .widget .stack .buttons svg {
  width: 30px;
  height: 30px;
}

.new_widgets .widget .stack .buttons div:nth-child(1) svg {
  width: 40px;
  height: 40px;
}

.new_widgets .widget .stack .buttons svg g {
  fill: #242424;
}

.new_widgets .widget .stack .buttons span {
  margin: 0;
  margin-left: 5px;
  color: #242424;
  letter-spacing: .02em;
  line-height: 1.1;
  font-size: 1.1em;
}

.new_widgets .widget .stack .buttons div:hover {
  background: white;
  cursor: pointer;
}

.new_widgets .widget .stack .buttons div:hover span {
  color: #145fa5;
}

.new_widgets .widget .stack .buttons div:hover svg g {
  fill: #145fa5;
}

.new_widgets .widget .stack:hover {
  color: #204981;
}

.new_widgets .widget .stack:hover .info .date span,
.new_widgets .widget .stack:hover .info .user span {
  color: #204981;
  text-decoration: underline;
}

.new_widgets .widget .stack:hover .info .date svg g,
.new_widgets .widget .stack:hover .info .user svg g {
  fill: #204981;
}

.next {
  position: relative;
  width: 100%;
  height: 600px;
  padding: 40px 220px;
  background-image: url("../news/2023/11/01/el-futuro-de-la-ia-hacia-inteligencias-artificiales-realmente-inteligentes/front.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.next .next-Art {
  margin-bottom: 40px;
  color: white;
  font-size: 1.5em;
}

.next .category {
  color: white;
  text-decoration: none;
}

.next .category:hover {
  text-decoration: underline;
}

.next .title {
  display: block;
  margin-top: 60px;
  width: 100%;
  font-size: 4em;
  color: white;
  text-shadow: 0 0 5px #000;
  text-decoration: none;
}

.next .autor {
  position: absolute;
  bottom: 40px;
  color: white;
  text-decoration: none;
}

.next .autor:hover {
  text-decoration: underline;
}

.footer {
  width: 100%;
  background-color: var(--doppler);
  padding-top: 80px;
}

.footer .information {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0 80px;
}

.footer .information .logo {
  position: relative;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  width: calc(100%/4);
  padding: 0 20px;
  letter-spacing: .02em;
  line-height: 1.1;
}

.footer .information .logo .l {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  width: 100%;
}

.footer .information .logo .l svg {
  margin-top: -30px;
  width: 60px;
  height: 60px;
}

.footer .information .logo .l span {
  margin-top: -15px;
  margin-left: 10px;
  font-weight: 500;
  color: white;
}

.footer .information .logo::after {
  position: absolute;
  top: -15px;
  content: " ";
  color: transparent;
  width: 180px;
  height: 40px;
  cursor: pointer;
}

.footer .information .logo:nth-child(1) svg g {
  fill: white;
}

.footer .information .logo:nth-child(2) svg g {
  fill: white;
}

.footer .information .logo .info-logo {
  position: absolute;
  margin-top: 30px;
  width: calc(100% - 40px);
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.5;
  color: white;
}

.footer .information .separator {
  margin: 0 20px;
  min-width: 1px;
  background: white;
}

.footer .information .info-items {
  display: flex;
  flex-direction: row;
  width: calc(100% - 100%/4);
}

.footer .information .info-item {
  display: flex;
  flex-direction: column;
  width: calc(100%/4);
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.1;
  padding: 0 20px;
  color: white;
  z-index: 1;
}

.footer .information .info-item .title {
  margin-bottom: 5px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.1;
  cursor: default;
}

.footer .information .info-item .info {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.1;
  cursor: default;
}

.footer .information .info-item .info svg {
  margin-right: 5px;
  width: 20px;
  height: 20px;
  z-index: 1;
}

.footer .information .info-item .info svg g {
  fill: white;
}

.footer .information .info-item .info span {
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.1;
}

.footer .information .info-item .info:hover svg {
  cursor: pointer;
}

.footer .information .info-item .info:hover span {
  cursor: pointer;
}

.footer .information .footer-subscribe {
    display: flex;
    flex-direction: column;
    justify-items: start;
    text-align: start;
    width: calc(100%/2);
    padding: 0 20px;
}

.footer .information .footer-subscribe .footer-subscribe-title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 14px;
    color: white;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    cursor: default;
}

.footer .information .footer-subscribe .footer-subscribe-description {
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.1;
  color: white;
}

.footer .information .footer-subscribe form {
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    width: 100%;
}

.footer .information .footer-subscribe form input {
    width: calc(100% - 220px);
    height: 38px;
    font-size: 14px;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    border: none;
    outline: none;
    padding: 0 10px;
    border-radius: 10px;
}

.footer .information .footer-subscribe form .button {
  margin-left: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 3px;
  border: 2px solid white;
  border-radius: 25px;
  background: var(--doppler);
  transition: .5s ease-in-out;
}

.footer .information .footer-subscribe form .button span {
  margin: 0;
  margin-left: 17px;
  margin-right: 10px;
  color: white;
  letter-spacing: .02em;
  line-height: 1.1;
  font-weight: bold;
  font-size: 16px;
  transition: .5s ease-in-out;
}

.footer .information .footer-subscribe form .button svg {
  width: 40px;
  height: 40px;
  padding: 8px 7px 6px 7px;
  background: white;
  border-radius: 20px;
  transition: .5s ease-in-out;
}

.footer .information .footer-subscribe form .button svg g {
  fill: var(--doppler);
  transition: .5s ease-in-out;
}

.footer .information .footer-subscribe form .button:hover {
  background: white;
  cursor: pointer;
}

.footer .information .footer-subscribe form .button:hover span {
  color: var(--doppler);
  cursor: pointer;
}

.footer .information .footer-subscribe form .button:hover svg {
  background: var(--doppler);
}

.footer .information .footer-subscribe form .button:hover svg g {
  fill: white;
}

.footer .copyright {
  position: relative;
  margin-top: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 30px 80px;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.5;
  color: white;
  cursor: default;
}

.footer .copyright .separatorHori {
  position: absolute;
  top: 0;
  left: 80px;
  width: calc(100% - 160px);
  height: 1px;
  background: white;
}

.footer .copyright .options {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.footer .copyright .options span {
  margin: 0 10px;
}

.footer .copyright .brand:hover,
.footer .copyright .terms:hover,
.footer .copyright .policy:hover,
.footer .copyright .sitemap:hover,
.footer .copyright .cookies:hover {
  text-decoration: underline;
  color: white;
  cursor: pointer;
}

.cookie_layout {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 180;
}

.cookie {
  position: fixed;
  left: 20px;
  bottom: 15px;
  width: 430px;
  display: flex; 
  flex-direction: column; 
  justify-content: start;
  background-color: rgba(255, 255, 255, 0.7);
  background: white;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 5px rgba(77, 77, 77, 0.2);
  border-radius: 20px;
  align-items: center; 
  color: white;
  gap: 20px;
  padding: 20px 20px;
  z-index: 200;
}

.cookie span {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #1b1b1b;
}

.cookie span .policy,
.cookie span .policy-questions,
.cookie span .tool {
  color: #0043a0;
  font-size: 14px;
  cursor: default;
}

.cookie span .policy:hover,
.cookie span .policy-questions:hover,
.cookie span .tool:hover {
  text-decoration: underline;
  cursor: pointer;
}

.cookie .buttons {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 20px;
  width: 100%;
}

.cookie .buttons img {
  position: absolute;
  left: 0px;
  width: 50px;
  height: 50px;
}

.cookie .cancel-cookie {
  display:flex; 
  flex-direction:column; 
  justify-content:center; 
  align-items:center; 
  height:50px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 500;
  background-color: white;
  color: #000;
  border: 2px solid white;
  margin-right: 10px; 
  border-radius: 10px; 
  transition: .5s;
  cursor: default;
}

.cookie .cancel-cookie span {
  user-select: none;
  pointer-events: none;
}

.cookie .accept-cookie {
  display:flex; 
  flex-direction:column; 
  justify-content:center; 
  align-items:center; 
  height:50px; 
  padding: 0 20px;
  border-radius: 10px; 
  font-size: 15px;
  font-weight: 500;
  text-align:center; 
  background: #183761;
  color: white; 
  cursor: default;
}

.cookie .accept-cookie span {
  user-select: none;
  pointer-events: none;
  color: white;
}

.cookie .cancel-cookie:hover {
  border-color: #28589b; 
  cursor: pointer;
}

.cookie .cancel-cookie:hover span {
  color: #1b3f70;
}

.cookie .accept-cookie:hover {
  background: #28589b; 
  cursor: pointer;
}

.snowflakes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.snowflake {
  position: absolute;
  background-color: transparent;
  width: 20px;
  height: 20px;
  opacity: 0.7;
  animation: snowfall linear infinite;
}

.snowflake svg {
  width: 20px;
  height: 20px;
}

.snowflake svg g {
  fill: rgb(219, 219, 219);
  fill: rgb(166, 236, 248);
}

.scroll-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-outer {
  margin-left: -15px;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  -o-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}

.cursor-inner {
  margin-left: -3px;
  margin-top: -3px;
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: var(--accent);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-hover {
  margin-left: -30px;
  margin-top: -30px;
  width: 60px;
  height: 60px;
  opacity: 0.4;
}

#video-container {
  position: fixed;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  backdrop-filter: blur(3px);
}

.tagg {
  font-weight: normal;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 20px;
  background: #d3e6ff;
  color: var(--doppler)!important;
}

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

  .christmas {
    font-size: 1.5em;
  }
}

@media screen and (max-width: 1450px) {
  .port {
    padding: 0 100px;
  }

  .plus_service .container {
    padding: 0 100px;
    justify-content: space-between;
  }

  .plus_service .container .plus {
    width: calc(100%/3 - 20px);
  }

  .layers .layers-content .layer {
    margin: 0 100px;
  }

  .services .container {
    padding: 30px 100px;
  }

  .services .container .content {
    padding: 10px 0;
  }

  .services .container span:nth-child(1) {
    margin: 0;
    margin-top: 40px;
  }

  .services .container .title {
    margin: 10px 0;
    width: 100%;
  }

  .services .container span:nth-child(3) {
    margin: 0;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 100%;
  }

  .services .container .button {
    margin: 0;
  }

  .services .container .button span {
    margin: 0;
    margin-left: 20px;
  }

  .about .container {
    padding: 30px 100px;
  }

  .about .container .stack:first-child {
    width: 300px;
    height: 300px;
  }

  .packages .container .content {
    padding: 10px 100px;
  }

  .work-process .container {
    padding: 30px 100px;
  }

  .work-process .container span:nth-child(3) {
    width: 100%;
  }

  .why .container {
    padding: 30px 100px;
  }

  .why .container p:nth-child(2) {
    margin-top: 20px;
  }

  .why .container .head {
    align-items: start;
  } 

  .why .container .content .details {
    width: 100%;
  }

  .christmas {
    font-size: 1.5em; 
    padding: 0 100px;
  }

  .projects .container {
    padding: 30px 100px;
  }

  .news {
    padding: 30px 100px;
  }

  .footer .information .footer-subscribe form {
      flex-direction: column;
      align-items: start;
  }
  
  .footer .information .footer-subscribe form input {
      width: 100%;
  }

  .footer .information .footer-subscribe form .button {
    margin: 0;
    margin-top: 20px;
  }
}

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

  .about .container {
    flex-direction: column;
  }
  
  .about .container .stack {
    width: 100%;
    padding: 0;
  }
  
  .about .container .stack .content .widget {
    width: calc(50% - 20px);
    min-height: 110px;
  }

  .why .container .content {
    flex-wrap: wrap;
    justify-content: start;
  }
  
  .why .container .content .stack {
    margin: 0;
    margin-right: 40px;
    margin-bottom: 40px;
    width: 230px;
  }
  
  .why .container .content .stack:first-child {
    margin-bottom: 30px;
  }
  
  .why .container .content .stack:last-child {
    margin-bottom: 30px;
  }

  .services .container .stack {
    flex-wrap: wrap;
    justify-content: start;
    align-items: flex-start;
  }
  
  .services .container .stack .service {
    margin: 0;
    width: 230px;
  }
  
  .services .container .stack .service:first-child {
    /*/margin-bottom: 30px;*/
  }
  
  .services .container .stack .service:last-child {
    /*margin-bottom: 30px;*/
  }

}

@media screen and (max-width: 1215px) {
  
  .port .container {
    width: 50%;
  }
}

@media screen and (max-width: 1200px) {
  
  .promo .data .content {
    padding-left: 50px;
  }

  .promo .data .social {
    padding-right: 20px;
    padding-left: 30px;
  }

  .menu {
    width: 100%;
  }

  .menu header {
    width: 100%;
  }

  .menu header .logo {
    position: absolute;
    left: 0px;
    width: auto;
    padding: 0;
  }

  .menu header .logo img {
    margin-left: 0px;
    margin-right: 0px;
    width: 30px;
    height: 30px;
  }

  .menu header .logo:hover img {
    margin-top: -10px;
  }
  
  .menu header .logo:hover span {
    margin-top: -10px;
    opacity: 0.0;
    height: 0;
    transition: .3s;
  }
  
  .menu header .logo:hover {
    cursor: pointer;
  }

  .menu header .items {
    display: none;
  }
  
  .menu header .right {
    right: 60px;
  }

  .menu header .language .flag {
    margin-right: 15px;
    width: 25px;
    height: 25px;
  }

  .menu header .language .arrow {
    display: none;
  }

  .menu header .menu-mobile {
    display: flex;
    padding: 0 15px;
    height: 100%;
  }
  
  .menu header .menu-mobile img {
    width: 30px;
    height: 30px;
  }

  .menu .tab_menu_mobile {
    top: -100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 100vh;
  }

  .menu .tab_menu_mobile.active {
    top: 0;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item {
    width: 100%;
  }

  .flags .tab_flag {
    width: calc(100% - 40px);
  }

  .menu .tab_search {
    width: 80%;
  }
}

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

  .plus_service .container {
    padding: 0 100px;
    justify-content: space-between;
  }

  .plus_service .container .plus {
    flex-direction: column;
    padding: 15px 10px;
  }

  .news .content .post .lab {
    font-size: 1em;
  }

  .news .content .post .title {
    font-size: 1.5em;
  }

  .news .content .post .date {
    font-size: 1em;
  }

  .news .content .post .info {
    display: none;
  }

  .news .content .post .buttons {
    justify-content: space-between;
    overflow: hidden;
    padding-right: 10px;
  }

  .news .content .post .buttons div {
    position: relative;
  }

  .news .content .post .buttons div:nth-child(2) span {
    position: absolute;
    left: 30px;
    display: inline;
    color: transparent;
    width: 200px;
  }

  .news .content .post .buttons div:nth-child(3) span {
    display: none;
  }

  .news .content .post .buttons div:nth-child(2) span::first-letter {
    color: #242424;
  }

  .footer .information {
    flex-wrap: wrap;
  }

  .footer .information .separator {
    display: none;
  }
  
  .footer .information .logo {
    width: 50%;
  }

  .footer .information .info-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }
  
  .footer .information .info-item {
    margin-bottom: 40px;
    width: 50%;
  }
  
  .footer .information .info-item:first-child {
    margin-left: 50%;
  }

  .footer .information .footer-subscribe {
    width: 50%;
  }

}

@media screen and (max-width: 900px) {
  .menu {
    width: 100%;
  }

  .menu header {
    width: 100%;
  }

  .menu header .logo {
    position: absolute;
    left: 0px;
    width: auto;
    padding: 0;
  }

  .menu header .logo img {
    margin-left: 0px;
    margin-right: 0px;
    width: 30px;
    height: 30px;
  }

  .menu header .logo:hover img {
    margin-top: -10px;
  }
  
  .menu header .logo:hover span {
    margin-top: -10px;
    opacity: 0.0;
    height: 0;
    transition: .3s;
  }
  
  .menu header .logo:hover {
    cursor: pointer;
  }

  .menu header .items {
    display: none;
  }

  .menu header .language .flag {
    margin-right: 15px;
    width: 25px;
    height: 25px;
  }

  .menu header .language .arrow {
    display: none;
  }

  .menu header .menu-mobile {
    display: flex;
    padding: 0 15px;
    height: 100%;
  }
  
  .menu header .menu-mobile img {
    width: 30px;
    height: 30px;
  }

  .menu .tab_menu_mobile {
    top: -100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 100vh;
  }

  .menu .tab_menu_mobile.active {
    top: 0;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item {
    width: 100%;
  }

  .flags .tab_flag {
    width: calc(100% - 40px);
  }

  .menu .tab_search {
    width: 80%;
  }

  .port {
    padding: 0 40px;
  }

  .port .container {
    width: 70%;
  }

  .port .content .tag:nth-child(4) {
    right: 0px;
    top: 20%;
  }

  .port .content .tag span {
    display: none;
  }

  .plus_service .container {
    padding: 0 40px;
  }

  .layers .layers-content .layer {
    margin: 0 40px;
  }

  .packages .container .content {
    padding: 10px 40px;
  }

  .packages .container .content .stack .package {
    width: calc(100% - 100px);
  }

  .packages .container .content .stack .package.hot {
    margin-top: 40px;
  }

  .services .container {
    padding: 30px 40px;
  }

  .services .container .stack {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .services .container .stack .service {
    width: calc(50% - 20px);
  }

  .about .container {
    padding: 30px 40px;
    align-items: center;
  }

  .work-process .container {
    padding: 30px 40px;
  }

  .work-process .container .content .process {
    width: calc(100% / 4 - 30px);
  }

  .why .container {
    padding: 30px 40px;
  }
  
  .why .container .content .stack {
    margin-right: 20px;
    margin-bottom: 20px;
    width: calc(100%/3 - 20px);
  }
  
  .why .container .content .stack:first-child {
    margin-bottom: 20px;
  }
  
  .why .container .content .stack:last-child {
    margin-bottom: 20px;
  }

  .christmas {
    height: 500px;
    gap: 20px;
    font-size: 2em;
    padding: 0 40px;
  }

  .christmas h2 {
    margin-bottom: 20px;
  }

  .christmas .card p {
    font-size: 0.6em;
  }

  .christmas a {
    font-size: 0.5em;
    color: white;
  }

  .projects .container {
    padding: 30px 40px;
  }

  .projects .container span:nth-child(3) {
    width: 100%;
  }

  .projects .container .stack .project {
    width: calc(50% - 20px);
  }

  .news {
    padding: 30px 40px;
  }

  .news .container_i span:nth-child(3) {
    width: 100%;
  }

  .news .content .post {
    width: calc(50% - 20px);
  }

  .contact .container .content {
    width: calc(100% - 40px);
  }

  .footer .information {
    padding: 0 40px;
  }

  .footer .copyright .separatorHori {  
    left: 40px;
    width: calc(100% - 80px);
  }
}

@media screen and (max-width: 700px) {
  .menu {
    width: 100%;
  }

  .menu header {
    width: 100%;
  }

  .menu header .logo {
    position: absolute;
    left: 0px;
    width: auto;
    padding: 0;
  }

  .menu header .logo img {
    margin-left: 0px;
    margin-right: 0px;
    width: 30px;
    height: 30px;
  }

  .menu header .logo:hover img {
    margin-top: -10px;
  }
  
  .menu header .logo:hover span {
    margin-top: -10px;
    opacity: 0.0;
    height: 0;
    transition: .3s;
  }
  
  .menu header .logo:hover {
    cursor: pointer;
  }

  .menu header .items {
    display: none;
  }

  .menu header .language .flag {
    margin-right: 15px;
    width: 25px;
    height: 25px;
  }

  .menu header .language .arrow {
    display: none;
  }

  .menu header .menu-mobile {
    display: flex;
    padding: 0 15px;
    height: 100%;
  }
  
  .menu header .menu-mobile img {
    width: 30px;
    height: 30px;
  }

  .menu .tab_menu_mobile {
    top: -100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    height: 100vh;
  }

  .menu .tab_menu_mobile.active {
    top: 0;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item {
    width: 100%;
  }

  .flags .tab_flag {
    width: calc(100% - 40px);
  }

  .menu .tab_search {
    width: 80%;
  }

  .up {
    right: 20px;
    bottom: 100px;
  }

  #chatbot {
    right: 10px;
    bottom: 20px;
  }

  #chatbot .chat_dp_logo {
    width: 60px;
    height: 60px;
  }

  #chatbot .chat_dp_logo span {
    margin-top: -10px;
    height: 20px;
  }

  #chatbot .chat_dp_view {
    /*/border-radius: 0;*/
  }

  .p_port,  
  .port {
    flex-direction: column;
    width: 100%;
    height: 660px;
    padding: 0;
    justify-content: start;
    align-items: center;
    overflow: hidden;
  }

  .port {
    height: auto;
  }

  .p_port .container,
  .port .container {
    margin: 0;
    margin-top: 40px;
    justify-content: center;
    align-items: center;
    text-align: start;
    font-size: 2.5em;
    width: 100%;
    height: auto;
    padding: 100px 20px;
    padding-bottom: 30px;
    border-radius: 0;
    /*background: white;*/
    color: #2f2f2f;
  }

  .p_port .container {
    margin-top: 20px;
  }
  
  .p_port .background .back,
  .port .background .back {
    position: absolute;
    bottom: -30px;
    margin: 0;
    width: 100%;
    height: 300px;
  }

  .port .container .buttons {
    width: 100%;
    gap: 30px;
  }

  .s_port .container .button,
  .p_port .container .button {
    margin-left: auto;
    margin-right: auto;
    background: var(--doppler);
  }

  .s_port .container .button span,
  .p_port .container .button span {
    color: white;
  }

  .port .container .buttons .btn:first-child span {
    text-align: start;
  }

  .s_port .container .button svg,
  .p_port .container .button svg {
    background: white;
  }

  .s_port .container .button svg g,
  .p_port .container .button svg g,
  .port .container .buttons .btn svg g {
    fill: var(--doppler);
  }

  .port .container .buttons .btn:first-child {
    margin: 0;
  }

  .port .container .buttons .btn:last-child {
    margin: 0;
  }

  .port .content {
    margin-top: -20px;
  }

  .port .content .tag:nth-child(2) {
    left: -60px;
    top: 26%;
  }
  
  .port .content .tag:nth-child(3) {
    right: -130px;
    bottom: 20%;
    color: var(--accent);
    animation-delay: 2s;
  }
  
  .port .content .tag:nth-child(4) {
    right: -130px;
    top: 32%;
    color: var(--red);
    animation-delay: 2.5s;
  }

  .plus_service {
    margin-bottom: 20px;
  }

  .plus_service .container {
    margin-top: 0;
    flex-direction: row;
    justify-content: start;
    flex-wrap: wrap;
    padding: 0 20px;
  }

  .plus_service .container .plus {
    margin-top: 20px;
    width: 100%;
  }

  .plus_service .container .plus:nth-child(1) {
    margin-right: 5px;
    width: calc(60% - 5px);
  }

  .plus_service .container .plus:nth-child(2) {
    margin-left: 5px;
    width: calc(40% - 5px);
  }

  .plus_service .container .plus:nth-child(3) {
    margin-top: 10px;
  }

  .plus_service .container .plus .stack svg g {
    /*fill: var(--doppler);*/
  }

  .plus_service .container .plus .stack .title {
    font-size: 18px;
    color: var(--doppler);
  }

  .plus_service .container .plus .stack .info {
    font-size: 14px;
  }

  .layers .layers-content .layer {
    flex-direction: column-reverse;
    min-height: auto;
  }

  .layers .layers-content .layer .layer-content {
    justify-content: start;
    width: 100%;
    height: auto;
  }

  .layers .layers-content .layer .layer-image {
    width: 100%!important;
    height: auto;
    padding: 0;
    margin: 0;
  }

  .services {
    width: 100%;
    overflow: hidden;
  }

  .services .container {
    padding: 30px 20px;
  }

  .services .container p {
    width: 100%;
  }

  .services .container span:nth-child(3) {
    width: 100%;
    padding: 0;
  }

  .services .container .stack {
    flex-direction: column;
  }

  .services .container .stack .service {
    width: calc(100%);
  }

  .services .container .stack .service:last-child {
    margin: 0 10px;
    margin-bottom: 20px;
  }

  .about {
    margin-bottom: 60px;
    width: 100%;
    overflow: hidden;
  }

  .about .container {
    flex-direction: column;
    padding: 0;
    padding-top: 30px;
  }

  .about .container .stack {
    width: 100%;
  }

  .about .container .stack p:nth-child(2) {
    width: 100%;
  }

  .about .container .stack:first-child {
    margin-top: 0;
  }

  .about .container .stack span:nth-child(1) {
    margin-top: 0;
  }

  .about .container .stack:last-child {
    margin-top: 0;
    padding: 5px 20px;
    padding-top: 20px;
  }
  
  .about .container .stack .image {
    border: none;
    box-shadow: none;
    width: calc(100% - 40px);
  }

  .about .container .stack .content {
    flex-direction: row;
  }

  .about .container .stack .content .widget:first-child {
    margin-right: 5px;
    width: calc(50% - 5px);
  }

  .about .container .stack .content .widget:last-child {
    margin-left: 5px;
    width: calc(50% - 5px);
  }

  .about .container .stack .content .widget svg g,
  .about .container .stack .content .widget:hover svg g {
    /*fill: var(--doppler);*/
  }

  .about .container .stack .content .widget span,
  .about .container .stack .content .widget:hover span {
    color: var(--doppler);
  }

  .work-process .container .content {
    flex-direction: column;
    gap: 20px;
  }

  .work-process .container .content .process {
    width: 100%;
    padding-bottom: 0;
  }

  .work-process .container .content::before {
    top: 10%;
    left: calc(50% - 1.5px);
    width: 3px;
    height: 80%;
  }

  .work-process .container span:nth-child(3) {
    padding-bottom: 5px;
  }

  .why {
      width: 100%;
      height: auto;
      overflow: hidden;
  }

  .why .container {
    padding: 30px 30px;
  }

  .why .container p:nth-child(2) {
    width: 100%;
  }

  .why .container span:nth-child(3) {
    width: 100%;
  }

  .why .container .content {
    margin-top: 0;
    flex-direction: row;
  }

  .why .container .content img {
    width: 100%;
  }

  .why .container .content .details {
    flex-direction: column;
  }

  .why .container .content .stack {
    margin: 0!important;
    width: calc(100%);
  }

  .christmas {
    font-size: 1.7em; 
    padding: 0 20px;
  }

  .projects {
      width: 100%;
      overflow: hidden;
  }

  .projects .container {
    width: 100%;
    padding: 30px 20px;
  }

  .projects .container p:nth-child(2) {
    width: 100%;
  }

  .projects .container span:nth-child(3) {
    width: 100%;
  }

  .projects .container .stack {
    flex-direction: column;
    width: 100%;
  }

  .projects .container .stack .project {
    margin: 0;
    margin-bottom: 20px;
    flex-direction: column;
    width: 100%;
    height: auto;
    border-radius: 20px;
  }

  .projects .container .stack .project:nth-child(1) {
    border-radius: 20px;
  }

  .projects .container .stack .project:nth-child(2) {
    flex-direction: column;
    border-radius: 20px;
  }

  .projects .container .stack .project .image {
    width: 100%;
  }  

  .projects .container .stack .project .content {
    width: 100%;
    padding: 20px;
  }

  .projects .container .stack .project .content p {
    margin-bottom: 10px;
  }

  .contact {
    width: 100%;
    overflow: hidden;
  }

  .contact .container .content {
    flex-direction: column;
    width: calc(100% - 20px);
    border-radius: 30px;
  }

  .contact .container .content .image {
    margin-top: 10px;
    margin-left: 10px;
    width: calc(100% - 20px);
    padding: 0;
    border-radius: 20px;
  }

  .contact .container .content .stack {
    width: 100%;
    width: calc(100% - 20px);
    padding-top: 0;
  }

  .contact .container .content .stack form {
    margin-left: 10px;
    width: 100%;
  }

  .contact .container .content .stack input {
    width: calc(50% - 15px);
  }

  .contact .container .content .stack textarea {
    min-width: calc(100% - 15px);
    max-width: calc(100% - 15px);
  }

  .contact .container .content .stack .buttons {
    width: calc(100% - 5px);
  }

  .s_port,
  .n_port,
  .a_port {
    height: auto;
    flex-direction: column-reverse;
    padding: 0;
    background: white;
  }

  .s_port .background,
  .n_port .background,
  .a_port .background {
    position: relative;
    margin: 0;
    width: 100%;
    height: 200px;
  }

  .s_port .background .back,
  .n_port .background .back,
  .a_port .background .back {
    margin: 0;
    width: 100%;
  }

  .s_port .container,
  .a_port .container {
    margin-top: 120px;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 0 30px;
    background: none;
    padding-bottom: 40px;
  }

  .n_port .container {
    margin-top: 50px;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 0 30px;
    background: none;
    padding-bottom: 40px;
  }

  .s_port .container .section_title,
  .a_port .container .section_title {
    width: 100%;
    color: #333;
  }

  .n_port .container .section_title,
  .p_port .container .section_title {
    font-size: 32px;
    width: 100%;
    color: #333;
  }

  .s_port .container .section_description,
  .n_port .container .section_description,
  .p_port .container .section_description,
  .a_port .container .section_description {
    width: 100%;
    color: #616161;
  }

  .a_port .container .buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .a_port .container .buttons .btn {
    border-color: var(--doppler);
    background: var(--doppler);
  }

  .a_port .container .buttons .btn span {
    color: white;
    font-weight: normal;
  }

  .a_port .container .buttons .btn svg {
    background: white;
  }

  .a_port .container .buttons .btn svg g {
    fill: var(--doppler);
  }
  
  .origin {
    margin-top: 30px;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    padding: 0 30px;
  }

  .origin .container {
    width: 100%;
    padding: 0;
  }

  .origin .content {
    width: 100%;
    padding: 0;
  }

  .origin .content .button {
      margin-left: auto;
      margin-right: auto;
  }

  .mision {
    margin-top: 30px;
    padding: 0 30px;
  }

  .mision .container {
    width: 100%;
  }

  .mision .container .section_title {
    width: 100%;
  }

  .mision .container .section_description {
    flex-direction: column;
  }

  .mision .container .section_description span {
    width: 100%;
  }

  .mision .content {
    flex-direction: column;
  }

  .mision .content .image {
    width: 100%;
  }

  .team {
    margin-top: 30px;
    padding: 0 30px;
  }

  .team .stack {
    flex-direction: column;
  }

  .team .stack .container {
    width: 100%;
  }

  .team .stack .content {
    width: 100%;
  }

  .team .stack:last-child .content {
    width: 100%;
  }

  .team .stack:last-child .container img {
    margin-right: 40px;
    max-width: 250px;
    max-height: 250px;
    pointer-events: none;
    user-select: none;
  }

  .values {
    margin-top: 30px;
    padding: 0 30px;
  }

  .values .container {
    width: 100%;
  }

  .values .content {
    margin-top: 20px;
    flex-direction: column;
  }

  .values .content .value {
    margin-bottom: 20px;
    width: 100%;
  }

  .news {
    margin-top: 30px;
    padding: 0 30px;
  }

  .news .container {
    width: 100%;
  }

  .news .container_i {
    width: 100%;
  }

  .news .container_i p:nth-child(2) {
    width: 100%;
  }

  .news .container_i span:nth-child(3) {
    width: 100%;
  }

  .news .content {
    flex-direction: column;
  }

  .news .content .post {
    width: 100%;
  }

  .news .content .post .lab {
    font-size: 14px;
  }

  .news .content .post .title {
    font-size: 18px;
  }

  .news .content .post .date {
    font-size: 14px;
  }

  .news .content .post .info {
    display: none;
    font-size: 14px;
  }

  .news .content .post .buttons {
    justify-content: space-between;
    overflow: hidden;
  }

  .news .content .post .buttons div {
    position: relative;
  }

  .news .content .post .buttons div:nth-child(2) span {
    position: absolute;
    left: 30px;
    display: inline;
    color: transparent;
    width: 200px;
  }

  .news .content .post .buttons div:nth-child(2) span::first-letter {
    color: #242424;
  }

  .a_services {
    margin-top: 0px;
    padding: 0 30px;
    text-align: center;
  }

  .a_services .container {
    width: 100%;
    padding-bottom: 20px;
  }

  .section_title {
    font-size: 1.5em;
  }

  .p_projects {
    width: 100%;
    padding: 0 20px;
  }

  .p_projects .content {
    flex-direction: column;
    width: 100%;
  }

  .p_projects .content .project {
    width: 100%;
  }
  
  .p_projects .content .project .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    padding: 20px;
    background: white;
    z-index: 100;
  }
  
  .p_projects .content .project .content span:nth-child(1) {
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
    font-size: 12px;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    text-align: start;
    color: #616161;
    font-weight: normal;
  }
  
  .p_projects .content .project .content p {
    margin: 0;
    margin-bottom: 10px;
    width: auto;
    font-size: 22px;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    color: #1f1f1f;
    text-align: start;
    font-weight: normal;
  }
  
  .p_projects .content .project .content span:nth-child(3) {
    margin: 0;
    width: 100%;
    font-size: 16px;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    text-align: start;
    color: #616161;
    font-weight: normal;
  }

  .s_services {
    margin-top: 40px;
    padding: 0 20px;
  }

  .s_services .content .s_service {
    flex-direction: column;
  }

  .s_services .content .s_service:nth-child(2),
  .s_services .content .s_service:nth-child(4) {
    flex-direction: column;
  }

  .s_services .content .s_service .stack {
    margin-top: 10px;
    width: 100%;
    padding: 0;
  }

  .s_services .content .s_service .stack .section_title {
    margin-top: 10px;
    font-size: 22px;
  }

  .categories .container {
    justify-content: start;
    padding: 0;
    overflow: scroll;
  }

  .categories .container .category {
    width: 100px;
    text-align: center;
  }

  .categories .container .category .indicator {
    bottom: 0;
  }

  .news_container .container {
    flex-direction: column;
    padding: 0 20px;
    justify-content: center;
  }

  .news_container .container .post {
    margin-bottom: 20px;
    width: 100%;
  }

  .news_container .container .post .lab {
    font-size: 14px;
  }

  .news_container .container .post .title {
    font-size: 18px;
  }

  .news_container .container .post .date {
    font-size: 14px;
  }

  .news_container .container .post .info {
    display: none;
    font-size: 14px;
  }

  .news_container .container .post .buttons {
    justify-content: space-between;
    overflow: hidden;
  }

  .news_container .container .post .buttons div {
    position: relative;
  }

  .news_container .container .post .buttons span {
    display: none;
  }

  .news_container .container .post .buttons div:nth-child(2) span {
    position: absolute;
    left: 30px;
    display: inline;
    color: transparent;
    width: 200px;
  }

  .news_container .container .post .buttons div:nth-child(2) span::first-letter {
    color: #242424;
  }

  .c_port {
    width: 100%;
    height: auto;
    padding: 0 20px;
  }

  .c_port .container {
    flex-direction: column;
    text-align: center;
  }

  .c_port .container .section_title {
    margin-top: 110px;
  }

  .contact_container {
    margin-top: 20px;
    width: 100%;
    flex-direction: column-reverse;
    padding: 0 20px;
  }

  .contact_container .container {
    width: 100%;
  }

  .contact_container .content {
    margin-bottom: 20px;
    width: 100%;
  }

  .schedule {
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0 20px;
  }

  .schedule .container {
    width: 100%;
  }

  .schedule .container .section_title {
    font-size: 1.5em;
  }

  .schedule .content {
    width: 100%;
    height: auto;
  }

  .schedule .content iframe {
    height: 300px;
  }

  .new_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    padding-bottom: 40px;
    background: white;
  }
  
  .new_content {
    margin-top: 60px;
    width: 100%;
    padding: 40px;
    background: white;
  }

  .new_port .data .share {
    top: 45px;
    left: 0;
    width: 100%;
    justify-content: space-around;
  }

  .new_port .data .share .shareBtn:hover span {
    width: 0;
  }

  .new_port h1 {
    font-size: 1.8em;
  }

  .new_port img {
    margin-top: 60px;
  }

  .writer .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  .writer .data .name {
    font-weight: normal;
  }

  .new_text h2 {
    font-size: 1.3em;
    font-weight: normal;
    color: #000;
  }

  .new_text h3 {
    font-size: 1.2em;
    font-weight: normal;
    color: #000;
  }
  
  .new_widgets {
    margin-top: 0;
    width: 100%;
    padding: 40px;
    background: white;
  }

  .comments .comment .container .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  .comments .comment .container .data .buttons {
    margin-top: 10px;
  }
  
  .comments .comment .container .data .buttons span {
    margin-top: 10px;
    display: inline-block;
  }

  .comments .comment .comment_replies .comment_reply .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  .comments .comment .comment_replies .comment_reply .data .buttons {
    margin-top: 10px;
  }
  
  .comments .comment .comment_replies .comment_reply .data .buttons span {
    margin-top: 10px;
    display: inline-block;
  }

  .publish input {
    width: 100%;
  }
  
  .publish textarea {
    max-width: 100%;
    min-width: 100%;
  }

  .new_widgets .widget .stack .buttons {
    justify-content: space-between;
    overflow: hidden;
  }

  .new_widgets .widget .stack .buttons div {
    position: relative;
  }

  .new_widgets .widget .stack .buttons span {
    display: none;
  }

  .new_widgets .widget .stack .buttons div:nth-child(2) span {
    position: absolute;
    left: 30px;
    display: inline;
    color: transparent;
    width: 200px;
  }

  .new_widgets .widget .stack .buttons div:nth-child(2) span::first-letter {
    color: #242424;
  }

  .footer {
    width: 100%;
    padding: 20px 10px;
    overflow: hidden;
  }

  .footer .information {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 0px;
  }

  .footer .information .logo {
    margin-top: 40px;
    width: 100%;
  }

  .footer .information .info-items {
    margin: 0;
    margin-top: 80px;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
  }

  .footer .information .info-items .info-item {
    margin: 0;
    margin-top: 40px;
    width: 100%;
  }

  .footer .information .footer-subscribe {
    margin-top: 40px;
    width: 100%;
  }

  .footer .information .footer-subscribe form {
    flex-direction: column;
    align-items: start;
  }

  .footer .information .footer-subscribe form input {
    width: 100%;
  }

  .footer .information .footer-subscribe form .button {
    margin-top: 20px;
    margin-left: 0;
  }

  .footer .copyright {
    line-height: 1.1;
    font-weight: normal;
    padding: 20px 20px;
  }

  .footer .copyright .separatorHori {
      left: 20px;
      width: calc(100% - 40px);
  }

  .footer .copyright span {
    text-align: start;
  }

  .footer .copyright .options {
    flex-direction: column;
    justify-content: center;
  }

  .footer .copyright .options span {
    width: auto;
  }

  .cookie_layout {
    width: 100%;
    overflow: hidden;
  }

  .cookie {
    bottom: 20px;
    flex-direction: column;
    width: calc(100% - 40px);
    height: auto;
    padding: 0 20px;
    overflow: hidden;
  }

  .cookie span {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .cookie .buttons {
    margin-top: 0;
    margin-bottom: 20px;
  }

  .cookie .buttons span {
    margin: 0;
  }

  .footer .copyright {
    display: flex;
    flex-direction: column;
  }

  .footer .copyright .options {
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }

  .footer .copyright .options span {
    margin: 0;
    margin-bottom: 10px;
  }

  .footer .copyright .separator {
    opacity: 0.0;
  }

}

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

  .christmas {
    height: 80vh;
  }

  .promo {
    align-items: start;
  }

  .promo .data {
    flex-direction: column;
    width: 100%;
  }

  .promo .data .content {
    padding-left: 15px;
    padding-right: 15px;
    gap: 0;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    transition: .5s;
  }

  .promo .data.hide .content {
    margin-top: -50px;
  }

  .promo .data .content .info {
    gap: 5px
  }

  .promo .data .content .info:nth-child(3) {
    display: none;
  }

  .promo .data .social {
    position: absolute;
    top: 100%;
    padding-left: 20px;
    padding-right: 20px;
    clip-path: none;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 100%;
    transition: .5s;
  }

  .promo .data.hide .social {
    top: 0;
  }
  
  .promo .text {
    margin-left: 100%;
    animation: slidement 15s linear infinite;
    -webkit-animation: slidement 15s linear infinite;
  }

  .menu {
    width: 100%;
  }

  .menu header {
    width: 100%;
  }

  .menu header .logo {
    position: absolute;
    left: 0px;
    width: auto;
    padding: 0;
  }

  .menu header .logo img {
    margin-left: 0px;
    margin-right: 0px;
    width: 30px;
    height: 30px;
  }

  .menu header .logo:hover img {
    margin-top: -10px;
  }
  
  .menu header .logo:hover span {
    margin-top: -10px;
    opacity: 0.0;
    height: 0;
    transition: .3s;
  }
  
  .menu header .logo:hover {
    cursor: pointer;
  }

  .menu header .items {
    display: none;
  }

  .menu header .language {
    /*display: none;*/
  }

  .menu header .language .flag {
    margin-right: 15px;
    width: 25px;
    height: 25px;
  }

  .menu header .language .arrow {
    display: none;
  }

  .menu header .menu-mobile {
    display: flex;
    padding: 0 15px;
    height: 100%;
  }
  
  .menu header .menu-mobile img {
    width: 30px;
    height: 30px;
  }

  .menu .tab_menu_mobile {
    top: -100vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    flex-wrap: nowrap;
    height: 100vh;
  }

  .menu .tab_menu_mobile.active {
    top: 0;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item:nth-child(1) {
    margin-top: 60px;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item .indicator {
    position: absolute;
    bottom: 0px;
    width: calc(100% - 60px);
    height: 2px;
    background: #12305a4f;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item:nth-child(1) .indicator {
    bottom: 10px;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item svg {
    width: 25px;
    height: 25px;
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item svg g {
    fill: var(--doppler);
  }

  .menu .tab_menu_mobile .tab_menu_mobile_item ion-icon {
    margin-right: 5px;
    color: var(--doppler);
  }

  .flags .tab_flag {
    width: calc(100% - 40px);
  }

  .menu .tab_search {
    width: 80%;
  }

  .up {
    right: 20px;
    bottom: 100px;
  }

  #accessibility {
    left: 10px;
    bottom: 20px;
    z-index: 200;
  }

  #accessibility .content {
    width: calc(100vw - 20px);
  }

  #chatbot {
    right: 10px;
    bottom: 20px;
  }

  #chatbot .chat_dp_logo {
    width: 60px;
    height: 60px;
  }

  #chatbot .chat_dp_logo span {
    margin-top: -10px;
    height: 20px;
  }

  #chatbot.open .chat_dp_view {
    border-radius: 0;
    border: 0;
  }

  #chatbot .chat_dp_view::before {
    display: none;
  }

  #chatbot .chat_dp_view::after {
    display: none;
  }

  #chatbot .chat_dp_view .chat_dp_view_home {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  #chatbot .chat_dp_view .chat_dp_view_home::before {
    display: none;
  }

  #chatbot .chat_dp_view .chat_dp_view_home::after {
    display: none;
  }

  #chatbot .chat_dp_view .chat_dp_view_chat {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  #chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_head {
    height: 60px;
    padding-top: 10px;
  }

  #chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_head .chat_dp_view_home_head_title {
    padding: 10px 20px;
  }

  #chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_body {
    height: calc(100% - 110px);
  }

  #chatbot .chat_dp_view .chat_dp_view_home .chat_dp_view_home_footer {
    padding-bottom: 0px;
  }

  #chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_head {
    height: 60px;
    padding-top: 10px;
  }

  #chatbot .chat_dp_view .chat_dp_view_chat .chat_dp_view_chat_body {
    height: calc(100% - 110px);
  }

  #chatbot .chat_dp_view .chat_dp_view_border {
    display: none;
  }

  .p_port,  
  .port {
    width: 100%;
    height: auto;
    justify-content: start;
    background-position: 20%;
    padding: 0;
    overflow: hidden;
    margin-bottom: -5px;
  }

  .port::before {
    display: none;
  }

  .p_port .container,
  .port .container {
    margin: 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 2.5em;
    width: 100%;
    height: auto;
    padding: 160px 20px;
    padding-top: 110px;
    padding-bottom: 30px;
    border-radius: 0;
    background: white;
    color: #2f2f2f;
  }

  .port .container {
    padding-top: 130px;
  }

  .port .container {
    background: transparent;
  }

  .port .container span:nth-child(1) {
    width: 100%;
    text-align: center;
    background: transparent;
  }

  .port .container h1 {
    font-size: 0.7em;
    width: 100%;
    text-align: center;
  }

  .p_port .container {
    margin-top: 20px;
  }
  
  .p_port .background .back,
  .port .background .back {
    position: absolute;
    bottom: -30px;
    margin: 0;
    width: 100%;
    height: 300px;
  }

  .port .container .buttons {
    justify-content: space-between;
    width: 100%;
    gap: 5px;
  }

  .port .container .buttons .btn {
    width: auto;
  }

  .port .container .buttons .btn:first-child {
    width: auto;
  }

  .port .container .buttons .btn span {
    margin: 0;
    text-align: start;
    text-wrap: nowrap;
  }

  .s_port .container .button span {
    color: white;
  }

  .port .container .buttons .btn:first-child span {
    text-align: start;
  }

  .port .container .buttons .btn:first-child svg {
    margin-left: 0;
    background: white;
  }

  .s_port .container .button svg,
  .p_port .container .button svg {
    background: white;
  }

  .s_port .container .button svg g,
  .p_port .container .button svg g,
  .port .container .buttons .btn:first-child svg g {
    fill: var(--doppler);
  }

  .port .container .buttons .btn:first-child {
    margin: 0;
  }

  .port .container .buttons .btn:last-child {
    margin: 0;
    margin-right: 15px;
  }
  
  .port .content {
    width: 80%;
  }

  .port .content .tag {
    padding: 10px;
  }

  .port .content .tag span {
    display: none;
  }

  .port .content .tag:nth-child(2) {
    left: 10px;
    top: 15%;
  }
  
  .port .content .tag:nth-child(3) {
    right: -15px;
    bottom: 5%;
  }
  
  .port .content .tag:nth-child(4) {
    right: -25px;
    top: 20%;
  }

  .carrousel {
    height: 70px;
    overflow: hidden;
  }

  .carrousel .container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 30px;
    padding: 0 40px;
    animation: slidement 15s linear infinite;
  }
  
  .carrousel .container .item {
    font-size: 1.4em;
  }
  
  .carrousel .container .separator img {
    width: 20px;
    height: 20px;
  }

  .layers .layers-content {
    padding-top: 0px;
    height: calc(100vh - 160px);
  }

  .layers .layers-content .layer {
    flex-direction: column-reverse;
    width: calc(100% - 40px);
    min-height: auto;
    gap: 20px;
  }

  .layers .layers-content .layer .layer-content {
    width: 100%;
    padding: 0;
    justify-content: start;
    height: auto;
  }

  .layers .layers-content .layer .layer-image {
    width: 100%!important;
    height: auto;
    padding: 0;
    margin: 0;
  }

  .packages .container {
    padding: 30px 20px;
    padding-top: 60px;
  }

  .packages .container span:nth-child(1) {
    margin: 0;
    width: 100%;
    text-align: center;
    font-weight: normal;
  }

  .packages .container .title {
    margin: 10px 0;
    width: 100%;
  }

  .packages .container span:nth-child(3) {
    margin: 0;
    width: 100%;
  }

  .packages .container .content {
    padding: 10px 00px;
  }

  .packages .container .content .stack .package {
    width: 100%;
  }

  .packages .container .content .stack .package.hot {
    margin-top: 40px;
  }

  .packages .container .content .stack .package .price span {
    width: auto;
  }

  .packages .container .content .stack .package .discount span {
    width: auto;
  }

  .plus_service .container {
    margin-top: 0;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
  }

  .plus_service .container .plus {
    margin-top: 20px;
    width: 100%;
  }

  .plus_service .container .plus:nth-child(1) {
    margin-right: 0;
    width: 100%;
  }

  .plus_service .container .plus:nth-child(2) {
    margin-left: 0;
    width: 100%;
  }

  .plus_service .container .plus:nth-child(3) {
    margin-top: 20px;
  }

  .plus_service .container .plus .stack svg g {
    /*fill: var(--doppler);*/
  }

  .plus_service .container .plus .stack .title {
    font-size: 18px;
    /*color: var(--doppler);*/
  }

  .plus_service .container .plus .stack .info {
    font-size: 14px;
  }

  .services {
    width: 100%;
    overflow: hidden;
  }

  .services .container {
    padding: 30px 20px;
  }

  .services .container span:nth-child(1) {
    margin: 10px 0px;
    font-weight: normal;
    width: 100%;
    text-align: start;
  }

  .services .container .title {
    margin: 10px 0px;
    width: 100%;
  }

  .services .container span:nth-child(3) {
    margin: 10px 0px;
    width: 100%;
    padding: 0;
  }

  .services .container .button {
    margin: 0;
    width: auto;
    gap: 20px;
    padding-left: 20px;
  }

  .services .container .stack {
    flex-direction: column;
    align-items: center;
  }

  .services .container .content {
    padding: 0;
    overflow-y: hidden;
  }

  .services .container .stack .service {
    margin: 0!important;
    margin-bottom: 20px;
    width: calc(100%);
  }

  .about {
    margin-bottom: 0px;
    width: 100%;
    overflow: hidden;
  }

  .about .container {
    flex-direction: column;
    padding: 0;
    padding-top: 30px;
    padding-bottom: 20px;
  }

  .about .container .stack {
    width: 100%;
  }

  .about .container .stack p:nth-child(2) {
    width: 100%;
  }

  .about .container .stack:first-child {
    margin-top: 30px;
    width: calc(100vw - 40px);
    height: calc(100vw - 40px);
  }

  .about .container .stack span:nth-child(1) {
    margin-top: 0;
    width: 100%;
    text-align: start;
    font-weight: normal;
  }

  .about .container .stack:last-child {
    margin-top: 0;
    padding: 5px 20px;
    padding-top: 20px;
  }
  
  .about .container .stack .image {
    border: none;
    box-shadow: none;
  }

  .about .container .stack .content {
    flex-direction: column;
  }

  .about .container .stack .content .widget {
    width: 100%;
  }

  .about .container .stack .content .widget:first-child {
    margin-right: 0;
    width: 100%;
  }

  .about .container .stack .content .widget:last-child {
    margin-left: 0;
    width: 100%;
  }

  .about .container .stack .content .widget svg g,
  .about .container .stack .content .widget:hover svg g {
    /*fill: var(--doppler);*/
  }

  .about .container .stack .content .widget span,
  .about .container .stack .content .widget:hover span {
    margin-left: 75px;
    color: var(--doppler);
  }

  .about .container .stack .content .widget:last-child {
    margin-top: 20px;
  }

  .tools {
    margin-top: 20px;
  }

  .tools .container {
    flex-direction: column;
    padding: 20px;
    padding-top: 40px;
  }

  .tools .container .first,
  .tools .container .end {
    display: flex;
    flex-direction: column;
    align-items: start;
    width: 100%;
  }

  .tools .container .first .mockup {
    height: auto;
  }

  .tools .container .first .mockup img {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
  }

  .tools .container .first .button {
    position: relative;
    right: auto;
  }

  .tools .container .end .content {
    margin-bottom: 0px;
    flex-direction: column;
  }

  .tools .container .end .content .function {
    width: 100%;
  }
  
  .work-process .container {
    padding: 0 20px;
  }

  .work-process .container span:nth-child(1) {
    width: 100%;
    text-align: start;
    font-weight: normal;
  }

  .work-process .container .title {
    width: 100%;
  }

  .work-process .container span:nth-child(3) {
    width: 100%;
  }

  .work-process .container .content {
    flex-direction: column;
    gap: 20px;
  }
  
  .work-process .container .content::before {
    position: absolute;
    top: 10%;
    left: calc(50% - 1.5px);
    content: '';
    width: 3px;
    height: 80%;
    background: var(--doppler);
  }

  .work-process .container .content .process {
    width: 100%;
    background: white;
  }

  .work-process .container .content .process svg {
    background: white;
  }

  .why {
      width: 100%;
      height: auto;
      overflow: hidden;
  }

  .why .container {
    padding: 40px 30px;
  }
  
  .why .container .head {
    flex-direction: column;
    align-items: start;
  }

  .why .container span:nth-child(1) {
    width: 100%;
    text-align: start;
    font-weight: normal;
  }

  .why .container p:nth-child(2) {
    width: 100%;
  }

  .why .container span:nth-child(3) {
    width: 100%;
  }

  .why .container .content {
    margin-top: 0;
    flex-direction: column;
  }

  .why .container .content img {
    width: 100%;
  }

  .why .container .content .details {
    width: 100%;
  }

  .why .container .content .stack {
    margin: 0;
    margin-bottom: 20px;
    align-items: center;
    width: 100%;
  }

  .why .container .content .stack:first-child {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }

  .why .container .content .stack:last-child {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
  }

  .why .container .content .stack span {
    text-align: center;
  }

  .christmas h2 {
    font-size: 1em;
  }

  .christmas p {
    font-size: 0.8em;
  }

  .christmas a {
    font-size: 0.6em;
    color: white;
  }

  .projects {
      width: 100%;
      overflow: hidden;
  }

  .projects .container {
    width: 100%;
    padding: 30px 20px;
  }

  .projects .container span:nth-child(1) {
    width: 100%;
    text-align: center;
    font-weight: normal;
  }

  .projects .container p:nth-child(2) {
    width: 100%;
  }

  .projects .container span:nth-child(3) {
    width: 100%;
  }

  .projects .container .stack {
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .projects .container .stack .project {
    margin: 0;
    flex-direction: column;
    width: 100%;
    height: auto;
    border-radius: 20px;
  }

  .projects .container .stack .project:nth-child(1) {
    border-radius: 20px;
  }

  .projects .container .stack .project:nth-child(2) {
    flex-direction: column;
    border-radius: 20px;
  }

  .projects .container .stack .project .image {
    width: 100%;
  }  

  .projects .container .stack .project .content {
    width: 100%;
    padding: 20px;
  }

  .projects .container .stack .project .content p {
    margin-bottom: 10px;
  }

  .contact {
    width: 100%;
    overflow: hidden;
  }

  .contact .container .content {
    flex-direction: column;
    width: calc(100% - 20px);
    border-radius: 30px;
  }

  .contact .container .content .image {
    margin-top: 10px;
    margin-left: 10px;
    width: calc(100% - 20px);
    padding: 0;
    border-radius: 20px;
  }

  .contact .container .content .stack {
    width: 100%;
    width: calc(100% - 20px);
    padding-top: 0;
  }

  .contact .container .content .stack form {
    margin-left: 10px;
    width: 100%;
  }

  .contact .container .content .stack input {
    width: calc(50% - 15px);
  }

  .contact .container .content .stack textarea {
    min-width: calc(100% - 15px);
    max-width: calc(100% - 15px);
  }

  .contact .container .content .stack .buttons {
    width: calc(100% - 5px);
  }

  .s_port,
  .n_port,
  .a_port {
    height: auto;
    flex-direction: column-reverse;
    padding: 0;
    background: white;
  }

  .s_port .background,
  .n_port .background,
  .a_port .background {
    position: relative;
    margin: 0;
    width: 100%;
    height: 200px;
  }

  .s_port .background .back,
  .n_port .background .back,
  .a_port .background .back {
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .s_port .container,
  .a_port .container {
    margin-top: 120px;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 0 30px;
    background: none;
    padding-bottom: 40px;
  }

  .n_port .container {
    margin-top: 50px;
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 0 30px;
    background: none;
    padding-bottom: 40px;
  }

  .s_port .container .section_title,
  .a_port .container .section_title {
    width: 100%;
    color: #333;
  }

  .n_port .container .section_title,
  .p_port .container .section_title {
    font-size: 32px;
    width: 100%;
    color: #333;
  }

  .s_port .container .section_description,
  .n_port .container .section_description,
  .p_port .container .section_description,
  .a_port .container .section_description {
    width: 100%;
    color: #616161;
  }

  .a_port .container .buttons {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .a_port .container .buttons .btn {
    border-color: var(--doppler);
    background: var(--doppler);
  }

  .a_port .container .buttons .btn span {
    color: white;
    font-weight: normal;
  }

  .a_port .container .buttons .btn svg {
    background: white;
  }

  .a_port .container .buttons .btn svg g {
    fill: var(--doppler);
  }
  
  .origin {
    margin-top: 30px;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    padding: 0 30px;
  }

  .origin .container {
    width: 100%;
    padding: 0;
  }

  .origin .content {
    width: 100%;
    padding: 0;
  }

  .origin .content .button {
      margin-left: auto;
      margin-right: auto;
  }

  .mision {
    margin-top: 30px;
    padding: 0 30px;
  }

  .mision .container {
    width: 100%;
  }

  .mision .container .section_title {
    width: 100%;
  }

  .mision .container .section_description {
    flex-direction: column;
  }

  .mision .container .section_description span {
    width: 100%;
  }

  .mision .content {
    flex-direction: column;
  }

  .mision .content .image {
    width: 100%;
  }

  .team {
    margin-top: 30px;
    padding: 0 30px;
  }

  .team .stack {
    flex-direction: column;
  }

  .team .stack .container {
    width: 100%;
  }

  .team .stack .content {
    width: 100%;
  }

  .team .stack:last-child .content {
    width: 100%;
  }

  .team .stack:last-child .container img {
    margin-right: 40px;
    max-width: 250px;
    max-height: 250px;
    pointer-events: none;
    user-select: none;
  }

  .values {
    margin-top: 30px;
    padding: 0 30px;
  }

  .values .container {
    width: 100%;
  }

  .values .content {
    margin-top: 20px;
    flex-direction: column;
  }

  .values .content .value {
    margin-bottom: 20px;
    width: 100%;
  }

  .news {
    margin-top: 30px;
    padding: 0 30px;
  }

  .news .container {
    width: 100%;
  }

  .news .container_i {
    width: 100%;
  }

  .news .container_i span:nth-child(1) {
    width: 100%;
    text-align: center;
  }

  .news .container_i p:nth-child(2) {
    width: 100%;
  }

  .news .container_i span:nth-child(3) {
    width: 100%;
  }

  .news .content {
    flex-direction: column;
  }

  .news .content .post {
    width: 100%;
  }

  .news .content .post .lab {
    font-size: 14px;
  }

  .news .content .post .title {
    font-size: 18px;
  }

  .news .content .post .date {
    font-size: 14px;
  }

  .news .content .post .info {
    display: none;
    font-size: 14px;
  }

  .news .content .post .buttons {
    justify-content: space-between;
    overflow: hidden;
  }

  .news .content .post .buttons div {
    position: relative;
  }

  .news .content .post .buttons div:nth-child(2) span {
    position: absolute;
    left: 30px;
    display: inline;
    color: transparent;
    width: 200px;
  }

  .news .content .post .buttons div:nth-child(2) span::first-letter {
    color: #242424;
  }

  .a_services {
    margin-top: 0px;
    padding: 0 30px;
    text-align: center;
  }

  .a_services .container {
    width: 100%;
    padding-bottom: 20px;
  }

  .service-header {
    padding: 20px;
    padding-top: 110px;
  }

  .service-header img {
    height: auto;
  }

  .service-content {
    padding: 20px;
  }

  .service-content .technologies .technology {
    width: calc(100%/3 - 10px);
  }

  .service-content .images {
    flex-direction: column;
    width: 100%;
  }

  .service-content .images img {
    width: 100%;
  }

  .service-content .app-types .app-type {
    width: 100%;
  }

  .service-content .ui-essence img {
    width: 100%;
  }

  .service-content .ui-essence .ui-features {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .service-content .ui-essence .ui-features .ui-feature {
    width: calc(50% - 10px);
  }

  .service-content .ui-methods .ui-method,
  .service-content .ui-elements .ui-element {
    width: calc(50%);
  }

  .section_title {
    font-size: 1.5em;
  }

  .p_projects {
    width: 100%;
    padding: 0 20px;
  }

  .p_projects .content {
    flex-direction: column;
    width: 100%;
  }

  .p_projects .content .project {
    width: 100%;
  }
  
  .p_projects .content .project .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    width: 100%;
    padding: 20px;
    background: white;
    z-index: 100;
  }
  
  .p_projects .content .project .content span:nth-child(1) {
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
    font-size: 12px;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    text-align: start;
    color: #616161;
    font-weight: normal;
  }
  
  .p_projects .content .project .content p {
    margin: 0;
    margin-bottom: 10px;
    width: auto;
    font-size: 22px;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    color: #1f1f1f;
    text-align: start;
    font-weight: normal;
  }
  
  .p_projects .content .project .content span:nth-child(3) {
    margin: 0;
    width: 100%;
    font-size: 16px;
    letter-spacing: .02em;
    font-family: SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    line-height: 1.1;
    text-align: start;
    color: #616161;
    font-weight: normal;
  }

  .s_services {
    margin-top: 40px;
    padding: 0 20px;
  }

  .s_services .content .s_service {
    flex-direction: column;
  }

  .s_services .content .s_service:nth-child(2),
  .s_services .content .s_service:nth-child(4) {
    flex-direction: column;
  }

  .s_services .content .s_service .stack {
    margin-top: 10px;
    width: 100%;
    padding: 0;
  }

  .s_services .content .s_service .stack .section_title {
    margin-top: 10px;
    font-size: 22px;
  }

  .categories .container {
    justify-content: start;
    padding: 0;
    overflow: scroll;
  }

  .categories .container .category {
    width: 100px;
    text-align: center;
  }

  .categories .container .category .indicator {
    bottom: 0;
  }

  .news_container .container {
    flex-direction: column;
    padding: 0 20px;
    justify-content: center;
  }

  .news_container .container .post {
    margin-bottom: 20px;
    width: 100%;
  }

  .news_container .container .post .lab {
    font-size: 14px;
  }

  .news_container .container .post .title {
    font-size: 18px;
  }

  .news_container .container .post .date {
    font-size: 14px;
  }

  .news_container .container .post .info {
    display: none;
    font-size: 14px;
  }

  .news_container .container .post .buttons {
    justify-content: space-between;
    overflow: hidden;
  }

  .news_container .container .post .buttons div {
    position: relative;
  }

  .news_container .container .post .buttons span {
    display: none;
  }

  .news_container .container .post .buttons div:nth-child(2) span {
    position: absolute;
    left: 30px;
    display: inline;
    color: transparent;
    width: 200px;
  }

  .news_container .container .post .buttons div:nth-child(2) span::first-letter {
    color: #242424;
  }

  .c_port {
    width: 100%;
    height: auto;
    padding: 0 20px;
  }

  .c_port .container {
    flex-direction: column;
    text-align: center;
  }

  .c_port .container .section_title {
    margin-top: 110px;
  }

  .contact_container {
    margin-top: 20px;
    width: 100%;
    flex-direction: column-reverse;
    padding: 0 20px;
  }

  .contact_container .container {
    width: 100%;
  }

  .contact_container .content {
    margin-bottom: 20px;
    width: 100%;
  }

  .schedule {
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0 20px;
  }

  .schedule .container {
    width: 100%;
  }

  .schedule .container .section_title {
    font-size: 1.5em;
  }

  .schedule .content {
    width: 100%;
    height: auto;
  }

  .schedule .content iframe {
    height: 300px;
  }

  .new_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    padding-bottom: 40px;
    background: white;
  }
  
  .new_content {
    margin-top: 60px;
    width: 100%;
    padding: 40px;
    background: white;
  }

  .new_port .data .share {
    top: 45px;
    left: 0;
    width: 100%;
    justify-content: space-around;
  }

  .new_port .data .share .shareBtn:hover span {
    width: 0;
  }

  .new_port h1 {
    font-size: 1.8em;
  }

  .new_port img {
    margin-top: 60px;
  }

  .writer .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  .writer .data .name {
    font-weight: normal;
  }

  .new_text h2 {
    font-size: 1.3em;
    font-weight: normal;
    color: #000;
  }

  .new_text h3 {
    font-size: 1.2em;
    font-weight: normal;
    color: #000;
  }
  
  .new_widgets {
    margin-top: 0;
    width: 100%;
    padding: 40px;
    background: white;
  }

  .comments .comment .container .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  .comments .comment .container .data .buttons {
    margin-top: 10px;
  }
  
  .comments .comment .container .data .buttons span {
    margin-top: 10px;
    display: inline-block;
  }

  .comments .comment .comment_replies .comment_reply .avatar img {
    width: 40px;
    height: 40px;
    border-radius: 20px;
  }

  .comments .comment .comment_replies .comment_reply .data .buttons {
    margin-top: 10px;
  }
  
  .comments .comment .comment_replies .comment_reply .data .buttons span {
    margin-top: 10px;
    display: inline-block;
  }

  .publish input {
    width: 100%;
  }
  
  .publish textarea {
    max-width: 100%;
    min-width: 100%;
  }

  .new_widgets .widget .stack .buttons {
    justify-content: space-between;
    overflow: hidden;
  }

  .new_widgets .widget .stack .buttons div {
    position: relative;
  }

  .new_widgets .widget .stack .buttons span {
    display: none;
  }

  .new_widgets .widget .stack .buttons div:nth-child(2) span {
    position: absolute;
    left: 30px;
    display: inline;
    color: transparent;
    width: 200px;
  }

  .new_widgets .widget .stack .buttons div:nth-child(2) span::first-letter {
    color: #242424;
  }

  .footer {
    width: 100%;
    padding: 20px 10px;
    overflow: hidden;
  }

  .footer .information {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 0px;
  }

  .footer .information .logo {
    margin-top: 40px;
    width: 100%;
  }

  .footer .information .info-items {
    margin: 0;
    margin-top: 130px;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    width: 100%;
  }

  .footer .information .info-items .info-item {
    margin: 0;
    margin-top: 40px;
    width: 100%;
  }

  .footer .information .footer-subscribe {
    margin-top: 40px;
    width: 100%;
  }

  .footer .information .footer-subscribe form {
    flex-direction: column;
    align-items: start;
  }

  .footer .information .footer-subscribe form input {
    width: 100%;
  }

  .footer .information .footer-subscribe form .button {
    margin-top: 20px;
    margin-left: 0;
  }

  .footer .copyright {
    line-height: 1.1;
    font-weight: normal;
    padding: 20px 20px;
  }

  .footer .copyright .separatorHori {
      left: 20px;
      width: calc(100% - 40px);
  }

  .footer .copyright span {
    text-align: start;
  }

  .footer .copyright .options {
    flex-direction: column;
    justify-content: center;
  }

  .footer .copyright .options span {
    width: auto;
  }

  .cookie_layout {
    width: 100%;
    overflow: hidden;
  }

  .cookie {
    bottom: calc(50% - 150px);
    flex-direction: column;
    width: calc(100% - 40px);
    height: auto;
    box-shadow: 0 0 5px rgba(77, 77, 77, 0.5); 
    padding: 0 20px;
    overflow: hidden;
  }

  .cookie span {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .cookie .buttons {
    margin-top: 0;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    width: 100%;
    gap: 0;
  }

  .cookie .cancel-cookie {
    margin: 0;
  }

  .cookie .accept-cookie {
    width: 100px;
  }

  .cookie .buttons span {
    margin: 0;
  }

  .footer .copyright {
    display: flex;
    flex-direction: column;
  }

  .footer .copyright .options {
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }

  .footer .copyright .options span {
    margin: 0;
    margin-bottom: 10px;
  }

  .footer .copyright .separator {
    opacity: 0.0;
  }

  .mouse-cursor {
    display: none;
  }

  .tagg {
    width: max-content!important;
    font-weight: normal!important;
    padding: 5px 10px;
    border-radius: 20px;
    background: #d3e6ff!important;
    color: var(--doppler)!important;
  }

  .videoframe {
    width: 100%;
    height: 250px;
  }

}

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

  .port .container .buttons {
    justify-content: start;
    gap: 20px;
  }

  .contact .container .content .stack .button-send {
    width: 140px;
  }

  .contact .container .content .stack .button-send span {
    margin: 0 0 0 10px;
    width: 80px;
  }

}

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

  .port .container .buttons .btn:last-child span {
    display: none;
  }

}

@media screen and (max-height: 721px) {
  .plus_service .container {
    margin-top: 0px;
  }

  .port {
    height: fit-content;
    min-height: 496px;
  }

  .about .container {
    padding-top: 0px;
  }
}

*::-webkit-scrollbar {
    width: 10px;
    height: 0;
}

*::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}
  
*::-webkit-scrollbar-corner {
    background: transparent;
}
  
*::-webkit-scrollbar-track {
    background: transparent;
}
  
*::-webkit-scrollbar {
    background: transparent;
}
  
*::-webkit-scrollbar-thumb {
    background: rgba(87, 87, 87, 0.5);
    border-radius: 5px;
}

@keyframes snowfall {
    to {
        transform: translateY(100vh);
    }
}

@keyframes slidement {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-900px);
        transform: translateX(-900px);
    }
}

@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }

  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
      box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}

@keyframes shine {
  0% {
    mask-position: 150% center;
  }

  100% {
      mask-position: -50% center;
  }
}

@keyframes load {
  from {
    width: 10%;
  }
  to {
    width: 0;
  }
}

@keyframes scale {
  0% {
    scale: 0;
  }

  40% {
    scale: 0.8;
  }

  70% {
    scale: 0.6;
  }

  100% {
    scale: 1;
  }
}