* {margin:0;padding:0;list-style:none;outline:none;border:none;text-decoration:none;font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-appearance: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)}
:root {--c1:#e94625}
a[href], input[type='submit'], input[type='image'], select, button {cursor:pointer}
a,input {transition: all .2s linear;-o-transition: all .2s linear;-moz-transition: all .2s linear;-webkit-transition: all .2s linear}
img {max-width:100%;}
body {cursor:default;direction:rtl;font-family: 'Heebo', sans-serif;background-color:var(--c1);}
.thankyou {
	color:#fff;background-color:var(--c1);min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:40px;text-align:center;box-sizing:border-box
}
.main {
  display:flex;position:fixed;inset:0;flex-direction:column;justify-content:space-between;
  @media (max-width:1000px){
    position:relative; overflow-x: hidden;
  }
}

.content {
  text-align:center; flex-grow:1; position:relative;display:flex;justify-content:space-between;align-items:center;flex-direction:column;background:url('../img/bg%EF%B9%96v=1.webp') no-repeat #fff center center / cover;background-position: center top -7vw;;z-index:1;
  &:before {content:'';position:absolute;inset:0;/*background-image:linear-gradient(#000,transparent);*/z-index:-1}
  & h1 {font-size:7em;font-weight:900;line-height:1}
  & h1 span {color:var(--c1)}
  & h2 {font-weight:400;font-size:2.5em;line-height:.5;}
  & h2 span {font-weight:900}
  & p {max-width:800px;margin-inline:auto;font-size:1.5em;line-height:1.2}
  & p span {font-weight:900}
  .title {display: flex; flex-direction: row-reverse;animation: flicker 3s linear;}
  .badge {position:absolute;bottom:0;left:0;width:130px;height:130px;z-index:1;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.7em;line-height:1}
  .badge:before {content:'';position:absolute;inset:0;background-color:var(--c1);border-radius:50%;z-index:-1}
  .text {color:#fff;position:relative; padding-inline:5vw;top:0}
  .hero {display:flex;flex-direction: row-reverse;max-height:45vh;margin-top:6vh;position:relative;width:100%;box-sizing: border-box;padding-inline-end:13vw;/*! gap:20px; */}
  .hero img {max-height:100%;margin-inline:-10px}
  .hero > img:first-child {margin-inline-end:-40px; margin-bottom: 10px;margin-inline-start:-1.2vw}

  .hero .data {position:absolute; right:0;bottom:0; border: 2px solid var(--c1) ;padding: 10px;font-size: 1.4vw;width:27em;}
  .hero .data span {font-size: 1.4em; font-weight: 700}
  .hero .data ul {display:flex; flex-wrap: wrap;font-size:1.1em;font-weight: 500}
  .hero .data ul li:before {content:""; display:inline-block; width:10px; height: 10px;margin-inline:10px; border-radius: 50%;background-color:var(--c1)}
  .clients {bottom:0;width:100%;box-sizing: border-box;padding-block: 10px; padding-inline: 30px; text-align: start;font-weight: 900;font-size:1.2em}
  .clients strong {color:var(--c1); font-weight: bolder}
  @media (max-width:1600px){
    .hero {padding-inline-end: 2vw;}
    .hero > img:first-child {margin-inline-start:0}

    & h1 {font-size:6em}
    & h2 {font-size:2em}
  }
  @media (max-width:1200px){
        .hero .data ul li:before{width: .5vw; height: .5vw;margin-bottom:.1em}
    .hero ul {align-content: end;justify-content: flex-end}
    .hero .data {width:15em; font-size:1.3vw;}
    .hero .data li {position:relative;flex-basis: 100%; text-align: start;margin-inline:1vw; line-height: 1.2; }
    & h1 {font-size:5em}
    & p {font-size:1em}
    .data {font-size: 1rem}
    .badge {left:auto;right:5vw;bottom:20px;transform:rotate(15deg)}
    .badge:before {box-shadow:0 10px 10px rgba(0,0,0,.5)}
    
  }
  @media (max-width:1000px){
    & {background: url('../img/bgm.webp') #fff no-repeat center top / 100% auto;background-position: center top -15vw;}
    .title{flex-direction: column;}
    .title {flex-basis: 100%}
    .text {margin-top: 8vw}
    .clients {display: none;}
    .hero {max-height:none;flex-basis: 100%; margin:14vw 0 0 0; padding:0; justify-content: center;flex-direction:column; gap:5vh;}
    .hero .mobile_content {flex-basis: 100%;}
    .mobile_content img {max-height: 70%; }
    .hero > img:first-child {display:none}
    .hero .data {position: relative; border-bottom:none;border-width: 3px;text-align: start;background-color:#fff;width:auto;}
    .hero ul {align-content: end;justify-content: flex-end;/*! max-width: auto; */}
    .hero .data li {position:relative;flex-basis: 100%; text-align: start;margin-inline:8vw; font-size:4vw;line-height: 1.2}
    .hero .data li::before{position: absolute; top:.5em;right:-.8em;width:1vw!important;; height:1vw!important;}
    .hero .data span {display:inline-block; margin:6vw 7vw; font-size: 5vw;line-height:.98;margin-inline-start: 1em;}
  }
  @media (max-width:900px){
    .mobile_content img {max-height: 70%; max-width: 80%; }
    & h2 {font-size:6vw; line-height:1; margin-inline: 15%}
    .title > div{margin-inline:10px;}
    .title > div:first-child{margin-inline:10%;margin-inline-start:15%;margin-bottom:-15px;}
    .badge {display:none}

  }
  @media (max-width:600px){
    .data{padding-bottom:7vw!important;;}
    .hero .data span {position:relative;flex-basis: 100%; text-align: start;margin-inline:4vw; font-size:8vw;line-height: 1.2}
    .hero .data li {position:relative;flex-basis: 100%; text-align: start;margin-inline:8vw; font-size:8vw;line-height: 1.1}
    .hero .data li::before{position: absolute; top:.5em;right:-.8em;width:2vw!important;; height:2vw!important;}
    & h1 {font-size:2.5em}
  }
}
.hero {

  .mobile_content{height:100%;flex-basis: 20%;display:flex; flex-direction:column; justify-content:center; align-items:center;}
  .mobile_content img {/*! width:100%; */}
  .mobile_content .c {display: flex;justify-content: center; align-items: center; gap:10px;/*! height:30%; */;}
  .c svg {width: 50px; height:50px;}
  .c .mobile_text {border: solid 2px var(--c1); font-size: 1em;width:10em;padding:5px;}
  @media (max-width:1000px){
    .mobile_content .c {font-size: 3vw}
    .c svg {width: 11vw; height:  11vw}
  }
    @media (max-width:700px){
      .mobile_content .c {font-size: 5vw}
      .c svg {width: 17vw; height:  17vw}
  }
}
@keyframes flicker {
	0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {opacity: .99;}
	20%, 21.999%, 63%, 63.999%, 65%, 69.999% {opacity: 0.4;}
}

.bottom {
  flex-grow:0;background-color:var(--c1);padding:10px 5vw;display:flex;gap:5vw;
  & h3 {font-size:1.3em;margin-bottom:10px;line-height:1}
  & fieldset {flex-grow:1}
  & form {display:flex;gap:1em}
  & form button {width:100%;background-color:#000;color:#fff;padding:0 20px;border:0;display:flex;align-items:center;justify-content:center;font:inherit;font-size:2em;font-weight:900;fill:#fff;gap:10px;transition:all .2s ease}
  & form button svg {width:0;height:0;transition:all .2s ease;transform:translateX(20px);opacity:0}
  & form button:hover svg {width:.5em;height:.5em;transform:translateX(0);opacity:1}
  & input, & select {width:100%;padding:10px 15px;background-color:#fff;color:#000;box-sizing:border-box;font:inherit;direction:rtl;font-weight:bold;transition:all .2s ease}
  & input:focus {box-shadow:0 0 10px #fff}
  & form ::placeholder {color:#000}
  .acceptance {margin-top:10px;display:block}
  .acceptance b {font-weight:normal;display:none}
  .acceptance input {display:none}
  .acceptance input:checked+span:after {opacity:1;transform:translate(5px,-5px)}
  .acceptance span {display:block;position:relative;padding-inline-start:25px;color:#fff;font-size:1.1em;line-height:1}
  .acceptance span:after {content:'';position:absolute;top:4px;right:2px;width:15px;height:15px;background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIyLjIgMC41MkwyMS45NyAwQzIwLjIyIDAgMTcuNTQgMC41OCAxNi40NCAxLjk0TDEzLjgyIDUuMTRMNi4zNSAxNi4yM0M2LjE5IDE2LjQ2IDUuODMgMTcuMiA1LjUxIDE3LjJDNS4xNSAxNy4yIDQuODYgMTYuMyA0Ljc3IDE2LjA0TDQuMTIgMTQuNTJDMy44OSAxNCAzLjg2IDEzLjQ1IDMuMjIgMTMuNDVDMi4zOCAxMy40NSAxLjQxIDE0IDAuNzMwMDAyIDE0LjQ4QzAuMzEwMDAyIDE0Ljc3IC0wLjAwOTk5ODMyIDE1LjAzIC0wLjAwOTk5ODMyIDE1LjU4Qy0wLjAwOTk5ODMyIDE3LjIgMS4yNSAyMC40MyAxLjk2IDIxLjkxQzIuNjQgMjMuMyAyLjU3IDIzLjIgNC4xNiAyMy4yQzQuNjEgMjMuMiA1LjU4IDIzLjIgNiAyMy4wMUM2LjMyIDIyLjgyIDYuNDkgMjIuNDMgNi42OCAyMi4xTDcuODEgMjAuMTZMMTIuNDYgMTIuOTVMMTkuMTggNC4wNkwyMi4xOSAwLjVMMjIuMiAwLjUyWiIgZmlsbD0iIzIzMUYyMCIvPgo8L3N2Zz4K') no-repeat center center / cover;opacity:0;z-index:2;transition:all .2s ease}
  .acceptance span:before {content:'';position:absolute;top:0;right:0;width:15px;height:15px;border:1px #000 solid;background-color:#fff}
  .buttons {display:flex;gap:20px}
  .call {display:none;background-color:#fff;align-items:center;justify-content:center;padding:20px;border-radius:10px;fill:green}
  .desk {flex-grow:1;}
  .desk span {font-size: .9em; width:13rem}
  .fields {flex-grow:1}
  .fields p {font-size:1.3em;margin-top:10px}
  .form {flex-grow:1}
  .icons {display:none}
  .logo {max-height:100%;max-width:200px}
  .row {display:flex;gap:1vw}

  @media (max-width:700px){
    & {flex-direction:column;padding:20px}
    & fieldset {padding-bottom:10px}
    & form {gap:0;flex-direction:column}
    & h3 {text-align:center; font-size: 10vw; margin-bottom: .6em;}
    .acceptance b {display:inline-block}
    .acceptance span {font-size:.8em}
    .call {display:flex}
    .desk {display:flex;flex-direction:column-reverse;gap:10px}
    .fields p {display:none}
    .icons {display:block}
    .logo {margin-inline:auto}
    .row {flex-direction:column}
  }
}