/* Order form (communication section) styling for /web-development,
   extracted verbatim from the site's main stylesheet (style.css) so the form
   matches the home page, including its mobile layout and the contacts card
   that splits into its own section. The page loads marketingPage/style.css,
   which carries an older #comunication variant missing most of the mobile
   rules; this file loads after it to complete/override them. */

#comunication {overflow: hidden;}

@media (max-width: 767px) {
  #comunication .content {margin: 0 !important;}
  #comunication .container {max-width: 100%;
    padding: 0 12px;}
}

#comunication .place-for-form {display: flex;
  justify-content: center;
  align-items: center;}

#comunication .table-form {margin: auto;
  background: linear-gradient(0deg, rgb(202, 202, 202) 7%, rgb(202, 202, 202) 72%, rgb(102, 102, 102) 100%);
  border-radius: 80px;
  padding: 40px;}

@media (max-width: 767px) {
  #comunication .table-form {width: 100%;
    border-radius: 24px;
    padding: 0px;}
}

#comunication .table-form .table-inter {background: linear-gradient(0deg, rgb(191, 191, 191) 7%, rgb(179, 177, 177) 72%, rgb(54, 54, 54) 100%);
  border-radius: 40px;
  padding: 20px;
  width: 100%;
  height: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 560px;
  overflow: hidden;}

@media (max-width: 767px) {
  #comunication .table-form .table-inter {min-width: 0;
    border-radius: 20px;
    padding: 12px;}
}

#comunication .table-form .current-form {display: flex;
  gap: 20px;
  margin: auto;
  width: 100%;
  height: fit-content;}

@media (max-width: 767px) {
  #comunication .table-form .current-form {flex-direction: column;
    max-width: 100%;
    max-height: 600px;
    overflow: auto;}
}

#comunication .table-form .current-form .part-form {width: 100%;}

#comunication .table-form .current-form .part-form-wrapper {display: flex;
  background: rgba(0, 0, 0, 0.3490196078);
  box-shadow: 0px 7px 19px 0px rgba(255, 255, 255, 0.1019607843);
  border-radius: 20px;}

#comunication .table-form .current-form .part-form {display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;}

#comunication .table-form .current-form .part-form .input-row {display: flex;
  gap: 20px;
  width: 100%;}

#comunication .table-form .current-form .part-form .input-row:has(> .input-wrapper) {align-items: flex-start;}

@media (min-width: 768px) and (max-width: 1024px) {
  #comunication .table-form .current-form .part-form .input-row {flex-wrap: wrap;}
}

@media (max-width: 767px) {
  #comunication .table-form .current-form .part-form .input-row {flex-wrap: wrap;}
}

#comunication .table-form .current-form .part-form .halb-col {display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;}

#comunication .table-form .current-form .part-form .titles {display: flex;
  flex-direction: column;
  gap: 8px;}

#comunication .table-form .current-form .part-form .part-title {font-weight: 600;
  font-size: 24px;}

#comunication .table-form .current-form .part-form .part-text {font-weight: 400;
  font-size: 14px;
  opacity: 0.5;}

#comunication .table-form .current-form .part-form .or-line {opacity: 0.5;
  font-weight: 400;
  font-size: 13px;
  display: flex;
  align-items: center;}

#comunication .table-form .current-form .part-form .or-line span {padding: 0 10px;}

#comunication .table-form .current-form .part-form .or-line::after {content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  opacity: 0.5;}

#comunication .table-form .current-form .part-form .or-line::before {content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  opacity: 0.5;}

#comunication .table-form .current-form .part-form .social-links {display: flex;
  justify-content: space-between;
  gap: 20px;}

@media (max-width: 767px) {
  #comunication .table-form .current-form .part-form .social-links {flex-direction: column;}
}

#comunication .table-form .current-form .part-form .social-links .link {display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;}

#comunication .table-form .current-form .part-form label.btn-glass-effect {min-width: auto;}

#comunication .table-form .current-form .part-form .btn-glass-effect {width: 100%;
  background: rgba(26, 26, 26, 0.2509803922);}

#comunication .table-form .current-form .part-form .btn-glass-effect:has(input:checked) {background: rgba(87, 166, 251, 0.3490196078);}

#comunication .table-form .current-form .part-form .btn-glass-effect:has(input:checked)::before {background: #57A6FB;}

#comunication .table-form .current-form .part-form .btn-glass-effect.confirm {max-width: 224px;
  background: #57A6FB;
  margin: auto auto 0;}

#comunication .table-form .current-form .part-form .form-actions {margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;}

#comunication .table-form .current-form .part-form .form-actions .btn-glass-effect.confirm {margin: 0 auto;}

#comunication .table-form .current-form .part-form .privacy-consent {display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  max-width: 360px;
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);}
#comunication .table-form .current-form .part-form .privacy-consent input[type="checkbox"] {flex-shrink: 0;
  margin: 2px 0 0;
  cursor: pointer;
  accent-color: #57A6FB;}
#comunication .table-form .current-form .part-form .privacy-consent label {cursor: pointer;}

#comunication .table-form .current-form .part-form .privacy-consent a {color: #57A6FB;
  text-decoration: underline;
  text-decoration-color: #57A6FB;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;}

#comunication .table-form .current-form .part-form .privacy-consent a:visited,
#comunication .table-form .current-form .part-form .privacy-consent a:hover,
#comunication .table-form .current-form .part-form .privacy-consent a:focus-visible {color: #57A6FB;
  text-decoration-color: #57A6FB;}

#comunication.section-container {position: relative;}

#comunication.section-container .title-block {position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 200;
  right: 0;
  left: 0;
  width: fit-content;
  height: fit-content;
  opacity: 0;
  transition: none;
  pointer-events: none;}

#comunication.section-container .table-form {transform: scale(1);
  transition: none;}

#comunication.section-container .part-form {opacity: 1;
  transition: none;}

@media (max-width: 767px) {
  #comunication.section-container .table-form {opacity: 0;
    transition: opacity 0.7s ease;}
  #comunication.section-container .part-form {transition: none;}
}

#comunication.anim .table-form {transform: scale(1);}

@media (max-width: 767px) {
  #comunication.anim .table-form {opacity: 1;}
}

#comunication.anim .part-form {opacity: 1;}

#comunication.anim .title-block {opacity: 0;}

#comunication.anim .bg-image {transform: scale(2.4);}

#comunication.anim .table-image {transform: scale(2.4);}

@media (max-width: 767px) {
  #comunication.anim .table-image {opacity: 0;}
}

#comunication.anim .table-inter {height: var(--table-inter-height);}

#comunication .table-form {transform-origin: center;}

#comunication .bg-image {transform: scale(2.4);
  transition: none;
  object-fit: cover;
  background-position: center;
  background-size: cover;
  pointer-events: none;
  transform-origin: center;}

#comunication .table-image {pointer-events: none;
  position: absolute;
  z-index: 5;
  bottom: -10%;
  right: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  transform: scale(2.4);
  transition: none;
  transform-origin: center;}

/* Collapsible contacts block — mobile only */
#comunication .contacts-body {display: flex;
  flex-direction: column;
  gap: 20px;}

#comunication .contacts-chevron {display: none;}

@media (max-width: 767px) {
  #comunication .contacts-toggle-btn {flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;}
  #comunication .contacts-header-text {display: flex;
    flex-direction: column;
    gap: 8px;}
  #comunication .contacts-chevron {display: block;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.35s ease;
    transform: rotate(0deg);}
  #comunication .contacts-block:not(.collapsed) .contacts-chevron {transform: rotate(180deg);}
  #comunication .contacts-block .contacts-body {overflow: hidden;
    max-height: 600px;
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease;}
  #comunication .contacts-block.collapsed .contacts-body {max-height: 0;
    opacity: 0;}
}

/* Mobile-only standalone contacts section, duplicated out of the order form */
.mobile-contacts-section {display: none;}

@media (max-width: 767px) {
  #comunication .current-form > .inline-contacts-block {display: none;}
  .mobile-contacts-section {display: block;
    padding-bottom: 60px;}
  .mobile-contacts-section .container {max-width: 100%;
    padding: 0 12px;}
}

.mobile-contacts-section .place-for-form {display: flex;
  justify-content: center;
  align-items: center;}

.mobile-contacts-section .table-form {margin: auto;
  width: 100%;
  background: linear-gradient(0deg, rgb(202, 202, 202) 7%, rgb(202, 202, 202) 72%, rgb(102, 102, 102) 100%);
  border-radius: 24px;
  padding: 0px;}

.mobile-contacts-section .table-form .table-inter {background: linear-gradient(0deg, rgb(191, 191, 191) 7%, rgb(179, 177, 177) 72%, rgb(54, 54, 54) 100%);
  border-radius: 20px;
  padding: 12px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;}

.mobile-contacts-section .table-form .current-form {display: flex;
  gap: 20px;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: fit-content;}

.mobile-contacts-section .table-form .current-form .part-form-wrapper {display: flex;
  width: 100%;
  background: rgba(0, 0, 0, 0.3490196078);
  box-shadow: 0px 7px 19px 0px rgba(255, 255, 255, 0.1019607843);
  border-radius: 20px;}

.mobile-contacts-section .table-form .current-form .part-form {width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;}

.mobile-contacts-section .table-form .current-form .part-form .titles {display: flex;
  flex-direction: column;
  gap: 8px;}

.mobile-contacts-section .table-form .current-form .part-form .part-title {font-weight: 600;
  font-size: 24px;}

.mobile-contacts-section .table-form .current-form .part-form .part-text {font-weight: 400;
  font-size: 14px;
  opacity: 0.5;}

.mobile-contacts-section .table-form .current-form .part-form .contacts-body {display: flex;
  flex-direction: column;
  gap: 20px;}

.mobile-contacts-section .table-form .current-form .part-form .or-line {opacity: 0.5;
  font-weight: 400;
  font-size: 13px;
  display: flex;
  align-items: center;}

.mobile-contacts-section .table-form .current-form .part-form .or-line span {padding: 0 10px;}

.mobile-contacts-section .table-form .current-form .part-form .or-line::after,
.mobile-contacts-section .table-form .current-form .part-form .or-line::before {content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  opacity: 0.5;}

.mobile-contacts-section .table-form .current-form .part-form .social-links {display: flex;
  flex-direction: column;
  gap: 20px;}

.mobile-contacts-section .table-form .current-form .part-form .social-links .link {display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 400;
  font-size: 15px;
  cursor: pointer;
  color: #fff;
  text-decoration: none;}

/* Order form — mobile step-by-step (contact fields -> services).
   Desktop is unaffected: the whole form stays visible and .step-nav is hidden. */
#comunication .step-nav {display: none;
  margin-top: auto;
  flex-direction: column;
  align-items: center;}

@media (max-width: 767px) {
  #comunication .description-field {display: none !important;}
  #comunication .current-form .step-services {display: none !important;}
  #comunication .current-form .step-nav {display: flex !important;}
  #comunication .current-form .form-actions {display: none !important;}
  #comunication .current-form.step-2-active .step-fields {display: none !important;}
  #comunication .current-form.step-2-active .step-services {display: flex !important;}
  #comunication .current-form.step-2-active .step-nav {display: none !important;}
  #comunication .current-form.step-2-active .form-actions {display: flex !important;}
}

/* marketingPage/style.css zeroes the section padding on mobile with an
   !important rule that the home page does not have; restore the home page's
   .section-container spacing (90px / 60px) so the form frame sits identically. */
@media (max-width: 768px) {
  #comunication {
    padding-top: 90px !important;
    padding-bottom: 60px !important;
  }
}

/* Desktop: the scene image (bg-image / table-image) fills the section from
   its very top, so it meets the dark page above with a hard horizontal cut.
   Fade the top of the scene into the page background (rgb(4,5,6)) so it
   transitions in smoothly. The overlay sits above the two images but below
   the form (lifted to z-index:10), so only the scene is feathered — the form
   is untouched. */
@media (min-width: 769px) {
  #comunication.section-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 240px;
    background: linear-gradient(
      to bottom,
      rgb(4, 5, 6) 0%,
      rgba(4, 5, 6, 0.85) 22%,
      rgba(4, 5, 6, 0) 100%
    );
    z-index: 6;
    pointer-events: none;
  }

  #comunication.section-container .content {
    position: relative;
    z-index: 10;
  }
}