/* Theme Name: Netrise Theme

   Text Domain: Netrise Theme

   Version: 1.0

   Description: Netrise theme

   Author: Netrise

*/
:root {
   /* Colors */
   --nr-darker-purple: #49005B;
   --nr-dark-purple: #8002a0;
   --nr-purple: #9100b5;
   --nr-mid-purple: #B959D1;
   --nr-light-purle: #DE58FF;
   --nr-form-underline: #ac1cd0;
   --nr-grey: #cccccc;
   --nr-white: #ffffff;
   --nr-black: #292525;
   --nr-light-black: #2C2828;
   --nr-dark-grey: #2c2828;
   --nr-light-dark-grey: #707070;

   /* Widths */
   --nr-logo-width: 203px;
}

/* Reset */

*,
*::before,
*::after {
   box-sizing: border-box
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
   color: inherit;
   margin: 0;
   padding: 0;
}

/* Reset margin and padding on p tags */
p {
   margin: 0;
   padding: 0;
}

p+p {
   margin-top: 5px;
}

html {
   line-height: 1.15;
}

body {
   margin: 0;
   background: var(--nr-white);
   color: var(--nr-white);
}

.header-nav .netrise-logo-full {
   width: var(--nr-logo-width);
   opacity: 0;
   transition: opacity 400ms ease-out;
   will-change: opacity;
}

/* Reset ::marker pseudo elements */
::-webkit-details-marker {
   display: none;
}

ul {
   list-style-type: none;
   padding: 0;
}

li.menu-item::marker {
   content: '';
}

/* Utility classes */
.rtl {
   direction: rtl;
}

.display-none {
   display: none;
}

.display-initial {
   display: initial;
}

.hidden {
   visibility: hidden;
}

.visible {
   visibility: visible;
}

.opacity-0 {
   opacity: 0;
}

.opacity-1 {
   opacity: 1;
}

.no-height {
   height: 0;
}

.no-width {
   width: 0;
}

/* Logo collapse/expand scroll animation */
.logo-collapse :where(.letter-I, .letter-S, .letter-E) {
   animation: collapse-part-1 0.3s var(--delay) forwards normal ease-out;
}

.logo-collapse :where(.letter-E-MENU, .letter-T) {
   animation: collapse-part-2 0.3s var(--delay) forwards normal ease-out;
}

.logo-collapse .letter-R {
   animation: collapse-part-3 0.5s 0.2s forwards normal ease-out;
}

.logo-expand :where(.letter-I, .letter-S, .letter-E) {
   animation: collapse-part-1 0.5s var(--delay) both reverse ease-in;
}

.logo-expand :where(.letter-E-MENU, .letter-T) {
   animation: collapse-part-2 0.4s var(--delay) both reverse ease-in;
}

.logo-expand .letter-R {
   animation: collapse-part-3 0.5s 0.2s both reverse ease-in;
}

.letter-N {
   --index: 0;
}

.letter-E-MENU {
   --index: 1;
   --delay: 0.1s;
}

.letter-T {
   --index: 2;
   --delay: 0.2s
}

.letter-R {
   --index: 3;
}

.letter-I {
   --index: 4;
   --delay: 0.1s;
}

.letter-S {
   --index: 5;
   --delay: 0.2s;
}

.letter-E {
   --index: 6;
   --delay: 0.3s;
}


@keyframes collapse-part-1 {
   from {
      transform: translate(0, 0);
      opacity: 1;
   }

   to {
      transform: translate(calc(var(--index) * -50px), 0);
      opacity: 0;
   }
}

@keyframes collapse-part-2 {
   from {
      transform: translate(0, 0);
      opacity: 1;
   }

   to {
      transform: translate(calc(var(--index) * -80px), 0);
      opacity: 0;
   }
}

@keyframes collapse-part-3 {
   from {
      transform: translate(0, 0);
   }

   to {
      transform: translate(calc(var(--nr-logo-width) * -1), 0);
   }
}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
   width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
   background: var(--nr-black);
   box-shadow: inset 0 0 28px -11px var(--nr-darker-purple);
}

/* Handle */
::-webkit-scrollbar-thumb {
   background: var(--nr-purple);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
   background: var(--nr-darker-purple);
}

.scrollbar {
   position: absolute;
   top: 0;
   right: 0;
   width: 17px;
   height: 100%;
   background: transparent;
}

.scrollbar:after {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
}

@media screen and (max-width: 2560px) {
   :root {
      font-size: 20px;
   }
}

@media screen and (max-width: 2260px) {
   :root {
      font-size: 18px;
   }
}

@media screen and (max-width: 1920px) {
   :root {
      font-size: 16px;
   }
}

@media screen and (max-width: 1600px) {
   :root {
      font-size: 13.3px;
   }
}

@media screen and (max-width: 1200px) {
   :root {
      /* font-size: 15px; */
      --nr-logo-width: 143px;
   }

   #svg-1 {
      left: unset;
      position: fixed;
      right: 3vw;
      width: 3.125rem;
      bottom: 55%;
      z-index: 5;
      transition: opacity 0.3s ease-in-out;
   }

   #svg-2 {
      left: unset;
      position: fixed;
      bottom: 56%;
      right: 3vw;
      width: 3.125rem;
      opacity: 0;
      z-index: 4;
      transition: opacity 0.3s ease-in-out;
   }

   svg#contactUs {
      left: unset;
      position: fixed;
      right: 3vw;
      width: 3.125rem;
      bottom: 10%;
      z-index: 5;
      transition: opacity 0.3s ease-in-out;
      display: block;
      bottom: 50%;
      height: 50px;
      width: 50px;
   }

   /* Popup arrow */
   svg#popupX {
      position: relative;
      left: -44vw;
   }

   .rightSideBar {
      position: relative;
      top: 0;
      right: 0;
      display: block;
      height: 100%;
      z-index: 21;
      background: rgb(44 40 40 /0.95);
      margin: 0;
      direction: rtl;
      font-weight: 300;
      text-align: right;
      padding-left: 1vw;
      font-size: 3.75rem;
      font-family: 'Karantina', 'cursive';
      padding-top: 11vh;
      width: 100%;
      padding-right: 12vw;
      padding-left: 100vw;
   }

   .open-menu .closer {
      right: 7.3vw;
   }
}

.letters {
   display: inline-block;
}

dialog::backdrop {
   background-color: rgb(0 0 0 / 32%);
   cursor: pointer;
   pointer-events: all;
}

/* Form styles */

.footer-form-title {
   border-right: 1px solid var(--nr-purple);
   padding-right: 1.5vw;
}

.footer-menu-wrapper {
   padding-left: 2vw;
}

.banner-form .wpcf7 input {
   font-family: "aktiv-grotesk-hebrew", sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 1em;
   color: var(--nr-dark-grey);
   text-align: right;
}

.banner-form .wpcf7 .wpcf7-submit {
   width: 100%;
   font-family: 'Heebo', sans-serif;
   font-style: normal;
   font-weight: 300;
   text-align: center;
   font-size: 1.875em;
   color: var(--nr-white);
   background: linear-gradient(262deg, var(--nr-purple) 0%, var(--nr-darker-purple) 100%) 0% 0% no-repeat padding-box;
   border-radius: 15px 0px 15px 15px;
   border: none;
   margin-top: 9%;
   transition: background-image 500ms ease-in;
}

.banner-form .wpcf7 .wpcf7-submit:hover {
   cursor: pointer;
}

.banner-form .footer-form>.wpcf7-form-control-wrap {
   width: 100%;
}

.banner-form .footer-form>.wpcf7-form-control-wrap>.wpcf7-form-control {
   width: 100%;
   border-width: 0 0 1px 0;
   border-color: var(--nr-form-underline);
   padding-right: 20px;
}

.banner-form .footer-form .inline-fields :where(.wpcf7-form-control-wrap, .wpcf7-form-control) {
   display: inline;
   width: 47%;
   border: 0;
   padding-right: 2%;
}

.banner-form .footer-form .inline-fields {
   border-width: 0 0 1px 0;
   border-color: var(--nr-form-underline);
   border-style: solid;
   direction: rtl;
}

.banner-form .footer-form .input-field {
   padding-top: 8%;
}

.banner-form .footer-form .inline-fields.input-field {
   padding-top: 10%;
}

textarea:focus,
input:focus {
   outline: none;
}

.wpcf7-spinner {
   display: inline-block;
   margin-block: 24px;
   margin-top: 24px;
}

.form-popup :where(.form-title-one, .form-title-two) {
   font-family: 'Karantina', cursive;
   font-size: 3.75em;
   font-weight: 300;
   line-height: 60%;
}

.form-popup {
   background: white;
   position: fixed;
   z-index: 999;
   opacity: 1;
   pointer-events: all;
   font-size: 15px;
   transition: opacity 200ms ease-in, transform 250ms ease-in-out;
   border: none;
   padding: 1vw;
   border-radius: 16px;
}

.form-popup .footer-form {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   gap: 1.5em;
   padding-left: 3vw;
   padding-right: 2vw;
}

.wpcf7 form .wpcf7-response-output {
   color: red;
   border: none;
   direction: rtl;
   padding: 0;
   font-family: 'aktiv-grotesk-hebrew';
   font-weight: 600;
}

.wpcf7-not-valid-tip {
   position: absolute;
   top: -1em;
   right: 0;
   font-family: "aktiv-grotesk-hebrew", sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 1em;
   color: red;
   text-align: right;
   letter-spacing: 0px;
}

.form-popup .wpcf7 input {
   font-family: "aktiv-grotesk-hebrew", sans-serif;
   font-style: normal;
   font-weight: 300;
   font-size: 1em;
   color: var(--nr-dark-grey);
   text-align: right;
}

.form-popup .wpcf7 .wpcf7-submit {
   width: 100%;
   font-family: 'Heebo', sans-serif;
   font-style: normal;
   font-weight: 300;
   text-align: center;
   font-size: 1.875em;
   color: var(--nr-white);
   background: linear-gradient(275deg, var(--nr-purple), var(--nr-dark-purple)) 0% 0% no-repeat;
   border-radius: 15px 0px 15px 15px;
   border: none;
   margin-top: 3%;
   transition: background-image 500ms ease-in;
}

.form-popup .wpcf7 .wpcf7-submit:hover {
   cursor: pointer;
   background: linear-gradient(275deg, var(--nr-black), var(--nr-black)) 0% 0% no-repeat;
   animation: bounce 1s;
}

.form-popup .footer-form>.wpcf7-form-control-wrap {
   width: 100%;
}

.form-popup .footer-form>.wpcf7-form-control-wrap>.wpcf7-form-control {
   width: 100%;
   border-width: 0 0 1px 0;
   border-color: var(--nr-black);
}

.form-popup .footer-form .inline-fields :where(.wpcf7-form-control-wrap, .wpcf7-form-control) {
   display: inline;
   width: 49%;
   border: 0;
}

.form-popup .footer-form .inline-fields {
   border-width: 0 0 2px 0;
   border-color: #b6b0b0;
   border-style: solid;
   direction: rtl;
}

.form-popup .footer-top-row {
   flex-direction: column-reverse;
   width: 450px;
}

.form-popup .footer-column-contact {
   direction: ltr;
}

.form-popup .footer-column-nav-wrapper {
   display: block;
}

.form-popup .footer-form-title {
   border-right: unset;
   padding: unset;
}

.form-popup .form-title.vertical-text {
   writing-mode: horizontal-tb;
}

.form-popup .footer-form {
   padding: unset;
}

.form-popup .footer-column-nav-wrapper {
   width: 100%;
   padding-bottom: 4vh;
}

.form-popup .footer-column-form {
   width: 100%;
}

.close-popup {
   display: flex;
   flex-direction: row-reverse;
   width: 100%;
   z-index: 300;
   cursor: pointer;
}

.form-title-one {
   color: var(--nr-black);
}

.form-title-two {
   color: var(--nr-purple);
}

.contact-floater {
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: 200;
   width: max(4.25vw, 7vh);
   margin: 2.75vw;
   cursor: pointer;
}

.contact-floater-icons {
   display: none;
}

.contact-floater-icons.show {
   display: block;
}

.contact-floater-icons .contact-icon {
   position: absolute;
   width: 100%;
   z-index: 20;
   transform: translateX(0) translateY(0) scale(0) rotate(0deg);
}

.main-icon {
   position: relative;
}

.main-icon .micon {
   opacity: 1;
   transition: opacity 200ms ease-in;
}

.main-icon .closeicon {
   position: absolute;
   top: 0;
   width: 100%;
   scale: 1.15;
   opacity: 0;
   transition: opacity 200ms ease-in;
}

@keyframes gelatine {

   from,
   to {
      transform: scale(1, 1);
   }

   25% {
      transform: scale(0.9, 1.1);
   }

   50% {
      transform: scale(1.1, 0.9);
   }

   75% {
      transform: scale(0.95, 1.05);
   }
}

.main-icon:hover svg {
   animation: gelatine 500ms ease-in;
}

.contact-floater-icons.show+.main-icon .closeicon {
   opacity: 1;
}

.contact-floater-icons.show+.main-icon .micon {
   opacity: 0;
}

.main-icon .closeicon svg {
   width: 100%;
   height: 100%;
}

.form-popup .close-popup svg path {
   fill: #9100B5;
}

.main-icon .closeicon svg path {
   fill: #9100B5;
}

@media screen and (max-width: 767px) {
   :root {
      font-size: 12px;
   }

   .form-popup {
      background: white;
      position: fixed;
      z-index: 999;
      opacity: 1;
      pointer-events: all;
      font-size: 15px;
      transition: opacity 200ms ease-in, transform 250ms ease-in-out;
   }

   .form-popup .footer-top-row {
      padding: 5vw;
      flex-direction: column;
      width: 100%;
   }

   .close-popup {
      display: flex;
      flex-direction: row-reverse;
      padding: 5vw 0 0 5vw;
      width: 100%;
      z-index: 300;
      cursor: pointer;
   }
}

/* Services section */
.services-section {
   position: relative;
   z-index: 20;
   background: hsl(0, 5%, 16%);
}

.services-title {
   color: #FFF;
   line-height: 110%;
   padding: 4.313rem 5.375rem 6.313rem 0;
   font-weight: 400;
   font-size: min(7.5rem, 12.4vh);
   color: hsl(0, 0%, 100%);
   font-family: 'Karantina', cursive;
}

.services-section .services-grid {
   margin-inline: 5.375rem;
}

.services-section .service-title {
   color: #C56DEB;
   font-size: 2.625rem;
   font-weight: 400;
   font-family: 'Karantina', cursive;
   line-height: 110%;
   margin-top: 1.688rem;
}

.services-section .service-description {
   color: #FFF;
   font-family: "aktiv-grotesk-hebrew", sans-serif;
   font-size: min(1.438rem, 2.4vh);
   font-weight: 400;
   line-height: 120%;
   margin-top: 0.938rem;
}

.services-row {
   display: flex;
   flex-wrap: wrap;
}

.services-box {
   width: 33%;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
   text-align: center;
   margin-bottom: 6rem;
}

.services-row-form {
   display: flex;
}

.services-col {
   width: 50%;
   display: flex;
   flex-flow: column;
   justify-content: center;
   align-items: center;
}

.services-col.col-form {
   padding-left: 10vw;
   padding-right: 2vw;
}

/* Services form styles */

.services-section .form {
   margin-top: 3.75rem;
   width: 100%;
}

.services_form_title {
   text-align: right;
   font-weight: 400;
   font-size: min(7.5rem, 12.4vh);
   color: hsl(0, 0%, 100%);
   font-family: 'Karantina', cursive;
   line-height: 110%;
   width: 100%;
}

p.services_contact_text a {
   color: white;
}

.services_contact_text {
   color: #FFF;
   text-align: center;
   font-family: "aktiv-grotesk-hebrew", sans-serif;
   font-size: 1.375rem;
   font-weight: 400;
   line-height: 110%;
   margin-top: 1.5rem;
}

.services-section .footer-form {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   gap: 3.5em;
}

.services-section .wpcf7 input,
.services-section .wpcf7 input::placeholder {
   font-family: "aktiv-grotesk-hebrew", sans-serif;
   text-align: right;
   color: #FFF;
   font-size: min(1.438rem, 2.4vh);;
   font-style: normal;
   font-weight: 400;
   line-height: 110%;
}

.services-section .wpcf7 .wpcf7-submit {
   width: 100%;
   font-family: 'Heebo', sans-serif;
   font-style: normal;
   font-weight: 300;
   text-align: center;
   font-size: 1.875em;
   color: var(--nr-white);
   border-radius: 15px 0px 15px 15px;
   background: linear-gradient(90deg, #370F49 0%, #8424AF 100%);
   border: none;
   transition: background-image 500ms ease-in;
   padding: 1rem 0;
}

.services-section .wpcf7 .wpcf7-submit:hover {
   cursor: pointer;
   background: linear-gradient(275deg, var(--nr-black), var(--nr-black)) 0% 0% no-repeat;
   animation: bounce 1s;
}

.services-section .form input:-webkit-autofill,
.services-section .form input:-webkit-autofill:hover,
.services-section .form input:-webkit-autofill:focus,
.services-section .form input:-webkit-autofill:active {
   -webkit-background-clip: text;
   -webkit-text-fill-color: #ffffff;
   transition: background-color 5000s ease-in-out 0s;
   box-shadow: inset 0 0 20px 20px hsl(0, 5%, 16%);
}

.services-section .form>.wpcf7-form-control-wrap {
   width: 100%;
}

.services-section .form>.wpcf7-form-control-wrap>.wpcf7-form-control {
   width: 100%;
   border-width: 0 0 1px 0;
   border-color: var(--nr-black);
}

.services-section .form .inline-fields :where(.wpcf7-form-control-wrap, .wpcf7-form-control) {
   display: inline;
   width: 49%;
   border: 0;
   background: transparent;
}

.services-section .form .inline-fields {
   border-width: 0 0 1px 0;
   border-color: #A641D3;
   border-style: solid;
   direction: rtl;
}

.services-section .wpcf7-spinner {
   margin-inline: 0;
   margin-block: 0;
   background-color: #fff;
}

.services-section .wpcf7-spinner:before {
   background-color: grey;
}

@media screen and (max-width: 990px) {
   .services-box {
      width: 50%;
   }

   .col-img {
      display: none;
   }

   .col-form {
      width: 100%;
   }
}

@media screen and (max-width: 767px) {
   .services-box {
      width: 100%;
   }

   .services-section .services-grid {
      margin-inline: 3.375rem;
   }
}