/* <?php echo admin_url('admin-ajax.php'); ?> */



:root {

  --primary-color: #eeeefe;

  --secundary-color: #236984;

  --tertiary-color: #fff;

  --button-color: #35a0c9;
  
  --button-color-violet: #bf8bff;

  --button-color-RGB: 255, 0, 255;

  --footer-color: #000000;

}


button {

  font-family: "Source Sans Pro", sans-serif;

}



html {

  font-family: "Source Sans Pro", sans-serif;

  font-style: normal;

  font-weight: 400;

}



*,

*::before,

*::after {

  -webkit-box-sizing: inherit;

  box-sizing: inherit;

}



ul {

  list-style: none;

}



a,

a:visited,

a:hover {

  text-decoration: none;

}



.flex {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

}



.flex-jc-sb {

  -webkit-box-pack: justify;

  -ms-flex-pack: justify;

  justify-content: space-between;

}



.flex-jc-c {

  -webkit-box-pack: center;

  -ms-flex-pack: center;

  justify-content: center;

}



.flex-ai-c {

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}



.flex-d-row {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -ms-flex-direction: row;

  flex-direction: row;

}



.flex-d-col {

  -webkit-box-orient: vertical;

  -webkit-box-direction: normal;

  -ms-flex-direction: column;

  flex-direction: column;

}



/* Header */



body {

  overflow: initial;

  margin: 0;

  background: var(--primary-color);

}



.heightPage {

  min-height: 85vh;

}



.link {

  color: var(--secundary-color);

}

.main-menu {

  max-width: 1280px;

  margin: auto;

  padding: 1rem 1rem;

  height: 60px;

}



.main-menu {

  display: flex;

  justify-content: space-between;

  font-size: 1.5rem;

  align-items: center;

}

.nav_menu_list {

  display: flex;

  gap: 2rem;

  align-items: center;

}

.nav_menu_list a {

  white-space: nowrap;

}



.logo {

  width: 24%;

}



/* meniu mobile */

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

  .hamburger-lines {

    display: block;

    height: 35px;

    width: 45px;

    position: absolute;

    top: 45px;

    right: 25px;

    z-index: 16;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

  }

  .hamburger-lines .line {

    display: block;

    height: 6px;

    width: 100%;

    border-radius: 10px;

    background: var(--button-color);

  }

  .hamburger-lines .line1 {

    -webkit-transform-origin: 0% 0%;

    transform-origin: 0% 0%;

    -webkit-transition: -webkit-transform 0.4s ease-in-out;

    transition: -webkit-transform 0.4s ease-in-out;

    transition: transform 0.4s ease-in-out;

    transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;

  }

  .hamburger-lines .line2 {

    -webkit-transition: -webkit-transform 0.2s ease-in-out;

    transition: -webkit-transform 0.2s ease-in-out;

    transition: transform 0.2s ease-in-out;

    transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;

  }

  .hamburger-lines .line3 {

    -webkit-transform-origin: 0% 100%;

    transform-origin: 0% 100%;

    -webkit-transition: -webkit-transform 0.4s ease-in-out;

    transition: -webkit-transform 0.4s ease-in-out;

    transition: transform 0.4s ease-in-out;

    transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;

  }

  .menu-items {

    gap: 2rem;

    margin: auto;

    position: absolute;

    padding-top: 120px;

    background: rgb(11, 11, 206);

    background: linear-gradient(175deg, #236984 25%, #ffffff 100%);
	
    z-index: 10;

    height: 150vh;

    width: 100%;

    -webkit-transform: translate(-200%);

    transform: translate(-200%);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    margin-right: -40px;

    padding-right: 50px;

    -webkit-transition: -webkit-transform 0.5s ease-in-out;

    transition: -webkit-transform 0.5s ease-in-out;

    transition: transform 0.5s ease-in-out;

    transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;

    text-align: center;

    font-size: 1.5rem;

    color: #fff;

  }



  .logoMobile {

    position: absolute;

    top: 6px;

    left: 7px;

    width: 56%;

  }



  .buttonsMenu {

    gap: 2rem;

    display: flex;

    flex-direction: column;

  }

  .menu-items a {

    color: var(--primary-color);

  }



  .social-media-menu {

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

  }

  .sign-menu {

    margin: 10%;

    width: 80%;

  }

  .sign-menu img {

    width: 100%;

  }

  input[type="checkbox"]:checked ~ .menu-items {

    -webkit-transform: translateX(0%);

    transform: translateX(0%);

  }

  input[type="checkbox"]:checked ~ .hamburger-lines .line1 {

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

    background: var(--primary-color);

  }

  input[type="checkbox"]:checked ~ .hamburger-lines .line2 {

    -webkit-transform: scaleY(0);

    transform: scaleY(0);

  }

  input[type="checkbox"]:checked ~ .hamburger-lines .line3 {

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    background: var(--primary-color);

  }

  .checkbox {

    position: absolute;

    display: block;

    height: 35px;

    width: 35px !important;

    top: 40px;

    right: 30px;

    z-index: 20;

    opacity: 0;

    cursor: pointer;

  }



  .main-menu .nav_menu_list {

    display: none;

  }

  .main-menu {

    padding: 0rem 1rem;

  }

  .menu-items a {

    font-weight: 400;

    margin: 0rem auto;

    width: 70%;

  }

  .logo {

    width: 40%;

  }

  .formularMobileMenu p {

    font-size: 1.5rem;

    margin: 1rem;

  }

}

.button {

  padding: 1rem 1rem;

  width: 240px;

  height: 64px;

  color: var(--tertiary-color);

  background-color: var(--button-color);

  border-radius: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.buttond {

  padding: 1rem 1rem;

  width: 170px;

  height: 55px;

  color: var(--tertiary-color);

  background-color: var(--button-color);

  border-radius: 13px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.menu-items h4 {

  margin-top: 0rem;

  margin-bottom: 0rem;

}



/* END HEADER */



/* FOOTER */



footer {

  background-color: var(--footer-color);

  color: var(--primary-color);

}

footer a {

  color: var(--primary-color);

}

.menu-footer {

  max-width: 1280;

  width: 100%;

  padding: 1rem;

  margin: auto;

  gap: 5px;

}



.collapsible {

  color: white;

  cursor: pointer;

  padding: 18px;

  border: none;

  text-align: left;

  outline: none;

  font-size: 1rem;

  align-items: center;

}



.collapsible img {

  width: 48px;

  height: 48px;

}



.active,

.collapsible:hover {

  background-color: transparent;

}

#up {

  display: none;

}

.active #down {

  display: none;

}

.active #up {

  display: block;

}



.content {

  display: none;

  padding: 18px 18px;

  max-height: 0;

  overflow: hidden;

  -webkit-transition: max-height 0.2s ease-out;

  transition: max-height 0.2s ease-out;

}

/* LandingPage */

.hero {

  padding: 8rem 2rem;

  max-width: 1280px;

  margin: auto;

  gap: 5rem;

}



.linkHero {

  color: var(--tertiary-color);

}



.heroTitle {

  font-size: 5rem;

  font-weight: 800;

  color: var(--secundary-color);

  line-height: 1.2;

}



.linkHero:hover {

  color: var(--button-color);

}



.linkHeroImage {

  width: 160px;

  height: 40px;

  margin: 1rem 0rem;

  background: url("../images/icon-arrow.svg") no-repeat;

}



.linkHero:hover .linkHeroImage {

  background: url("../images/icon-arrow-color.svg") no-repeat;

}



.linkHero p {

  font-size: 1rem;

  margin: 1rem 0rem;

}



.hero .l,

.hero .r {

  width: 50%;

}

.hero .l {

  gap: 3rem;

}



.sign {

  background-image: url("../images/simbol-watermark.svg");

  background-repeat: no-repeat;

  position: absolute;

  width: 83.9vw;

  height: 1524.13px;

  top: 40px;

  left: 14.7%;

  z-index: -1;

}

.signRd {

  background-image: url("../images/watermark-Rd.svg");

  background-repeat: no-repeat;

  position: absolute;

  width: 83.9vw;

  height: 1524.13px;

  top: 40px;

  left: 15%;

  z-index: -1;

  opacity: 0.1;

}



.signSame {

  background-image: url("../images/watermark-Rd.svg");

  background-repeat: no-repeat;

  position: absolute;

  width: 83.9vw;

  min-height: 100%;

  max-height: 1524.13px;

  height: 500px;

  top: 40px;

  left: 15%;

  z-index: -1;

  opacity: 0.1;

}

.signSameST {

  background-image: url("../images/watermark-Rd.svg");

  background-repeat: no-repeat;

  position: absolute;

  width: 83.9vw;

  min-height: 200%;

  max-height: 1524.13px;

  height: 500px;

  top: 40px;

  left: 15%;

  z-index: -1;

  opacity: 0.1;

}

.signNot {

  background-image: url("../images/watermark-Rd.svg");

  background-repeat: no-repeat;

  position: absolute;

  width: 83.9vw;

  min-height: 100%;

  max-height: 1524.13px;

  height: 500px;

  top: 40px;

  left: 15%;

  z-index: -1;

  opacity: 1;

}



.hero .r img {

  width: 100%;

}



.bgLanding {

  background: linear-gradient(

    0deg,

    rgba(35, 105, 132, 1) 62%,

    rgba(238, 238, 254, 1) 100%

  );

  position: absolute;

  z-index: -2;

  height: 1740px;

  width: 100%;

}



.tableMenu {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));

  gap: 1rem;

  row-gap: 4rem;

  padding: 5rem 2rem 10rem 2rem;

  max-width: 1280px;

  margin: auto;

}



.cardlink {

  width: 308px;

  height: 308px;

  border-radius: 25px;

  #background-color: var(--primary-color);
  
    background: linear-gradient(

    0deg,

    rgba(35, 105, 132, 1) 50%,

    rgba(238, 238, 254, 1) 100%

  );

  opacity: 1;

  transition: 0.3s all ease-in-out;

}



.cardTitle {

  color: var(--button-color);

  font-size: 1.5rem;

  font-weight: 600;

  padding: 0 1rem;

  transition: 0.3s all ease-in-out;

  text-align: center;

}

.mchTitle {

  margin-bottom: 0.5rem;

}

.cardlink:hover {

  background: rgb(11, 11, 206);

  /* background: linear-gradient( */

    /* 0deg, */

    /* rgba(11, 11, 206, 1) 0%, */

    /* rgba(255, 0, 255, 1) 100% */

  /* ); */
  
      background: linear-gradient(

    0deg,

    rgba(35, 105, 132, 1) 70%,

    rgba(238, 238, 254, 1) 100%

  );

  transition: 0.3s all ease-in;

}



.cardMobile {

  height: 350px;

  background-color: var(--primary-color);

  border-radius: 25px;

  padding: 1rem 3rem;

}



.stimg {

  padding: 2rem;

  width: 50%;

}

.stimghover {

  padding: 1rem;

  width: 70%;

}



.padimg {

  padding: 2rem;

}

.rhImgHover {

  padding: 1rem;

}

.mchImg {

  width: 50%;

}



.cardImageMobile {

  height: 70%;

  width: auto !important;

  transition: 0.3s all ease-in-out;

}



.cardlink:hover .cardTitle {

  color: var(--primary-color);

  transition: 0.3s all ease-in-out;

}



.cardlink:hover .cardImageDesktop {

  display: none;

  transition: 0.3s all ease-in-out;

}



.cardImageDesktopHover {

  display: none;

  transition: 0.3s all ease-in-out;

}



.cardlink:hover .cardImageDesktopHover {

  display: block;

  transition: 0.3s all ease-in-out;

}



.paragrafHover {

  color: var(--primary-color);

  display: none;

}



.cardlink:hover .paragrafHover {

  display: flex;

  gap: 2rem;

  transition: 0.3s all ease-in-out;

}



.arrow .hoverImage {

  width: 70px;

}



.arrow .arrowImage {

  width: 40px;

}



.arrow .hoverImage {

  display: none;

}



.despreButton:hover .hoverImage,

.despreNoiButton:hover .hoverImage {

  display: inline;

}



.despreButton:hover .arrowImage,

.despreNoiButton:hover .arrowImage {

  display: none;

}



.despreLandingBg {

  /* background-color: var(--secundary-color); */

}

.despre {

  max-width: 1280px;

  margin: auto;

  color: var(--tertiary-color);

  gap: 3rem;

  height: 644px;

  padding: 11rem 1rem;

}



.despre .l {

  width: 50%;

}



.despre .l .textDespre,

.adresare .l .textDespre {

  padding-right: 5rem;

}



.despre .r {

  overflow: hidden;

  width: 50%;

}



.adresare {

  padding: 12rem 1rem;

  gap: 3rem;

  background-color: var(--primary-color);

  max-width: 1280px;

  margin: auto;

}



.adresare .l {

  width: 50%;

  gap: 5rem;

}



.adresare .r {

  overflow: hidden;

  width: 50%;

}



#despreLogo {

  width: 468px;

}



.despreNoiButton {

  gap: 2rem;

  justify-content: center;

  border: 2px solid var(--button-color-violet);

  border-radius: 50px;

  background-color: transparent;

  color: var(--tertiary-color);

  width: 300px;

  margin: auto;

}



.despreButton {

  gap: 2rem;

  justify-content: center;

  border-radius: 50px;

  background-color: var(--button-color);

  color: var(--tertiary-color);

  width: 300px;

}



.despreButton:hover,

.despreNoiButton:hover {

  width: 335px;

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

}



.buttonSwich {

  gap: 2rem;

}



.adresareTitle {

  font-size: 2.5rem;

  color: var(--secundary-color);

  font-weight: 600;

}



.selected {

  background-color: var(--secundary-color);

  color: var(--primary-color) !important;

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

}



#buttonSwichR,

#buttonSwichL {

  border-radius: 50px;

  padding: 1rem;

  border: 3px solid var(--secundary-color);

  color: var(--secundary-color);

  font-weight: 600;

  width: 15rem;

  text-align: center;

}



#showImgL {

  display: block;

  padding: 9rem 0rem;

  max-width: 400px;

  margin: auto;

}

#showImgR {

  padding: 3rem 0rem;

  max-width: 300px;

  margin: auto;

}



#swichR,

#showImgR {

  display: none;

}



.faq {

  background-color: var(--primary-color);

  max-width: 1280px;

  padding: 0 2rem 5rem 2rem;

  margin: auto;

}



.faqButtons {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));

  gap: 1rem;

  margin-top: 2rem;

  margin-bottom: 2rem;

  cursor: pointer;

  justify-items: center;

}



.boxButton {

  width: 146px;

  height: 146px;

  background-color: var(--secundary-color);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  color: var(--primary-color);

}



.boxButton:hover {

  background-color: var(--button-color);

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



.generalQs,

.hardQs,

.ssdQs,

.hardWQs,

.usbQs,

.alteleQs {

  display: grid;
  flex-wrap: wrap;

  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));

  gap: 2rem;

  cursor: pointer;

}



.hardQs,

.ssdQs,

.hardWQs,

.usbQs,

.alteleQs {

  display: none;

}



.faqSelected {

  background-color: var(--button-color);

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

}



.question {

  border-radius: 12px;

  background-color: var(--secundary-color);

  color: var(--primary-color);

  height: fit-content;

}

.question:hover {

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

}



.question .active {

  background-color: var(--button-color);

  border-radius: 12px 12px 0 0;

}



.question .content {

  background-color: var(--button-color);

  border-radius: 0 0 12px 12px;

}



.questionTitle {

  display: flex;

  justify-content: space-between;

}



.textCta {

  display: flex;

  margin: auto 0;

}



.ctaBg {

  width: 100%;

  background: transparent linear-gradient(175deg, #236984 25%, #ffffff 100%) 0%

    0% no-repeat padding-box;

}



.cta {

  max-width: 1280px;

  margin: auto;

  padding: 5rem 2rem;

  gap: 2rem;

  color: var(--primary-color);

  font-size: 1rem;

}



.buttonCta .despreButton {

  width: 400px;

}



.buttonCta .despreButton:hover {

  width: 450px;

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

}



@media (max-width: 63.9375em) {

  .hero .l,

  .despre .l,

  .despre .r,

  .adresare .r,

  .adresare .l {

    width: auto;

  }



  .despre .l,

  .adresare .l {

    margin: 0;

    font-size: 1rem;

    gap: 4rem;

    padding: 1rem;

  }



  .despre .l .textDespre,

  .adresare .l .textDespre {

    padding-right: 0rem;

  }



  .despre,

  .adresare {

    height: auto;

    flex-direction: column-reverse;

  }

  .adresare {

    padding: 5rem 0rem;

  }



  .hero .r {

    display: none;

  }



  .tableMenu {

    grid-template-columns: auto;

    row-gap: 2rem;

  }



  .bgLanding {

    height: 3000px;

  }



  #showImgL,

  #showImgR {

    padding: 0;

  }



  .despreButton,

  .despreButton:hover,

  .buttonCta .despreButton,

  .buttonCta .despreButton:hover,

  .despreNoiButton:hover,

  .despreNoiButton {

    width: auto;

  }



  .cta {

    flex-direction: column;

  }

  #despreLogo {

    width: auto;

  }

  .generalQs,

  .hardQs,

  .ssdQs,

  .hardWQs,

  .usbQs,

  .alteleQs {

    grid-template-columns: auto;

  }



  .ctaBg {

    background: transparent

      linear-gradient(270deg, var(--unnamed-color-0b0bce) 0%, #ff00ff 100%) 0%

      0% no-repeat padding-box;

    background: transparent linear-gradient(175deg, #236984 25%, #ffffff 100%) 0%

    0% no-repeat padding-box;

    opacity: 1;

    background-repeat: initial;

  }

  .rhImgMobile {

    height: 120px;

    width: 150px !important;

  }

  .sign {

    width: 164vw;

    top: 44px;

    left: -65%;

  }

}

@media (min-width: 2200px) {

  .sign,

  .signRd,

  .signSame,

  .signSameST {

    width: 58vw;

    left: 41%;

  }

  .signSameST {

    min-height: 100%;

  }

}



/* End Landing Page */



/* Recuperare Page */

.heroRd {

  max-width: 1280px;

  margin: auto;

  padding: 8rem 2rem;

  gap: 10rem;

}



.rRd {

  display: flex;

  justify-content: center;

}



.rRd,

.lRd {

  width: 50%;

}



.rRd img,

.lRd img {

  width: 80%;

}

.rRd #imgRd {

  width: 100%;

}



.titleRd {

  font-size: 3rem;

  color: var(--secundary-color);

  font-weight: 600;

}



.branduri {

  max-width: 1280px;

  margin: auto;

  padding: 10rem 2rem;

  gap: 5rem;

}



.imgB {

  display: grid;

  align-items: baseline;

  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

  gap: 5rem;

}

.imgB > img {

  max-width: 140px;

  width: 100%;

}



.deliverBoxing {

  display: flex;

  justify-content: space-between;

  gap: 2rem;

  max-width: 1280px;

  padding: 1rem;

  margin: auto;

  margin-top: 5rem;

}



.deliverL,

.deliverR {

  width: 50%;

}



.deliverL > h1 {

  color: var(--secundary-color);

  font-size: 3rem;

  margin-bottom: 2rem;

  font-weight: 600;

}



.deliverList > li {

  color: var(--secundary-color);

  padding-bottom: 1rem;

  list-style: disc;

}



.deliverR > img {

  display: flex;

  margin: auto;

  max-width: 500px;

  width: 100%;

}



/* Suport Tehnic */



.serviciiList {

  max-width: 1280px;

  margin: auto;

  padding: 1rem;

}



.serviciiList > h1 {

  color: var(--secundary-color);

}



.servicii3List {

  display: flex;

  justify-content: space-between;

}



.serviciiFirstList,

.serviciiSecondList,

.serviciiThirdList {

  padding: 1rem;

}

.serviciiFirstList > ul > li,

.serviciiSecondList > ul > li,

.serviciiThirdList > ul > li {

  list-style: disc;

  font-weight: 600;

}

.serviciiFirstList > ul > li > p,

.serviciiSecondList > ul > li > p,

.serviciiThirdList > ul > li > p {

  font-weight: 400;

}



.serviciiFirstList > .titleList,

.serviciiSecondList > .titleList,

.serviciiThirdList > .titleList {

  color: var(--secundary-color);

  padding: 1rem;

  font-size: 1.5rem;

  font-weight: 800;

}



.serviciiFirstList > img,

.serviciiSecondList > img,

.serviciiThirdList > img {

  max-width: 240px;

  width: 100%;

  display: flex;

  margin: auto;

}



@media (max-width: 63.9375em) {

  .heroRd {

    flex-direction: column-reverse;

  }



  .deliverBoxing,

  .servicii3List {

    flex-direction: column;

  }

  .deliverL,

  .deliverR {

    width: 100%;

  }



  .rRd,

  .lRd {

    width: 100%;

  }



  .titleRd {

    font-size: 2rem;

  }



  p {

    font-size: 1rem;

  }

  .diag {

    display: flex;

    justify-content: center;

  }

  .imgb {

    gap: 3rem;

  }

}

/* Recuperare Page End */



/* Pret page */

.triGrid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(385px, 1fr));

  gap: 2rem;

  row-gap: 2rem;

  padding: 5rem 2rem 10rem 2rem;

  max-width: 1280px;

  margin: auto;

}



.comp,

.Pf {

  display: flex;

  flex-direction: column;

  gap: 3rem;

  color: var(--primary-color);

  background-color: var(--secundary-color);

  border-radius: 25px;

  width: 350px;

  padding: 2rem;

  justify-content: center;

  align-items: center;

  text-align: center;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}



.comp img,

.Pf img {

  width: 200px;

}



.buttonPf {

  width: 200px;

  border: 2px solid var(--primary-color);

  border-radius: 50px;

  padding: 1rem;

}



.buttonT {

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: var(--button-color);

  color: var(--primary-color);

  padding: 1rem;

  width: 200px;

  border-radius: 50px;

}



.titlePret {

  font-size: 1.5rem;

  color: var(--secundary-color);

}



.pret {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



@media (max-width: 63.9375em) {

  .triGrid {

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  }


  .Pf,

  .comp {

    width: auto;

  }



  .Pf img,

  .comp img {

    width: 180px;

  }



  .buttonPf {

    font-size: 1.5rem;

    width: 220px;

  }



  .Pf .despreButton,

  .comp .despreButton {

    width: 280px;

  }



  .buttonT {

    width: 280px;

    font-size: 1.5rem;

  }



  .titlePret {

    font-size: 2rem;

  }

}

/* End Pret Page */



/* Despre noi page */



.backgroundDespre {

  background: linear-gradient(    0deg,    rgba(35, 105, 132, 1) 80%,    rgba(238, 238, 254, 1) 100%  );

  min-height: 100vh;

}



.containterD,

.formular {

  max-width: 1280px;

  display: flex;

  flex-direction: column;

  margin: auto;

  padding-top: 4rem;

  padding-bottom: 4rem;

  padding-left: 1rem;

  padding-right: 1rem;

  color: var(--primary-color);

}



.logoDespre {

  padding-top: 5rem;

  padding-bottom: 5rem;

}



.containerDespreU,

.containerDespreD {

  display: flex;

  gap: 10rem;

  margin-top: 5rem;

}



.desprePersoane {

  display: flex;

  flex-direction: row;

  margin-top: 5rem;

  margin-bottom: 5rem;

  justify-content: center;

  max-width: 1100px;

  margin: auto;

  gap: 5rem;

  padding: 1rem;

  flex-wrap: wrap;

}

.despreEchipa {

  margin-top: 5rem;

  margin-bottom: 5rem;

}



.containerRight {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.paragraf,

.containerRight {

  width: 50%;

}



.paragraf {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



.containerRight img {

  width: 500px;

}



.links img {

  width: auto;

}



.links {

  display: flex;

  gap: 1rem;

  padding-top: 1rem;

  padding-bottom: 1rem;

}



.name {

  font-size: 1.5rem;

  font-weight: 600;

}



.name p {

  font-size: 1rem;

  font-weight: 400;

}



.bottomPart {

  padding: 2rem;

}



.contactD p {

  margin: auto;

  padding: 5rem 2rem;

  color: var(--primary-color);

  font-size: 1rem;

}



.mail,

.phone,

.address {

  width: 300px;

  border-radius: 50px;

  gap: 2rem;

  justify-content: center;

  align-items: center;

  background-color: var(--button-color);

  color: var(--primary-color);

  padding: 0.5rem;

}



.contactDetails {

  max-width: 1280px;

  margin: auto;

  justify-content: center;

  gap: 2rem;

  padding-bottom: 5rem;

  flex-wrap: wrap;

}



@media (max-width: 63.9375em) {

  .containerDespreU .containerRight img {

    display: none;

  }

  .containerDespreU,

  .containerDespreD {

    flex-direction: column;

    gap: 5rem;

    margin-top: 0;

  }



  .paragraf,

  .containerRight {

    width: 100%;

  }



  .logoDespre {

    margin: auto;

  }



  .containerRight img {

    width: 100%;

    max-width: 450px;

    align-self: center;

  }



  .name {

    font-size: 2rem;

  }



  .name p {

    font-size: 1rem;

  }



  .mail,

  .phone,

  .address {

    font-size: 1rem;

    width: auto;

    padding: 2rem;

  }

}



/* End Despre noi page */



.bottom-footer {

  max-width: 1280px;

  padding: 1rem;

  margin: auto;

}



.first-menu-footer,

.second-menu-footer,

.third-menu-footer {

  width: 25%;

}



.strada,

.telefon,

.email {

  gap: 2rem;

}



@media (max-width: 63.9375em) {

  .menu-footer {

    flex-direction: column;

  }

  footer a {

    font-size: 1rem;

  }

  .bottom-footer {

    flex-direction: column;

  }

  .bottom-footer a {

    font-size: 1rem;

  }

  .first-menu-footer,

  .second-menu-footer,

  .third-menu-footer {

    width: auto;

  }

  .strada,

  .telefon,

  .email {

    font-size: 1rem;

  }

}



.socialLinks {

  display: flex;

  padding-top: 1rem;

  gap: 1rem;

}



#imgFooter {

  max-width: 150px;

  width: 100%;

  padding-top: 0.3rem;

}



/* END FOOTER */



@media (max-width: 63.9375em) {

  .hide-for-mobile {

    display: none;

  }

}



@media (min-width: 64em) {

  .hide-for-desktop {

    display: none;

  }

}



/* scriere mobile */



@media (max-width: 63.9375em) {

  .heroTitle {

    font-size: 3rem;

  }

  .cardMobile {

    height: auto;

    padding: 1rem 1rem;

  }

  .cardTitle {

    font-size: 1rem;

    font-weight: 800;

  }

  .buttonSwich {

    flex-direction: column;

  }

  #buttonSwichR,

  #buttonSwichL {

    width: auto;

  }

  #showImgL,

  #showImgR {

    width: 100%;

  }

  .despre .r img {

    width: 100%;

  }

}



/* form style */

/* form {

  max-width: 1280px;

  margin: auto;

  padding: 1rem;

} */

.formContainer {

  display: flex;

  justify-content: space-between;

}

.leftFormBaseContainer {

  display: flex;

  flex-direction: row;

  gap: 1rem;

}



.leftFormContainer,

.rightFormContainer,

form {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}

.formLeftPart {

  display: flex;

  gap: 2rem;

}



.formFp input,

.formSp input,

#name,

#adresa,

#telefon,

#email,

#producator,

#numar_model,

#capacitate,

#numar_serial,

#company_name,

#company_id,

#postal_code,

#county,

#city,

#street,

#nr,

#bl,

#sc,

#interfon,

#et,

#ap,

#reper,

#AWB {

  width: 250px;

  padding: 1rem;

  border-radius: 12px;

   border: 2px solid var(--button-color-violet);

}

.formFp p {
	height: 35px;
}







#city,

#street,

#nr,

#bl,

#sc,

#interfon,

#et,

#ap,

#reper {

  width: 290px;

  padding: 1rem;

  border-radius: 12px;

  border: 0;

}



.input-colete > div {

  display: flex;

  flex-direction: row;

}



#county {

  width: 215px;

  padding: 1rem;

  border-radius: 12px;

  border: 0;

}



#postal_code {

  width: 70px;

  padding: 1rem;

  border-radius: 12px;

  border: 0;

}





#company_name {

  margin-bottom: 1rem;

}



.formFp > div,

.formSp > div,

.rightFormContainer > div {

  display: flex;

  flex-direction: column;

}



.error {

  font-size: 0.8rem;

  font-style: italic;

  margin-right: 0.3rem;

}



textarea {

  font-family: "Source Sans Pro", sans-serif;

  padding: 1rem;

  width: 256px;

  height: 220px;

  border: 0px;

  border-radius: 12px;

  resize: none;

}



input[type="radio"] {

  width: 15px;

  height: 15px;

  cursor: pointer;

  border-radius: 20%;

  background-color: var(--tertiary-color);

  border: 4px solid var(--tertiary-color);

  appearance: none;

  margin-right: 0.5rem;

}



input[type="radio"]:checked {

  cursor: pointer;

  border-radius: 20%;

  background-color: var(--button-color);

  border: 4px solid var(--tertiary-color);

}



.radioContainer {

  display: flex;

  gap: 1rem;

}

.radioContainer label {

  cursor: pointer;

  vertical-align: super;

}

/* roz */


*:focus {

  outline: 2px solid var(--button-color-violet) !important;

}

::placeholder {

  color: #c1c1df;

}



form input[type="checkbox"] {

  accent-color: var(--button-color);

  width: 20px;

  height: 20px;

  outline: 1px solid var(--tertiary-color);

  margin-right: 0.5rem;

}



.leftFormParts label,

form label {

  vertical-align: super;

}



.formFp {

  display: flex;

  flex-direction: column;

}

.formSp {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.rightFormPart {

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



#submitButton {

  width: 250px;

  height: 50px;

  border-radius: 30px;

  background-color: var(--button-color);

  border: 0;

  color: var(--tertiary-color);

  font-size: 1rem;

  cursor: pointer;

}



#submitButton:hover {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 

}



#storageType,

#reprezentant {

  font-size: 1.5rem;

  font-weight: 600;

}

.backgroundFormular {

  background: transparent linear-gradient(

    0deg,

    rgba(35, 105, 132, 1) 13%,

    rgba(238, 238, 254, 1) 100%

  )

    0% no-repeat padding-box;

}



form a {

  color: var(--tertiary-color);

}

form a:hover {

  text-decoration: underline;

}

#persoana {

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 1rem !important;

}

#livrare {

  font-size: 1.5rem;

  font-weight: 600;

  margin-bottom: 1rem !important;

}

#storage {

  font-size: 1.5rem;

  font-weight: 600;

}

#storageContainer {

  margin-top: 1rem;

}



@media (max-width: 63.9375em) {

  .leftFormBaseContainer,

  .formContainer {

    flex-direction: column;

  }

  .formLeftPart {

    flex-direction: column;

  }

  .formFp input,

  .formSp input,

  #name,

  #adresa,

  #telefon,

  #email,

  #producator,

  #numar_model,

  #capacitate,

  #numar_serial,

  #company_name,

  #company_id,

  textarea,

  #postal_code,

  #county,

  #city,

  #street,

  #nr,

  #bl,

  #sc,

  #AWB {

    width: 90%;

  }

  #submitButton {

    width: 95%;

  }

}

/* end form style */

/* 404 */

.notPage {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  color: white;

  margin: auto;

  height: 100%;

  gap: 3rem;

}

.notTitle {

  font-size: 3rem;

  font-weight: 800;

  margin: 1rem;

}

.notBg {

  background: transparent linear-gradient(175deg, #236984 25%, #ffffff 100%) 0%

    0% no-repeat padding-box;

  min-height: 100vh;

}

.notButton {

  padding: 1rem 1rem;

  width: 240px;

  height: 30px;

  color: var(--tertiary-color);

  background-color: var(--button-color);

  border-radius: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.notButton:hover {

  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

}



/*  end 404 */



/* UP Button */

#topBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 30px;

  z-index: 99;

  width: 30px;

  height: 30px;

  border: none;

  outline: none;

  background-color: var(--secundary-color);

  color: white;

  cursor: pointer;

  padding: 15px;

  border-radius: 12px;

}



#topBtn:hover {

  background-color: var(--button-color);

}



#topBtn > img {

  width: 30px;

  rotate: 180deg;

}



/* End Up Button */


/* UP Button */

#watBtn {

  display: none;

  position: fixed;

  bottom: 0px;

  right: 30px;

  z-index: 99;

  width: 30px;

  height: 30px;

  border: none;

  outline: none;

  background-color: var(--secundary-color);

  color: white;

  cursor: pointer;

  padding: 15px;

  border-radius: 12px;

}



#watBtn:hover {

  background-color: var(--button-color);

}



#watBtn > img {

  width: 30px;

  rotate: 180deg;

}



/* End Up Button */

/* dropMenu */

/* Style The Dropdown Button */

.dropbtn {

  background-color: transparent;

  color: var(--secundary-color);

  font-size: 1.5rem;

  border: none;

  cursor: pointer;

}

.pll-switcher-select {

  background-color: transparent;

  color: var(--secundary-color);

  font-size: 1.5rem;

  border: none;

  cursor: pointer;

}


/* The container <div> - needed to position the dropdown content */

.dropdown {

  font-family: "Source Sans Pro", sans-serif;

  font-weight: 400;

  position: relative;

  display: inline-block;

}



/* Dropdown Content (Hidden by Default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: var(--primary-color);

  font-size: 1rem;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(var(--button-color), 0.3);

  z-index: 1;

}



/* Links inside the dropdown */

.dropdown-content a {

  color: var(--secundary-color);

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}



/* Change color of dropdown links on hover */

.dropdown-content a:hover {

  background-color: var(--button-color);

  color: var(--tertiary-color);

}



/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {

  display: block;

}



/* Change the background color of the dropdown button when the dropdown content is shown */

.dropdown:hover .dropbtn {

  background-color: transparent;

}



/* End dropMenu */